html使用highcharts绘制饼图,html js highcharts绘制圆饼图表

jquery实现饼状图效果 - 站长素材

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},

]

}]

});

});

});

Highcharts Example

var chart;

$(document).ready(function() {

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

plotBackgroundColor: null,

plotBorderWidth: null,

plotShadow: false,

events: {

load: function() {

// set up the updating of the chart each second

var series = this.series[0];

setInterval(function() {

var data = [];

data.push(['Firefox', Math.random()]);

data.push(['IE', Math.random()]);

data.push(['Safari', Math.random()]);

data.push(['Opera', Math.random()]);

data.push(['Others', Math.random()]);

series.setData(data);

}, 2000);

}

}

},

title: {

text: 'Java小强制作'

},

tooltip: {

formatter: function() {

return ''+ this.point.name +': '+ this.percentage +' %';

}

},

plotOptions: {

pie: {

allowPointSelect: true,

cursor: 'pointer',

dataLabels: {

enabled: true,

color: '#000000',

connectorColor: '#000000',

formatter: function() {

return ''+ this.point.name +': '+ this.percentage +' %';

}

}

}

},

series: [{

type: 'pie',

name: 'Browser share',

data: [

['Firefox',   45.8],

['IE',       26.8],

['Safari',    8.5],

['Opera',     6.2],

['Others',   12.7]

]

}]

});

});