关于Highcharts饼状（pie）图AJAX动态赋值的问题

最新推荐文章于 2024-02-02 11:15:39 发布

原创最新推荐文章于 2024-02-02 11:15:39 发布 · 290 阅读

CC 4.0 BY-SA版权

本文探讨了在使用Highcharts饼状图时如何通过AJAX动态赋值。采用SpringMVC框架在后台封装JSON数据，确保JSON中的key与Highcharts demo中的key匹配，即使存在双引号，也能正确识别并显示数据。在前端，可以在AJAX回调函数中直接使用setData方法更新图表。

关于Highcharts饼状（pie）图AJAX动态赋值的问题

官方demo里面写的很清楚，series里面是放数据。可以看出也是可以放入json字符串，至于在前台封装还是后台封装，看需求了。我是用的SpringMVC封装好直接传到前台的，传到前台的json是这样的。

json内部key的命名则是要与demo中的命名相一致，至于双引号的问题，Highcharts还是能识别，然后显示数据的。
拿到了json之后就可以在ajax的毁掉函数中直接setData了

$.ajax({
 type:"GET",          
 url:'expenditure/selectClassifiation',
   success:function(data){
   $('#pie_expenditure').highcharts().series[0].setData(data);
        }     
  });

贴一下，整个图形的前台代码

$('#pie_expenditure').highcharts({	       
 chart: {
 plotBackgroundColor: null,	           
  plotBorderWidth: null,	            
  plotShadow: false
  },	        
  title: {	            
  text: '各分类支出占比'
   },	        
   tooltip: {	            
   headerFormat: '{series.name}<br>',
    pointFormat: '{point.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: [{	            
   type: 'pie',	            
   name: '各分类支出占比',
       }]	        	   
 });
 $.ajax({       
    type:"GET",          
    url:'expenditure/selectClassifiation',
     success:function(data){
            $('#pie_expenditure').highcharts().series[0].setData(data); 
                }