使用html和js制作饼图,html+js+highcharts绘制圆饼图表的简单实例

实例如下：

html+js+highcharts绘制圆饼图表的简单实例

var chart;

$(function () {

var totalMoney=999

var zccw=178

var sycw=821

$(document).ready(function() {

chart = new Highcharts.Chart({

chart: {

renderTo: 'pie_chart',plotBackgroundColor: 'white',//背景颜色

plotBorderWidth: 0,plotShadow: false

},title: {

text: '总车位:'+totalMoney +' 剩余车位:'+ sycw,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:'在场车辆',color:'#3DA9FF',y:zccw},{name:'剩余车位',color:'#008FE0',y:sycw},]

}]

});

});

});