八月没有晚山茶 2022-01-05 23:59 采纳率: 60%
浏览 130
已结题

(急)使用highcharts制作饼图的时候,想把数据动态显示在饼图上

(急)使用highcharts制作饼图的时候,想从服务器获取数据显示在饼图上
下图是服务器响应给jsp的内容(这个内容会随着数据库的变化而变化,比如下次传的可能是{"pt":8,"qw":4})(附上jsp的代码),jsp的饼图要怎样处理这个数据使之显示在饼图里呀

img

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <% //jQuery 安装:使用 Staticfile CDN 静态资源库来加载jQuery库%>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <% //Highcharts 安装:使用使用官方提供的 CDN 地址%>
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>             
<div id="container1" style="min-width:400px;height:400px"></div>
<script>
    Highcharts.chart('container1', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: '权威用户与非权威用户占有比例'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: '非权威用户',
            y: 5,
            sliced: true,
            selected: true
        }, {
            name: '权威用户',
            y: 3
        }]
    }]
    
});
    
</script>
</body>
</html>


img

目前上述代码data中y: 5 y: 3都用的静态数据,想让这两个使用传入到jsp的数据(如图)
  • 写回答

1条回答 默认 最新

  • 关注

    你题目的解答代码如下:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
        <% //jQuery 安装:使用 Staticfile CDN 静态资源库来加载jQuery库%>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <% //Highcharts 安装:使用使用官方提供的 CDN 地址%>
        <script src="https://code.highcharts.com/highcharts.js"></script>
    </head>
    <body>             
    <div id="container1" style="min-width:400px;height:400px"></div>
    <script>
    $.ajax({
        url: "url.jsp", //从服务器获取数据的地址 
        type: "POST",
        dataType: "json",
        success: function (data) {
            setHighcharts(data);
        }
    });    
    function setHighcharts(obj) {
        
        Highcharts.chart('container1', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: '权威用户与非权威用户占有比例'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: [{
                    name: '非权威用户',
                    y: obj.pt,
                    sliced: true,
                    selected: true
                }, {
                    name: '权威用户',
                    y: obj.qw
                }]
            }]
        });
    }
    </script>
    </body>
    </html>
    
    

    如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 1月14日
  • 已采纳回答 1月6日
  • 创建了问题 1月5日

悬赏问题

  • ¥15 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)
  • ¥15 Windows11, backspace, enter, space键失灵