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

Question

我想创建一个从 MySQL 数据库中提取的值的静态图表。图表格式为（x 轴：dd/mm/yy hh:mm:ss（对应于 mysql 数据库的时间戳）），y 轴为双精度值。我能够从 MySql 中成功检索到这些值 database.I 希望 ZingChart 帮助绘制它们

Answer 1

查看我们的demos repo on GitHub. We have a tutorial specifically about connecting to a MySQL database with PHP。

我们的网站上也有 step-by-step walkthrough。

如果您分享 JSON 或更多详细信息，我可以帮助您整理图表。

我在 ZingChart 团队。如果您还有其他问题，请告诉我。

Answer 2

尼基塔。

从 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 $系列数组：

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

在你的图表中JSON：

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

我已将所有这些内容编译成 Github Gist 供您使用。如果您有任何问题，请告诉我！

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

Static chart with timestamp on x-axis

zingchart