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>