HighCharts动态显示数据实例

<script type="text/javascript">

var chart;

$(function() {

chart = new Highcharts.Chart({

chart: {

renderTo: 'chart_pie', //饼状图关联html元素id值

defaultSeriesType: 'pie', //默认图表类型为饼状图

plotBackgroundColor: '#ffc', //设置图表区背景色

plotShadow: true //设置阴影

},

title: {

text: '搜索引擎统计分析' //图表标题

},

credits: {

text: 'helloweba.com'

},

tooltip: {

formatter: function() { //鼠标滑向图像提示框的格式化提示信息

return '<b>' + this.point.name + '</b>: ' + twoDecimal(this.percentage) + ' %';

}

},

plotOptions: {

pie: {

allowPointSelect: true, //允许选中，点击选中的扇形区可以分离出来显示

cursor: 'pointer', //当鼠标指向扇形区时变为手型（可点击）

//showInLegend: true, //如果要显示图例，可将该项设置为true

dataLabels: {

enabled: true, //设置数据标签可见，即显示每个扇形区对应的数据

color: '#000000', //数据显示颜色

connectorColor: '#999', //设置数据域扇形区的连接线的颜色

style:{

fontSize: '12px' //数据显示的大小

},

formatter: function() { //格式化数据

return '<b>' + this.point.name + '</b>: ' + twoDecimal(this.percentage) + ' %';

//return '<b>' + this.point.name + '</b>: ' + this.y ;

}

}

}

},

series: [{ //数据列

name: 'search engine',

data: [{"name":"\u767e\u5ea6","y":1239,"sliced":true,"selected":true},["google",998],["\u641c\u641c",342],["\u5fc5\u5e94",421],["\u641c\u72d7",259],["\u5176\u4ed6",83]] //核心数据列来源于php读取的数据并解析成JSON

}]

});

function changeData(){

var baidu= Math.floor(Math.random()*10000+1);

var google = Math.floor(Math.random()*10000+1);

var data = [{"name":"\u767e\u5ea6","y":baidu,"sliced":true,"selected":true},["google",google],["\u641c\u641c",342],["\u5fc5\u5e94",421],["\u641c\u72d7",259],["\u5176\u4ed6",83]];

chart.series[0].setData(data);

}

setInterval(changeData,1000);

});

//保留2位小数

function twoDecimal(x) {

var f_x = parseFloat(x);

if (isNaN(f_x)) {

alert('错误的参数');

return false;

}

var f_x = Math.round(x * 100) / 100;

var s_x = f_x.toString();

var pos_decimal = s_x.indexOf('.');

if (pos_decimal < 0) {

pos_decimal = s_x.length;

s_x += '.';

}

while (s_x.length <= pos_decimal + 2) {

s_x += '0';

}

return s_x;

}

</script>