Highcharts动态刷新图表

/**
 * 加载动态刷新图表
 * 
 * @param id
 *            图表所在div的id
 * @param title
 *            图表标题文字
 * @param yTitle
 *            图表y轴显示的文字
 * @param seriesName
 *            鼠标悬停到图表中的点时显示的名称
 * @param value
 *            图表动态取的值
 * @param switch
 *            图表加载开关 
 * 
 */
function loadHighcharts(id, title, yTitle, seriesName, value, switch) {
    Highcharts.setOptions({
        global : {
            useUTC : false
        }
    });
    var chart;
    $('#' + id).highcharts(
            {
                chart : {
                    type : 'spline',
                    animation : Highcharts.svg,
                    marginRight : 20,
                    events : {
                        // 加载完成后开始绘制接下来的点
                        load : function() {
                            var series = this.series[0];
                            setInterval(function() {
                                if (switch) { // 如果动态刷新开关打开
                                    refreshInfo(); // 请求指定action刷新信息
                                    if ($("#flag").val() == 1) {
                                        var timestr = $("#time").val().toString(); // 取得时间的字符串
                                        var x = timestr * 1; // 将字符串转换为数字
                                        var y = value;
                                        series.addPoint([ x, y ], true, true); // 添加点
                                    }
                                }
                            }, 1000);
                        }
                    }
                },
                title : {
                    color: '#FF00FF',
                    text : title,
                    float : false
                },
                xAxis : {
                    type : 'datetime',
                    tickPixelInterval : 150
                },
                yAxis : {
                    floor : 0,
                    ceiling : 100,
                    tickPositions : [ 0, 25, 50, 75, 100 ],
                    title : {
                        text : yTitle
                    },
                    plotLines : [ {
                        value : 0,
                        width : 1,
                        color : '#808080'
                    } ]
                },
                tooltip : {
                    formatter : function() { // 加载鼠标悬停在点上时显示的内容
                        return '<b>'
                                + this.series.name
                                + '</b><br/>'
                                + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>'
                                + Highcharts.numberFormat(this.y, 10);
                    }
                },
                legend : {
                    enabled : false
                },
                exporting : {
                    enabled : false
                },
                series : [ {
                    name : seriesName,
                    data : (function() { // 取得所要显示的时间,往前显示20个点
                        var data = [], time = $("#time").val().toString(), i;
                        time = time * 1;
                        for (i = -19; i <= 0; i++) {
                            data.push({
                                x : time + i * 2000,
                                y : 0
                            });
                        }
                        return data;
                    })()
                } ]
            });
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值