谷歌图表来自php数组的连续x轴

Posted 2023-02-24

【中文标题】谷歌图表来自php数组的连续x轴

【英文标题】：Google charts continuous x-axis from php array

【发布时间】：2016-05-10 11:28:39

【问题描述】：

我使用一些代码可以很好地从 mysql 表中的数据生成带有谨慎 x 轴的谷歌折线图。但是，当我将列类型更改为“日期”以使 x 轴连续时，我不断收到错误消息：

a.getTime 不是函数

这里是从 mysql 生成数组的代码。

    <?php
include("connect.php");
$qry = " mysql query here";
$result = mysqli_query($con,$qry);
mysqli_close($con);

$table = array();
$table['cols'] = array(

array('id' => '', 'label' => 'Date', 'type' => 'date'),
array('id' => '', 'label' => 'Amount ', 'type' => 'number'),
); 
$rows = array();
foreach($result as $row)
$temp = array();

$date1 = date_create_from_format('Y-m-d H:i:s', $row['Date']);
$date2 = date_format($date1, 'd-m-Y');
$temp[] = array('v' => (string) $date2);
$temp[] = array('v' => (float) $row['Amount']);
$rows[] = array('c' => $temp);


$result->free();
$table['rows'] = $rows;
$jsonTable = json_encode($table, true);
echo $jsonTable;
?>

我尝试了各种方法，如日期格式等，但如果 cloumn 1 类型是“日期”，仍然会出现相同的错误。任何帮助将不胜感激。

编辑： 仍然有这个问题。我无法理解它。以下是即时得到的数组输出。希望这有助于指出我出错的地方。

编辑 2： 我现在的数组如下所示，但仍然有相同的 a.getTime 错误。

"cols":[
"label":"Reading Date","type":"date",
"label":"Cl Reading(mg\/l) ","type":"number",
"rows":[
"c":["v":"new Date(04\/10\/2015)","v":0.4],
"c":["v":"new Date(04\/11\/2015)","v":0.45],
"c":["v":"new Date(04\/12\/2015)","v":0.9],
"c":["v":"new Date(04\/01\/2016)","v":0.5],
"c":["v":"new Date(04\/02\/2016)","v":0.43],
"c":["v":"new Date(18\/02\/2016)","v":0.6]]

【参考方案1】：

由于第一列中的值需要是实际的date 值，因此引发错误。

尝试替换...

"c":["v":"04-10-2015","v":0.4]

随着……

"c":["v":new Date("10/04/2015"),"v":0.4]

使用...

$date1 = date_create_from_format('Y-m-d H:i:s', $row['Date']);
$date2 = "new Date(\"".date("m",$date1)."/".date("d",$date1)."/".date("Y",$date1)."\")";
$temp[] = array('v' => (string) $date2);

google.charts.load('current', 
  packages: ['corechart'],
  callback: drawChart
);

function drawChart() 
  var json = 
    "cols":[
      "label":"Reading Date","type":"date",
      "label":"Cl Reading(mg\/l) ","type":"number"
    ],
    "rows":[
      "c":["v":new Date("10/04/2015"),"v":0.4],
      "c":["v":new Date("11/04/2015"),"v":0.45],
      "c":["v":new Date("12/04/2015"),"v":0.9],
      "c":["v":new Date("01/04/2016"),"v":0.5],
      "c":["v":new Date("02/04/2016"),"v":0.43],
      "c":["v":new Date("02/18/2016"),"v":0.6]
    ]
  

  var data = new google.visualization.DataTable(json);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, );

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

【讨论】：

您好，感谢您的回复，仍然有问题。我已经编辑了我原来的问题，以显示我从上面的代码中得到的数组。

谢谢，但仍然遇到同样的错误。如你所说，我已经更新了数组输出。

太棒了，你的例子也对我有用。只剩下一件小事了。我需要改变什么 >$temp[] = array('v' => (string) $date2);让它以这种方式输出？

【参考方案2】：

感谢 WhiteHat 的所有帮助，这是可行的解决方案：

<?php

include("connect.php");
$qry = " mysql query here";
$result = mysqli_query($con,$qry);
mysqli_close($con);


    $table = array(
    'cols' => array(
        array('id' => '', 'label' => 'Date', 'type' => 'date'),
        array('id' => '', 'label' => 'Amount ', 'type' => 'number'),

    ),
    'rows' => array(),
);
foreach($result as $row)
    $date1 = date_create_from_format('Y-m-d H:i:s', $row['Date']);
    $date2 = date_format($date1, 'Y, m, d'); 
    $table['rows'][] = array(
        'c' => array(
            array('v' => 'Date('.$date2.')'), 
            array('v' => (float) $row['Amount'])
        )
    );


$result->free();
$jsonTable = json_encode($table, true);
echo $jsonTable;

    ?>

【讨论】：

感谢@WhiteHat 和@user3726827。我以这种方式调整了 $date2 以使图表可见：$date2 = "Date(" . date_format($date1, 'Y, m, d') . ")";。根据 [groups.google.com/d/msg/google-visualization-api/DhqFqPJQQv0/… Date 对象在 JSON 字符串中无效。 Visualization API 使用自定义字符串格式来处理日期；您需要删除“new”关键字并将“Date(...)”用引号括起来："v":"Date(2013,10,10,01,46,0)","f":null。我无法解释为什么 Google Charts 没有在其文档中提供这些要点。