使用Highcharts和InfluxDB可视化时间序列数据

下载Highcharts最新版本

实时绘制大量带时间戳的数据往往是一项棘手的任务，需要相当多的技巧和过多的耐心。幸运的是，我们已经有了InfluxData平台来为我们提供开箱即用的许多困难。我们可以高效，安全地收集和存储数据，构建可视化，甚至设置警报。

本教程提供了一个简短的指南，通过Highcharts图表库可视化来自InfluxDB（专用时间序列数据存储）的时间序列数据。

如您所见，这里发生了一些不同的事情。Highcharts库附带方法chart（），它接受两个参数：用于呈现图表的目标元素和一个options对象，您可以在其中指定各种属性，如样式，标题，图例，系列，类型，plotOptions和等等。 让我们来看看每个选项：

• colors：[array] - colors属性接受十六进制代码数组，这些代码表示图表的默认颜色方案。如果所有颜色都用完了，那么所需的任何新颜色都会导致阵列再次循环。

• chart：{object} - chart属性接受具有各种附加属性的对象，包括type，zoomtype，animation，events，description和许多样式属性。在这种情况下，我给出了背景线性渐变，并将类型指定为样条曲线。

• title：{object} - 这表示图表的主标题，并且可以另外给出一个样式对象来使某些事情变得更好。

• xAxis：{object} - 在这种情况下，因为我正在使用时间序列数据，我知道x轴总是时间所以我可以将类型指定为'datetime'，并且比例将自动调整到适当的时间单位。但是，这里还有许多其他选项，包括样式，标签，自定义刻度位置，对数或线性类型。

• yAxis：{object} - 与xAxis属性类似，y轴采用一个对象，并且可以访问许多选项来自定义图表y轴的设计和样式。在这种情况下，我只指定了y轴标题，并推迟到Highcharts自动刻度位置。

• plotOptions：{object} - plotOptions属性是每个系列类型的配置对象的包装器对象。还可以为系列数组中给出的单个系列项覆盖每个系列的配置对象。在这里，我使用了plotOptions.series属性来覆盖默认的turboThreshold 1000并将其更改为2000.这允许绘制更多数据点（超过默认值1000）。根据文档，系列的conf选项可以在三个不同的级别访问。如果要定位图表中的所有系列，可以使用plotOptions.series对象。对于特定类型的系列，您将访问该类型的plotOptions。例如，要将图表类型为“line”的plotOptions定位，您将访问plotOptions.line对象。最后，

• series：[array]或{object} - 这是您传递数据的地方。您还可以定义要传入的数据的类型，为其命名，并为其定义其他plotOptions。

结果显示在下面的图表中：

结论

时间序列数据可以通过许多不同的方式可视化，以使可能性无穷无尽。这篇文章只展示了时间序列数据可视化的一个例子。