使用JQPlot绘制大型数据集

Question

我的应用程序需要绘制至少超过5k的数据点，并且大小几乎可以无限制。

情节如下：

X轴 - ＆gt;日期时间

Y轴 - ＆gt;温度

这是我目前的情节

    var plot1 = $.jqplot('chartdiv', dataArray, {
        title: 'Default Date Axis',
        axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer } },
        series: [{ lineWidth: 4, markerOptions: { style: 'square' } }],
        numberTicks: 10   
    });

数据数组在[＆＃39;日期＆＃39;，＆＃39;温度＆＃39;]格式中包含至少5k点。

问题在于它效率极低并且使浏览器冻结。我不需要它在字面上为每个数据点添加标签，可能只有几个。谁能给我一些关于如何优化这个的提示？

Answer 1

通过更改标记类型和删除阴影，可以获得更好的性能。我一直在我的情节中使用这些选项取得了相当不错的成功：

    seriesDefaults: {
        lineWidth: 1, shadow: false, 
        rendererOptions: { smooth: false },
        markerOptions: { show: true, shadow: false, size: 2 } 
    }

这是一个向jqplot添加50k点的示例：http://jsfiddle.net/xf8d36kc/

我们有一个项目，我们一直在相当快地绘制20-30k点。一旦我们开始走向大约100k点，它仍然可以快速显示，但缩放和与情节的交互开始有1-3秒的延迟时间，但仍然不会冻结浏览器。我们在从数据库中获取数据时遇到更多延迟，然后是jqplot的实际绘制时间。

我没有太多关注绘制远大于100k的集合，但之后您可能想要开始对数据服务器端进行分组以限制点数，然后在放大时展开它们以获取更多细节。

Answer 2

如果使用Primefaces 5，请执行以下操作：

<p:chart id="lineChart" type="line" model="#{managedBean.lineModel}" />
<h:outputScript>
    function chartExtender() {
    // this = chart widget instance        
    // this.cfg = options     
    this.cfg.seriesDefaults = {
        lineWidth: 2, shadow: false,
        rendererOptions: { varyBarColor: true, smooth: false },
        markerOptions: { show: true, shadow: false } 
      };
    }
</h:outputScript>

On Managedbean：

LineChartModel lineModel = new LineChartModel();
//...
lineModel.setExtender("chartExtender");
//...

大大改善了我的表现。

其他选项here。