HighChart动态交互实时刷新曲线图

//借鉴:https://www.hcharts.cn/demo/highcharts/dynamic-update(highChart官网Demo)
//作者qq:544462804
 function activeLastPointToolip(chart) {
        var points = chart.series[0].points;
        chart.tooltip.refresh(points[points.length - 1]);
    }
    $('#chartscdll').highcharts({
            chart: {
                type: 'spline',
                zoomType: "x",
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function () {
                        ReloadPage();
                        var series = this.series[0],
                            chart = this;
                        var TimeData = "";
                        var Datas = "";
                        volValueInterval = setInterval(function () {
                            $.ajax({
                                url: "@(EBS.Common.Config.VirtualDirName)/TrafficParameter/GetVolDatas/",
                                type: "POST",
                                data: { "land": land, "cam": cam, "direction": direction, "limit": limitTime},
                                async: false,
                                success: function (data) {
                                    if (data != "-1") {
                                        var Anarray = data.split('|');
                                        TimeData = eval('(' + Anarray[0] + ')');
                                        Datas = eval('(' + Anarray[1] + ')');
                                        limitTime = Anarray[2];
                                    } 
                                }
                            });
                            for (i = 0; i < Datas.length; i++) {
                                var times = new Date();
                                var timess = parseInt(TimeData[i]);
                                times.setTime(timess);
                                var x = times.getTime(), 
                                y = Datas[i];
                                series.addPoint([x, y], true, false);
                                activeLastPointToolip(chart);
                                CollectGarbage();
                            }
                        }, 60000);//一分钟更新一次,从数据库拿值
                    }
                }
            },
            title: {
                text: '车道流量:辆',
            },
           
            xAxis: {
                title: {
                    text: '(时间:h)'
                },
                type: 'datetime',
                tickPixelInterval: 50,
                labels: {
                    formatter: function () {
                        var vDate = new Date(this.value);
                        return vDate.getHours() + ":" + vDate.getMinutes() + ":" + vDate.getSeconds();
                    }
                }
            },
            yAxis: {
                title: {
                    text: '车道流量:辆'
                },
                
            },
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    
                    color: '#C0504D',
                    marker: {
                        enabled: false,//是否在实时图上一直显示点 true显示,false不显示
                    },
                    borderWidth: 0,
                    dataLabels: {
                        enabled: false,//是否在实时图上显示y轴数据
                        format: '{point.y:.0f}'
                    }
                }
            },
            tooltip: {
                formatter: function () {
                    
                    return "<b>名称:" + this.series.name + "</b><br/>" +
                        "<b>日期:" + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '</b><br/>' +
                        "<b>数量:" + Highcharts.numberFormat(this.y, 0) + "辆</b>";
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: '车道流量',
                data: (function () {
                    var data = [];
                    var TimeData = "";
                    var Datas = "";
                    $.ajax({
                        url: "@(EBS.Common.Config.VirtualDirName)/TrafficParameter/GetVolDatas/",
                        type: "POST",
                        data: { "land": land, "cam": cam, "direction": direction, "limit": limitTime},
                        async: false,
                        success: function (data) {
                            if (data != "-1") {
                                var Anarray = data.split('|');
                                TimeData = eval('(' + Anarray[0] + ')');
                                Datas = eval('(' + Anarray[1] + ')');
                                limitTime = Anarray[2];
                                
                            }
                        }
                    });
                    if(Datas.length>0){
                        for (i = 0; i < Datas.length; i++) {
                            var times = new Date();
                            var timess = parseInt(TimeData[i]);
                            times.setTime(timess);
                            data.push([
                                times.getTime(),
                                Datas[i]
                            ]);
                        }
                    }                    
                    CollectGarbage();
                    return data;
                }())
            }]
        }, function (c) {
            activeLastPointToolip(c);
        });


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

stray-heart

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值