大量数据实时可视化

Question

我正在构建一个仪表板，以JSON格式从MQTT接收大量数据（数据频率±4Hz）。我正在尝试将这些数据可视化，并且最初选择了Highcharts（http://www.highcharts.com/），但很快意识到浏览器无法简单地处理这些信息量。

我很想看到如此大量的数据，所以会欣赏有关如何处理这些数据的任何建议（目前arduino的帖子数据到给定的主题，我在服务器上收到它们，存储在mongo中并发送给浏览器要更新）。我的整个方法有可能是完全错误的，所以请引导我走上一条路！

Answer 1

您的问题很可能是Highcharts正在创建的SVG太大，浏览器无法及时处理。如果你有太多的数据点，你需要做两件事之一。

1. 切换到使用HTML5 Canvas而不是SVG的图表库

2. 使用最佳拟合或其他曲线插值来削减数据。

如果切换到基于Canvas的图表，您将失去SVG具有的一些很酷的功能，但每个数据点都会进入页面。我过去曾使用jqChart。但它不是免费的。

如果削减数据，并不是每个数据点都会进入页面，但SVG允许的优秀功能仍然存在。你仍然可以使用highcharts。

Answer 2

我认为您需要查看crossfilter（过滤lib），dc.js（d3和crossfilter的帮助库），它们可以很好地处理大量数据

Answer 3

使用Highcharts超过3年后，即使对于疑问用例，我也可以推荐它。如果您已经选择了Highcharts（与其他人进行比较）并投入了相当长的一段时间后，遵循建议使用其他图表库可能不是一个好的选择。如果你喜欢它，坚持下去。

为了解决这个有数千个数据点的边缘情况，团队宣布了boost.js module。

它起源于this issue on Github。讨论揭示了有关问题域的大量背景信息。它还展示了Highcharts团队在开展客户/社区驱动的开发方面的表现。

看起来你可以用Highcharts做到 - 如果你还想要的话。 ： - ）

最后但并非最不重要的是，我可以推荐Highcharts Cookbook from Packt

Answer 4

我使用grafana可视化我的时间序列数据。我不相信它现在支持mongodb。我使用Influxdb作为数据后端。