highcharts java_highcharts 高级应用—动态饼图的实现

效果如下：

直接运行该JSP，你会看到效果，代码如下：

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]

]

}]

});

});

废话不再多说！

推荐您阅读更多有关于“ 饼图动态highcharts ”的文章