javascript - 提高大量数据的 highcharts 性能

Question

我正在尝试获取大量数据。示例数据如下

1850/01   -0.845   -0.922   -0.748   -1.038   -0.652   -1.379   -0.311   -1.053   -0.636   -1.418   -0.272
1850/02   -0.043   -0.113    0.047   -0.244    0.159   -0.613    0.528   -0.260    0.177   -0.653    0.569
1850/03   -0.698   -0.794   -0.633   -0.891   -0.506   -1.123   -0.274   -0.910   -0.495   -1.174   -0.229
……….
2016/12    0.795    0.746    0.828    0.756    0.834    0.586    1.005    0.731    0.848    0.575    1.010
2017/01    1.025    0.977    1.067    0.983    1.068    0.786    1.265    0.963    1.084    0.778    1.271
2017/02    1.151    1.098    1.198    1.112    1.191    0.957    1.346    1.089    1.208    0.946    1.352

从 1850 年到 2017 年以及每个月。我正在处理这个数据集，以便像这样在 Highcharts 中使用它

$.each(lines, function(index, row) {
  var cells = row.split(','),
  series = {
    type: 'line',
    data:[]
  };

  $.each(cells, function(itemNo, item) {
    if (itemNo == 0) {
      series.name = item;
    } else {
      series.data.push(parseFloat(item));
    }
  });

  data.push(series);
});

我按以下方式使用它

chart = $('#container').highcharts({
  chart: {
    polar: true
  },
  series: data
});

这确实有效，但是它真的很慢。我怎样才能改进/增强它的性能，以便在不卡住浏览器的情况下快速加载 highcharts？

更新这是我的 xAxis

xAxis: {
        tickInterval: 1,
        min: 0,
        max: 12,
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    },

更新 2

yAxis: {
        min: -1,
        max: 2.2,
        endOnTick: false,
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 2,
            width: 1,
            label: {
                text: '2°C',
                align: 'right',
                y: 2
            },
            color: 'red'
        }, {
            value: 1.5,
            width: 1,
            label: {
                text: '1.5°C',
                align: 'right',
                y: 30
            },
            color: 'red'
        }],
    },

Answer 1

我认为这个问题需要结合其他人提出的解决方案。这些包括:

1. 压缩数据:如果我理解正确，那么你有 167 年的数据，每年 12 个月。每一个都将是一个系列，总共> 2000个系列。我不确定这会创建一个可解释的图表，但我也可能误解了您的数据的性质以及您打算如何绘制它。
2. 使用 Highcharts 的 boost.js 模块:Highcharts 通常将其图形呈现为 SVG。我对 boost.js 模块的理解是它会导致图表的某些部分呈现在 HTML5 canvas 元素上。对于大量数据点，HTML5 canvas 比 SVG 快得多。在此处查看经验比较:SVG vs canvas: how to choose
3. 设置图表选项以最大限度地减少资源需求:我相信您遇到的减速不太可能是由于您的数据处理造成的。相反，我认为这几乎肯定主要是由于 Highcharts 所需的渲染时间，以及监视所有图表元素上的事件所需的浏览器资源。例如，默认情况下，Highcharts 图允许您将鼠标“悬停”在数据点上以突出显示它们，并且它们会显示包含有关数据点信息的工具提示。如果您的图表包含数千个数据点，则这需要您的浏览器处理图表对象上的数千个鼠标事件。关闭此图表功能应该会提高性能。在下面的演示中，我使用鼠标关闭了工具提示和数据点突出显示。我还关闭了图例，以提 Highcharts 的可见性。
4. 您可以分块处理和更新数据:从长远来看，这实际上比一次渲染所有 block 要花费更多时间，因为 Highcharts 必须重新绘制每次添加新系列时的图表。但是，它可能会带来更好的用户体验，因为页面会显得更加灵敏。下面的演示使用了这种方法。它允许您设置每个 block 要处理的数据行数 (linesPerChunk) 以及一个 block 完成处理与您要开始处理下一个 block 之间的时间延迟 (timeBetweenChunks)。理想情况下，timeBetweenChunks 将设置为 Highcharts 渲染和显示最后一个 block 所花费的时间，以便计算机在处理数据和渲染数据之间交替，中间没有非生产性的间隙。理想情况下，可以自适应地设置它，以便它在计算机/用户/浏览器/等之间是最佳的，但我不确定如何做到这一点；欢迎任何想法。所以目前它只是设置为恒定的 100 毫秒。有 2000 行数据，每个数据 block 100 行， block 之间有 100 毫秒，整个事情应该需要 ~2 秒来加载。关键函数是 plotMoreData()。在处理一个 block 并将新系列添加到图表后，它使用 window.setTimeout(plotMoreData, timeBetweenChunks) 延迟 timeBetweenChunks 调用自身。然后它重新绘制图表。下次调用 plotMoreData 时，它会处理下一个 block ，依此类推。它在处理和显示所有数据时停止，还会更新状态消息。

编辑:似乎 Highcharts 提升模块不适用于极坐标图，这是一个已知问题。此处描述了修复:Polar Scatter Using Boost Module .我能够通过修改 boost.src.js(从 the Highcharts Github repository 构建，如下所示:

在第 1380 行，我替换了:

if (!settings.useGPUTranslations) {
    inst.skipTranslation = true;
    x = xAxis.toPixels(x, true);
    y = yAxis.toPixels(y, true);
}

与:

if (!settings.useGPUTranslations) {
    inst.skipTranslation = true;
    // Default (non-Polar) calculation
    if( !series.chart.polar ) {
        x = xAxis.toPixels(x, true);
        y = yAxis.toPixels(y, true);
    }
    // Handle Polar chart coordinate conversion
    else {
        var polarPoint = {
            plotX: xAxis.translate( x, 0, 0, 0, 1, series.options.pointPlacement, series.type === 'flags' ),
            plotY: yAxis.translate( y, 0, 1, 0, 1 )
        };

        series.toXY( polarPoint );
        x = Math.round( polarPoint.plotX );
        y = Math.round( polarPoint.plotY );
    }
}

这似乎奏效了。在此处查看演示:JSFiddle Polar Highcharts Boost Demo