Highchartsが円グラフを描く
2052 ワード
1、Highchartsを使って餅図を作る効果図は以下の通りです.
2、対応するJavaScriptコード---pie-chart.jsは以下の通りです.
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}
]
}]
});
});
});