在Highcharts中加载多个大型数据集

Question

在Highcharts中加载多个大型数据集

javascriptmysqlhighchartsdata-visualization

8

在Highcharts中，有一些关于将大量数据集加载到Highcharts中的演示和文章。我们知道，如果数据过大，当今的浏览器都无法处理。参考这篇文章，它建议使用聚合和表格分离来将数据加载到HighCharts中，但我认为这种解决方案并不适合我的需求。

我使用mysql存储我的数据，并且有很多表。要在Highcharts上绘制的数据是基于时间序列的，这意味着数据每天只有一次。我需要使用几组这些数据的系列设置加载图表（根据标准），并且数据不能聚合到月度，因为它需要仅以每日模式显示。除此之外，我还必须将图表的第一个视图设置为All。

不聚合数据的原因是用户想要查看每天的变化。有时候会出现不规则的数据，聚合并不是最好的选择。要加载的数据来自1980年。

将这些数据加载到HighCharts中的最佳策略或技术是什么？

- Muhaimin

2

听起来对我来说是一个ajax动态加载的工作。 - Manuel Arwed Schmidt

是的，Ajax意味着异步。 - Muhaimin

3

回答他人的评论做得很好。 - Rob Schmuecker

2

你的数据中有多少个点，因为你需要意识到你的图表受大小（以像素为单位）的限制，所以当点的数量超过像素的数量时，我们就没有机会再打印更多了。最好的解决方案是使用延迟加载。 - Sebastian Bochan

2个回答

1

你尝试过加载每日数据吗？如果您有过去45年中每天的数据点，则只有16000个点。无论如何，我首先要确保加载所有内容对于highcharts来说是否太多，如果是，则考虑动态聚合脚本，其中缩放超过阈值（例如5年）会触发数据集到每周的聚合集。

这是我的潜在解决方案：

使用完整分辨率数据集、每周聚合集和可能的每月集加载图表。然后，在当前视图上设置一个点数事件监听器。当它达到一定的阈值时，重新绘制为聚合集。

您不会真正失去查看特定日期的重大事件的机会，因为聚合7天仍将显示足够显著的峰值。然后用户可以缩放并查看更详细的数据。45年的每日数据减少到几千个点。

- ZekeDroid

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paweł Fus · Accepted Answer

所以，您说您有35年的每日数据。对我来说，这是小于13,000个点。然后您有图表，例如600像素宽。这意味着您在1像素上有20个点。而您说聚合不好，因为用户需要看到真实数据。让我问一下，当一个像素中有20个点时，用户如何看到这些点？也许我变老了，但我无法清晰地看到这些点，只能看到一些“粗略的路径”。比较这些例子：http://jsfiddle.net/Fusher/4ytzuv7o/1/

在第二个示例中禁用数据分组：

dataGrouping: {
    enabled: false
}

当您在第一个示例中放大时，您将获得真实的数据。

如果您确实无法使用数据分组，那么另一种解决方案如何？禁用导航器和“全部”按钮，以便用户只能在指定范围内缩放，例如：http://jsfiddle.net/Fusher/4ytzuv7o/3/

$('#container').highcharts('StockChart', {
    rangeSelector: {
        inputEnabled: false,
        buttons: [{
            type: 'month',
            count: 1,
            text: '1m'
        }, {
            type: 'month',
            count: 3,
            text: '3m'
        }, {
            type: 'month',
            count: 6,
            text: '6m'
        }, {
            type: 'ytd',
            text: 'YTD'
        }, {
            type: 'year',
            count: 1,
            text: '1y'
        }],
        selected: 0
    },
    navigator: {
        enabled: false   
    },
    series: [{
        name: 'AAPL',
        data: data,
        dataGrouping: {
            enabled: false   
        }
    }]
});