Question

对于项目，我需要使用jqPlot实现实时更新图表。

请参阅以下jsFiddle：http://jsfiddle.net/fracu/HrZcj/242/ （为简单起见，值是随机生成的）

我成功地完成了这项工作，但我遇到了性能问题：在图表运行几分钟后，浏览器开始变慢，直到关闭图表标签的那一刻。（使用Firefox和Chrome测试）

我无法看到问题所在，因为我没有做任何特别的事情，只需每隔n秒用一个存储图表值的数组重新绘制图表。

我遇到的另一个问题是，当我调整x轴的大小时，“ticks”位于图表的左侧，并且它们不会沿轴线均匀分布。

你能否告诉我一些可能发生的事情？

提前致谢！

使用Javascript：

    var plot1 = $.jqplot('chart1', [new Array(1)], {
        series: [{yaxis:'y2axis',showMarker:true,fill:false,neighborThreshold:3,rendererOptions:{smooth:true}}],
        axes: {
            xaxis: {renderer: $.jqplot.DateAxisRenderer,tickOptions:{formatString:'%H:%M:%S'}},
            y2axis:{tickOptions:{formatString:'%.2f'}}
        },
    });

    var myData = [], x, y, samples = 0, secsBuffer = 60, refreshInterval = 1, sampleWindow = secsBuffer / refreshInterval;

    $("#refreshInterval").change(function () {
        clearInterval(cInt);
        cInt = window.setInterval(updateSeries, $("#refreshInterval").val() * 1000);
        refreshInterval = $("#refreshInterval").val();
        sampleWindow = secsBuffer / refreshInterval;
    });

    $("#secsBuffer").change(function () {
        secsBuffer = $("#secsBuffer").val();
        sampleWindow = secsBuffer / refreshInterval;
    });

    function updateSeries() {
        if (samples > sampleWindow) {
            var diff = samples - sampleWindow;
            myData.splice(0, diff);
            samples -= diff;
        }
        x = (new Date()).getTime();
        y = Math.floor(Math.random() * 100);
        myData.push([x, y]);

        plot1.resetAxesScale();
        plot1.axes.xaxis.numberTicks = 15;
        plot1.axes.y2axis.numberTicks = 15;
        plot1.axes.xaxis.min = x - (secsBuffer * 1000);
        plot1.axes.xaxis.max = x;
        plot1.series[0].data = myData;
        plot1.replot();
        samples++;
    }
    cInt = window.setInterval(updateSeries, refreshInterval * 1000);

Answer 1

我认为这是因为绘图涉及一些处理，而更多的数据意味着更多的处理，这就是为什么它会在一段时间后减慢浏览器的速度。

我可以建议你在绘图到达某个时间范围后从数据数组的开头开始移位。

if(time limit has reached) myData.shift();

这可能不是最好的解决方案。但是你仍然可以在绘图上查看最后10分钟（或者你决定开始修剪数组的任何时间段）的数据，而不会崩溃浏览器。

使用jqPlot的实时图表：性能问题

1 个答案: