關於Highcharts的餅狀圖（pie）實現起來就比柱狀圖（column）實現起來方便可理解的多。

我先貼出最後效果圖，然後來說說我對餅圖的理解。

官方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);
            }
        });
})