Google图表时间轴，日期为x轴 [英] Google chart timeline with date in x axis
本文介绍了Google图表时间轴，日期为x轴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用谷歌线图。我所遇到的问题是，图表显示有一天的价值，没有实施时间表与日期。我明白，如果你从一个星期获得价值，那么这个图表会很广泛，有没有办法解决？我在想这样的事情？
Working on a google line chart. The problem I have came into is that the chart on shows values of one day, have not implemented timeline with dates. I understand that the chart will be wide if your getting values from for example one week, is there any way to solve that ? I was thinking of something like this ?
现在如何看待：
数据库：（日期在phpadmin中保存为日期）
Database: ( the date is saved as date in phpadmin)
代码：
<?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(
// Labels for your chart, these represent the column titles
// Note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for column title
array('label' => 'Time', 'type' => 'number'),
array('label' => 'PH', 'type' => 'number'),
array('label' => 'temperature','type' => 'number'),
array('label' => 'Chlorine','type' => 'number'),
);
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
$temp = array();
$temp[] = array('v' => (string) $r['Time']);
$temp[] = array('v' => (string) $r['PH']);
$temp[] = array('v' => (string) $r['temperature']);
$temp[] = array('v' => (string) $r['Chlorine']);
$temp[] = array('v' => (int) $r['Time']);
$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: 10,
vAxis: {title: "Values", titleTextStyle: {italic: false}},
hAxis: {title: "Time", titleTextStyle: {italic: false}},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
推荐答案
您可以使用格式属性 hAxis ，例如：
You can get part of what you want using format property of hAxis, for example:
hAxis: {
format: "HH:mm",
...
}
请参阅折线图配置选项 for hAxis.format 。
See line chart configuration options for hAxis.format.
更新： 在jsbin 上的示例
这篇关于Google图表时间轴，日期为x轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
