Highcharts通过AJAX访问后台数据库实时刷新

最近项目中要做一个实时人流量的折线统计图,接触了下Highcharts在网上看了很多博客和官方API,总结出一下代码。

$(function () {
    var chart = Highcharts.chart('flot-line-chart-moving', {
        credits:{
            enabled:false // 禁用版权信息
        },
        title :{
            text:"实时人流量"
        },
        xAxis: {//X轴数据

            //categories: json.TimeList,
            labels: {
                enabled:false   //X轴不显示labels
            }
        },
        yAxis:{
             title:{
                text:'人数'
            }
        },
        legend: {                                                                    
            enabled: false                                                           
        },
        tooltip: {
            enabled: false
        },
        series: [{
            data: [0, 0, 0, 0, 0]  //图表初始化数据
        }]
    });

    function getFrom() {
        jQuery.ajax({
            url: "*****",
            type: "post",
            async: false,  //这里务必加上
            dataType: "json",
            data: { Action: "data", AjaxFllage: true },
            success: function (value) {
                //添加一个点至图表最后,并使前方点向前挪动
                chart.series[0].addPoint(value,true,true,true);
            }
        });
        //chart.series[0].addPoint(1);
    }

    $(document).ready(function () {
        //每隔1秒自动调用方法,实现图表的实时更新  
        window.setInterval(getFrom, 1000);
    });
});

你可能感兴趣的:(Web)