javascript - 提高海图性能以处理大量数据

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

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'
        }],
    },

最佳答案

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

压缩数据:如果我理解正确，那么您有167年的数据，每年12个月。其中每个将是一个系列，总共> 2000个系列。我不确定这将创建一个可解释的图形，但也可能是我误解了数据的性质以及计划如何绘制数据。

使用Highcharts的boost.js模块:Highcharts通常将其图形呈现为SVG。我对boost.js模块的理解是，它使图表的某些部分呈现在HTML5 canvas元素上。对于大量数据点，HTML5 Canvas 比SVG快得多。在此处查看经验比较:SVG vs canvas: how to choose

设置图表选项以最大程度地减少资源需求:我相信您正在经历的速度降低不太可能是由于数据处理所致。相反，我认为这几乎可以肯定是由于Highcharts所需的渲染时间以及监视所有图表元素上的事件所需的浏览器资源。例如，默认情况下，Highcharts图允许您将鼠标“悬停”在数据点上以突出显示它们，并且它们显示带有有关数据点信息的工具提示。如果您有一个包含数千个数据点的图，则这需要您的浏览器处理图表对象上的数千个鼠标事件。关闭此图表功能应可提高性能。在下面的演示中，我关闭了使用鼠标的工具提示和数据点突出显示功能。我还关闭了图例，以提 Highcharts 的可见性。

您可以按块处理和更新数据:从长远来看，这实际上要比一次全部渲染块要花费更多的时间，因为每次添加新图表时，Highcharts必须重绘图表系列。但是，这可能会导致更好的用户体验，因为页面显示的响应速度更快。下面的演示使用了这种方法。它允许您设置每个块要处理的数据行数(linesPerChunk)，以及一个块完成处理之间以及要开始处理下一个块(timeBetweenChunks)之间的时间延迟。理想情况下，将timeBetweenChunks设置为Highcharts渲染和显示最后一个块所花费的时间，以便计算机在处理数据和渲染数据之间交替，而不会造成任何不必要的间隔。理想情况下，可以自适应地进行设置，以使其在计算机/用户/浏览器/等设备之间最佳。任何想法都将受到欢迎。因此，暂时将其设置为恒定100毫秒。如果有2000行数据，每块数据100行，块之间100 ms，则整个加载过程大约需要2 s。关键功能是plotMoreData()。在处理了一个块并将新系列添加到图表之后，它使用timeBetweenChunks延迟了window.setTimeout(plotMoreData, timeBetweenChunks)来调用自身。然后重新绘制图表。下次调用plotMoreData时，它将处理下一个块，依此类推。处理并显示所有数据时，它会停止，并会更新状态消息。

编辑:
似乎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