html使用highcharts绘制饼图,Highcharts绘制饼图的简单实例

本节内容：

Highcharts 饼图的绘制实例。

>>> 如果您不了解Highcharts为何物，请参考 Highcharts教程 中的相关内容。

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;

}  // www.jquerycn.cn

},

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}

]

}]

});

});

});