提高海图性能以处理大量数据 [英] Improve highcharts performance for large amounts of data

问题描述

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

I am trying to get a larger amount of data. Sample data is below

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中使用它

which starts from 1850 until 2017 and every month. I am processing this dataset to use it in Highcharts like this

$.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?

This does work however, it is really really slow. How can I improve/enhance its performance so that I the highcharts gets loaded quickly without freezing the browser?

更新 这是我的xAxis

UPDATE Here is my 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'
        }],
    },

推荐答案

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

I think this problem will require a combination of the solutions proposed by others. These include:

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

1. Condensing the data: If I understand correctly, then you have 167 years of data and 12 months per year. Each of these will be a series, for a total of >2000 series. I'm not sure this will create an interpretable graph, but it's also likely I misunderstand the nature of your data and how you plan to plot it.
2. Using the boost.js module of Highcharts: Highcharts normally renders its graphs as SVGs. My understanding of the boost.js module is that it causes some parts of the charts to be rendered on HTML5 canvas elements. The HTML5 canvas is much faster than SVG for large numbers of data points. See an empirical comparison here: SVG vs canvas: how to choose
3. Setting chart options to minimize resource requirements: I believe that the slowdown you're experiencing is unlikely to be due to the processing of your data. Rather, I think it's almost certainly due primarily to the rendering time required by Highcharts, and browser resources required to monitor events on all of the chart elements. By default, for instance, Highcharts plots allow you to "hover" your mouse over data points to highlight them, and they display tooltips with information about the data point. If you have a plot with thousands of data points, then this requires your browser to handle thousands of mouse events over the chart objects. Turning off this chart features should improve performance. In the demo below, I've turned off tooltips and data point highlighting using the mouse. I've also turned off the legend, to improve visibility of the chart.
4. You can process and update the data in chunks: In the long run, this will actually take more time than if you were to render the chunk all in one go, because Highcharts has to redraw the chart each time you add a new series. However, it might lead to a better user experience, since the page will appear more responsive. The demo below utilizes this type of approach. It allows you to set the number of lines of data to process per chunk (linesPerChunk) and the time delay between one chunk finishes processing and when you want to begin processing the next chunk (timeBetweenChunks). Ideally, timeBetweenChunks would be set to the time it takes Highcharts to render and display the last chunk, so that the computer alternates between processing data and rendering data, with no unproductive gaps in between. Ideally one could set this adaptively so that it's optimal across computers/users/browsers/etc., but I'm not sure how to do this; any ideas would be welcome. So for the moment it's just set to a constant 100 ms. With 2000 lines of data, 100 lines per chunk of data, and 100 ms between chunks, the whole thing should take ~2 s to load. The key function is plotMoreData(). After processing a chunk and adding the new series to the chart, it calls itself with a delay of timeBetweenChunks using window.setTimeout(plotMoreData, timeBetweenChunks). It then redraws the chart. When plotMoreData gets called the next time, it processes the next chunk, and so on. It stops when it's processed and displayed all the data and also updates the status message.

似乎Highcharts提升模块不适用于极坐标图，这是一个已知问题.此处描述了一个解决方法:使用Boost模块进行极性分散.我可以通过修改boost.src.js(从 Highcharts Github存储库构建)来使此修复程序起作用.如下:

It seems the Highcharts boost module does not work with polar charts, and this is a known issue. A fix is described here: Polar Scatter Using Boost Module. I was able to get this fix to work by modifying boost.src.js (built from the Highcharts Github repository as follows:

在〜1380行，我替换了:

At ~line 1380, I replaced:

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演示

This seemed to work. See the demo here: JSFiddle Polar Highcharts Boost Demo

这篇关于提高海图性能以处理大量数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！