Highchartsが円グラフを描く

2052 ワード

1、Highchartsを使って餅図を作る効果図は以下の通りです.
2、対応するJavaScriptコード---pie-chart.jsは以下の通りです.
$(function () {
    var chart;
	var totalMoney=50000
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'pie_chart',
                plotBackgroundColor: 'white',//    
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {
                text: 'Total:$'+totalMoney,
				verticalAlign:'bottom',
				y:-60
            },
            tooltip: {//              
                pointFormat: '{point.name}: {point.percentage}%',
                percentageDecimals: 1,
				formatter: function() {
                    return this.point.name+':$'+totalMoney*this.point.percentage/100;
                }
            },
            plotOptions: {
                pie: {
					size:'60%',
					borderWidth: 0,
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
					enabled: true,
                    color: '#000',						
					distance: -50,//        ,                  
					style: {							
						fontSize: '10px',
						lineHeight: '10px'
					},
					formatter: function(index) {	
                            return  '' + this.point.name + '';
                       }
                  },
				 padding:20
                }
            },
            series: [{//          、  、   
                type: 'pie',
                name: null,
                data: [
                    {name:'Base salary',color:'#3DA9FF',y:65},
					{name:'Health insurance',color:'#008FE0',y:20},
					{name:'Company matched',color:'#00639B',y:10},
					{name:'Others',color:'#CBECFF',y:5}
                ]
            }]
        });
    });
    
});