可视化日期特定的数据与折线图在浏览器与javascript

Visualize date specific data with a line chart in browser with javascript

本文关键字：折线图 浏览器 javascript 数据 日期 可视化      更新时间：2023-09-26

我想用折线图在浏览器中可视化一些数据。x轴是日期，y轴是数值。

我知道有一些javascript绘图解决方案在那里。尤其是对于特定日期的数据很难找到合适的解决方案。

这是方案，我是如何获得数据的:

[
   [
      startTimestamp,
      endTimestamp,
      value
   ],
   [
      startTimestamp,
      endTimestamp,
      value
   ]
]

这里有一些示例值:

[
   [
      1365163327,
      1365163339,
      0
   ],
   [
      1365163339,
      1365163360,
      1
   ]
]

请参阅js-fiddle，这里有一些更好的示例数据:

http://jsfiddle.net/JWhmQ/1992/

我个人比较喜欢Google Chart API。它们有很好的日期格式支持:参见图表API日期格式文档。这个API的好处是，一旦你有了一个JavaScript日期格式，谷歌图表API就知道如何排序，还可以根据本地化/格式偏好改变日期格式。

唯一需要添加到源JSON的是将时间戳转换为日期对象。在PHP中，我将为date对象的每个部分执行date('Y'， $timestamp)等操作。日期对象格式参见W3 Schools

看一下这个流-例如，它可以提供unix时间戳:

http://www.flotcharts.org/flot/examples/visitors/index.html

相关文章：