动态生成饼状图 hightchats

最新推荐文章于 2024-06-21 16:31:42 发布

原创最新推荐文章于 2024-06-21 16:31:42 发布 · 697 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用Highcharts创建一个动态加载数据的饼图，并展示了从前端到后端的完整实现过程，包括数据请求、图表配置及显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">


$(document).ready(function() { 
var seriesArry = [];
$.ajax({
    url:'../sh/bingzhuantu',
    type:'post',
    dataType:'json',
    async:false,
    success:function(data){
        alert(data.length);

        for(var i =0 ;i < data.length; i++ ){
            var dataHigh = "";
            dataHigh += "{name:'"+data[i]['development']+"',";
            alert(data[i]['development']);

            dataHigh += "data:"+data[i]['pname']+"}";
            alert(data[i]['pname']);
            seriesArry.push(eval('('+dataHigh+')'));


        }
    }
}); 
alert(seriesArry);

var categories = [];

for(var i=0;i<seriesArry.length;i++){




    categories.push(eval('('+"['"+seriesArry[i]['name']+"',"+seriesArry[i]['data']+"]"+')'));





}
alert(categories);


var chart = {
           plotBackgroundColor: null,
           plotBorderWidth: null,
           plotShadow: false
       };
       var title = {
          text: '2014 年各浏览器市场占有比例'   
       };      
       var tooltip = {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
       };
       var 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'
                }
             }
          }
       };
       var series= [{
          type: 'pie',
          name: 'Browser share',
          data: categories
       }];     

       var json = {};   
       json.chart = chart; 
       json.title = title;     
       json.tooltip = tooltip;  
       json.series = series;
       json.plotOptions = plotOptions;
       $('#container').highcharts(json);  
    });


</script>   
</body>
</html>

后台

@RequestMapping("bingzhuantu")
       @ResponseBody
       public List  bingzhuantu() {


        List<Ploy>  list= studentService.showzhuzhuangtu();

           return list;   


       }

另一篇写的柱状图详细的，