谷歌图表错误的数据排序

时间:2018-10-26 05:34:31

标签: php charts google-visualization

我想按日期对数据进行排序,但是由于某种原因,数据排序不正确,例如

['Sep 28',2],
['Sep 27',2],
['Oct 02',1],
['Oct 01',1],
['Sep 28',1],
['Sep 27',4],
['Sep 26',2],

因此它不是按日期排序的。

我已经使用php从databse获取数据

foreach ($array as $row){
    echo "['".date('M d', strtotime($row['date']))."',".$row['views']."],";
}

数据正确排序,下面是图表示例,您可以看到问题

https://codepen.io/anon/pen/bmzGdb

2 个答案:

答案 0 :(得分:0)

数据在javascript中生成了一个字符串,因此它的排序方式类似于字符串。
而是在javascript中使用实际日期。
像...

foreach ($array as $row){
    echo "[new Date(".strtotime($row['date'])." * 1000),".$row['views']."],";
}

然后您可以使用选项...

设置轴的日期格式。
hAxis: {
  format: 'MMM dd'
}

更新

由于格式不包含时间,因此x轴可能会重复标签。
为防止这种情况,请使用自定义刻度线。

hAxis: {
  format: 'MMM dd',
  ticks: data.getDistinctValues(0)
}

其中data是Google数据表...

更新2

壁虱的另一种选择是根据图表的日期范围构建自己的刻度...

var oneDay = (1000 * 60 * 60 * 24);
var hAxisTicks = [];
var dateRange = data.getColumnRange(0);
for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
  hAxisTicks.push(new Date(i));
}

hAxis: {
  format: 'MMM dd',
  ticks: hAxisTicks
}

答案 1 :(得分:0)

我找到了解决方案,如果有人遇到同样的问题,那就是解决方案。 首先,您需要从数据库中查找第一天和最后一天,例如MIN(date) MAX(date),然后...

$date_from = $rows['date_from'];
$date_from = strtotime($date_from);
$date_to  = $rows['date_to'];
$date_to = strtotime($date_to);

for ($i=$date_from; $i<=$date_to; $i+=86400)
{
  $vl = 0;
  $dt = date("Y-m-d", $i);
  foreach ($array as $row)
  {
    if ( $row["date"] == $dt)
    {
      $dt = $row["date"];
      $vl = $row["views"];
    }
  }
 echo "[new Date(".strtotime($dt)." * 1000),".$vl."],\n";
}

此示例与上面的@WhiteHat答案一起使用

enter image description here