彩票走势图

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

翻译|使用教程|编辑:王香|2019-01-14 10:14:39.000|阅读 463 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

HighChart

下载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。

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

HighChart

结论

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

购买TeeChart Pro AciveX正版授权,请点击“”哟!


标签:图表图表控件highcharts

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP