zingchart - x 轴上带有时间戳的静态图表

Question

我想创建一个从 MySQL 数据库中提取的值的静态图表。图表格式为(x 轴:dd/mm/yy hh:mm:ss(对应于 mysql 数据库的时间戳))，y 轴为 double 值。我能够从 MySql 数据库中成功检索这些值。我需要 ZingChart 帮助绘制它们

Answer 1

尼基塔。

一旦您从 MySQL 数据库中检索到您的值，您将需要将 MySQL 日期值转换为以毫秒为单位的 Unix 时间。我用 MySQL 日期值填充了一个 $date 数组，并遍历该数组，调用 strtotime 首先转换为 Unix 时间，然后乘以 1000 转换为毫秒。为了能够在循环内直接修改数组元素，我还在 $value 前面加上了引用赋值。

foreach ($date as &$value){
  $value = strtotime( $value ) * 1000;
}

现在 $date 数组中的值已经转换为正确的格式，是时候从 PHP 数组创建一个 JavaScript 数组了。这可以使用 join() 来完成:

var dateValues = [<?php echo join($date, ',') ?>];

结果数组如下所示:

var dateValues = [1356994800000,1357081200000,1357167600000, ... ];

要在 ZingChart 中使用此数组，请在 scale-x 对象中使用带有“values”的 dateValues 变量。要将 Unix 时间值转换回 ZingChart 中的日期，请添加“transform”对象，并将其设置为“type”:“date”。

"scale-x":{
  "values": dateValues,
  "transform":{
    "type":"date",
    "item":{
      "visible":false
    }
  }
},
...

这会处理比例。要在图表中获得其他值，您需要做几乎相同的事情。将 PHP 数组转换为 JavaScript 数组，并在图表 JSON 中使用数组变量。

使用 PHP $series 数组:

var seriesValues = [<?php echo join($series, ',') ?>];

在您的图表 JSON 中:

"series":[
  {
    "values":seriesValues
  }
]

我已将所有这些编译成一个 Github Gist为你。如果您有任何问题，请告诉我!