jqPlot：如何实时更新图表答案

【问题标题】：jqPlot: how to live update a chartjqPlot：如何实时更新图表
【发布时间】：2012-05-05 06:52:55
【问题描述】：

我无法弄清楚自己或找到一个合适的例子来说明如何在 jqPlot 中以类似于此 highcharts example 中所示的方式执行实时更新。

【问题讨论】：

+1 我喜欢你想要达到的目标。你已经有一些代码了吗？可以分享到jsfiddle.net吗？
我在原始帖子中发布了一个关于 jsFiddle 的示例。
是的，我注意到了这个例子。虽然在我之前的评论中，我指的是你为jqPlot 编写的代码，所以我们可以从你对jqPlot 所做的工作开始。
stackoverflow.com/a/19471949 - 很好的测试答案:)

标签： jqplot

【解决方案1】：

基于this，我准备了如下例子：

$(document).ready(function() {
    var plot1 = $.jqplot('chart1', [new Array(1)], {
        title: 'Live Random Data',
        series: [
            {
            yaxis: 'y2axis',
            label: '',
            showMarker: false,
            fill: false,
            neighborThreshold: 3,
            lineWidth: 2.2,
            color: '#0571B6',
            fillAndStroke: true}
        ],
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                tickOptions: {
                    formatString: '%H:%M:%S'
                },
                numberTicks: 10
            },
            y2axis: {
                min: 100,
                max: 150,
                tickOptions: {
                    formatString: '%.2f'
                },
                numberTicks: 15
            }
        },
        cursor: {
            zoom: false,
            showTooltip: false,
            show: false
        },
        highlighter: {
            useAxesFormatters: false,
            showMarker: false,
            show: false
        },
        grid: {
            gridLineColor: '#333333',
            background: 'transparent',
            borderWidth: 3
        }
    });

    var myData = [];
    var x = (new Date()).getTime() - 101000;
    var y;
    var i;
    for ( i = 0; i < 100; i++) {
        x += 1000;
        y = Math.floor(Math.random() * 100);
        myData.push([x, y]);
    }

    plot1.series[0].data = myData;
    plot1.resetAxesScale();
    plot1.axes.xaxis.numberTicks = 10;
    plot1.axes.y2axis.numberTicks = 15;
    plot1.replot();

    function updateSeries() {
        myData.splice(0, 1);
        x = (new Date()).getTime();
        y = Math.floor(Math.random() * 100);
        myData.push([x, y]);

        plot1.series[0].data = myData;
        plot1.resetAxesScale();
        plot1.axes.xaxis.numberTicks = 10;
        plot1.axes.y2axis.numberTicks = 15;
        plot1.replot();
    }

    window.setInterval(updateSeries, 1000);
});

See this jsfiddle to test it out.

【讨论】：

@uesports135 我刚试了一下，效果很好，请问可以再试一次吗？

【解决方案2】：

我在 JSFiddle jsfiddle.net/meccanismocomplesso/QAr4r/ 上添加了一个示例，它重现了您链接的示例。

我已尝试使主题尽可能笼统。如果您需要更多解释阅读this article 了解这一点。

var plot1 = $.jqplot('myChart', [data], options);
...
plot1.series[0].data = data; // update the graph

【讨论】：

【解决方案3】：

var plot1;

function updatePlot(data){
plot1 = $.jqplot('myChart', [data], options);
}


function reDrawPlot(data){`
updatePlot(data);
plot1.replot();
}

....
initialize plot
plot1 = $.jqplot('myChart', [data], options);
....


call function reDrawPlot with the new data as a parameter

【讨论】：