我遇到了一些我现在已经工作了几天的问题,我真的无法解决这个问题。问题是我正在制作一个折线图,其中显示的是PH,氯和温度值,其中包含日期和时间。我不认为我已经将jsoncode格式化为正确,如下所示:https://developers.google.com/chart/interactive/docs/reference#dataparam
当我回显我的jsoncode时,它看起来像这样:
{"cols":[{"label":"Time","type":"date"},{"label":"Date","type":"date"}, {"label":"PH","type":"number"},{"label":"temperature","type":"number"}, {"label":"Chlorine","type":"number"}],"rows":[{"c":[{"v":"Date(2014, 2, 17, 15, 03, 14)"}, {"v":"7.00"},{"v":"34.00"},{"v":"3.40"}]}]}
我的数据库看起来像这样:
代码:
<?php
$con=mysql_connect("localhost","root","") or die("Failed to connect with database!!!!");
mysql_select_db("chart", $con);
$sth = mysql_query("SELECT * FROM googlechart");
$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(
array('label' => 'Time', 'type' => 'date'),
array('label' => 'Date', 'type' => 'date'),
array('label' => 'PH', 'type' => 'number'),
array('label' => 'temperature','type' => 'number'),
array('label' => 'Chlorine','type' => 'number'),
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
// assumes dates are in the format "yyyy-MM-dd"
$dateString = $r['Date'];
$dateArray = explode('-', $dateString);
$year = $dateArray[0];
$month = $dateArray[1] - 1; // subtract 1 to convert to javascript's 0-indexed months
$day = $dateArray[2];
// assumes time is in the format "hh:mm:ss"
$timeString = $r['Time'];
$timeArray = explode(':', $timeString);
$hours = $timeArray[0];
$minutes = $timeArray[1];
$seconds = $timeArray[2];
echo $dateString."<br>";
echo $timeString."<br>";
$temp = array();
$temp[] = array('v' => "Date($year, $month, $day, $hours, $minutes, $seconds)");
$temp[] = array('v' => (string) $r['PH']);
$temp[] = array('v' => (string) $r['temperature']);
$temp[] = array('v' => (string) $r['Chlorine']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
?>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
/*width: 900, height: 900, */
title: 'Visualization',
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 12,
vAxis: {title: "Values", titleTextStyle: {italic: false}},
hAxis: {title: "Time", titleTextStyle: {italic: false}},
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'vertical'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
答案 0 :(得分:1)
问题是因为Google Chart API想要一个JavaScript Date对象。你给图表的是一个字符串对象,尽管它的值似乎是Date()。
您需要在没有引号的情况下分配该属性,因为它需要Date对象,所以它是这样的:
"v": new Date("2014-02-17 15:03:14")
答案 1 :(得分:0)
$temp[] = array('v' => "Date($year, $month, $day, $hours, $minutes, $seconds)");
如下所示:
$temp[] = array('v' => 'Date('.date('Y',strtotime($r['Date'])).','.(date('n',strtotime($r['Date'])) - 1).','.date('d',strtotime($r['Date'])).','.date('H',strtotime($r['Time'])).','.date('i',strtotime($r['Time'])).','.date('s',strtotime($r['Time'])).')');