在 Highcharts 中通过循环添加系列的性能问题

Question

我必须使用 Highcharts 从 api 中获取数据来创建散点图。 api 是使用 Django Rest Framework 在 Python 中编写的，return 从 Pandas Dataframe 开始的数据将被转换为列表并作为 JSON 传递.

我有一个名为 data 的主数据框，它有 3 列，结构如下：

| speed                | acc                 | id    |
| 0.09588048242649731  | 0.16578595340251923 | 185.0 |
| 1.8956370379738738   | 1.2269583940505981  | 192.0 |
| 0.12784064323532973  | 0.2449648529291153  | 185.0 |
...

我将这个数据帧分成 N 个小数据帧，按列 ID 对行进行分组，我 return 列表中的 N 个小数据帧。所以 python 中的 api 视图是这个：

    @action(detail=True, methods=['get'])
    def chart_points(self, request, pk):
        instance = MyObject.objects.get(pk=pk)
        data = instance.data
        data_list = {
            "data_list": [v.values.tolist() for k, v in data.groupby('id')]
        }
        return Response(data_list)

当我调用它时，它给我这样的响应：

{ "data_list": [
            [
                [
                    0.09588048242649731,
                    0.16578595340251923,
                    185.0
                ],
                [
                    0.12784064323532973,
                    0.2449648529291153,
                    185.0
                ],
                [
                    0.14382072363974596,
                    0.14911147952079773,
                    185.0
                ],
                ...
             ],
             [
                [
                    1.8956370379738738,
                    0.18043938279151917,
                    192.0
                ],
                [
                    1.8976345480244257,
                    1.2269583940505981,
                    192.0
                ],
                [
                    1.8986333030497016,
                    0.2929287254810333,
                    192.0
                ],
                ...
             ],
             ...
}

我正在将 Backbonejs 用于应用程序的客户端，并且我有一个调用前一个端点并保存响应数据的模型。

数据的检索速度相对较快（大约需要 10 秒，这与我手动调用 api 时等待的时间相同）。

在此期间，我在页面上创建了空图表并等待 api 响应。当我检索数据时，我遍历它们并以这种方式将每个系列添加到图表中：

var data_list = this.model.get('data_list');
for( let i = 0; i < data_list.length; i++ ) {
    this.chart.addSeries({
        type: 'scatter',
        name: `Element number ${data_list[i][0][2]}`,
        data: data_list[i],
    });
}

其中 this.chart 是我要填充所有 N 系列的 Highcharts 图表。

问题是这个最后的过程很慢（它需要越来越多的分钟，而且还冻结了页面）。

我注意到，如果我将相同系列添加到图表 N 次（也是具有最大长度的系列），则花费的时间要少得多。例如这样：

var data_list = this.model.get('data_list');
for( let i = 0; i < data_list.length; i++ ) {
    this.chart.addSeries({
        type: 'scatter',
        name: `Element number ${data_list[0][0][2]}`,
        data: data_list[0],
    });
}

我可以做些什么来提高性能吗？

Answer 1

图表在每次迭代后重新绘制，您可以通过将 addSeries 方法调用中的 redraw 参数设置为 false 并在循环后调用 redraw 来防止这种情况.

for( let i = 0; i < data_list.length; i++ ) {
  this.chart.addSeries({
    name: ...,
    data: ...,
  }, false);
}

chart.redraw();

现场演示： http://jsfiddle.net/yqo8hrbn/

API参考：

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

https://api.highcharts.com/class-reference/Highcharts.Chart#redraw

在 Highcharts 中通过循环添加系列的性能问题

Performance issue adding series through loop in Highcharts

python

api

highcharts

backbone.js

pandas