0

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

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

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

我看不出问题出在哪里，因为我没有做任何特别的事情，只是每隔 n 秒使用存储图表值的数组重新绘制图表。

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

你能给我一个关于可能发生的事情的线索吗？

提前致谢！

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);
4

1 回答 1

0

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

我可以建议您在绘图达到特定时间范围后从数据数组的开头开始移动。

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

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

于 2012-12-07T14:34:26.277 回答