Question

我正在使用下面的代码添加该系列。现在我们谈论的是10~20个系列，UI在这样做时会冻结，而且变得越来越慢。这发生在PC浏览器中。我希望在平板电脑（kitkat）上的Android WebVIEW中使用这些图表。

如何提高性能？

            for (var x in currentSerie) {
                chart.addSeries({
                    name: currentSerie[x].Name,
                    data: currentSerie[x].Data,
                    lineWidth: currentSerie[x].lineWidth || 1,
                    color: currentSerie[x].color || '',
                    dataGrouping: {
                        approximation: "average",
                        enabled: false,
                        forced: true,
                        units: [['hour', [1]]]
                    },
                    marker: {
                        enabled: true,
                        radius: 1
                    },
                    tooltip: {
                        valueDecimals: 1,
                        valueSuffix: currentSerie[x].Unit || ''
                    },
                    shadow: false,
                }, false);

            }

            chart.redraw();

Answer 1

我有同样的问题，发现以下是罪魁祸首。

marker: {
    enabled: true,
    radius: 1
},

如果您删除强制启用标记并让图表确定何时显示标记，则性能会更好。

Answer 2

看起来你正在使用Highstock（因为dataGrouping），这是性能提升的明确点。您已将其设为enabled: false。将大量数据设置为true可能会有很大帮助。来自the datagrouping documentation：

数据分组用一个分组点替换一系列数据点...

分组已激活[if]图表中有许多数据点。除了提高性能外，还可以更轻松地发现图表中的趋势。

Highcharts图表的其他一些性能增益可以从the FAQ找到：

使用包含大量数据点的系列时，需要考虑一些事项。



对于线图，建议您禁用点标记，因为这会增加性能开销。请参阅http://highcharts.com/demo/line-time-series。



禁用阴影可提高性能，因为为包含阴影的每个形状创建了三个阴影元素。



对于大型系列列表，建议至少对基于VML的浏览器禁用初始动画plotOptions.column.animation。区分快速SVG浏览器和较慢的VML浏览器的最佳方法是使用Highcharts.svg布尔属性。

添加10个以上系列时，Highcharts性能会降低

2 个答案: