html使用highcharts绘制饼图,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},

]

}]

});

});

});

以上这篇html+js+highcharts绘制圆饼图表的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

时间： 2016-08-01