javascript 谷歌图表时间线，x 轴为日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22451276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google chart timeline with date in x axis
提问by user3270211
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 ?
处理谷歌折线图。我遇到的问题是图表上显示了一天的值，没有实现带有日期的时间表。我知道如果您从一周内获取价值，图表会很宽，有什么办法可以解决这个问题？我在想这样的事情？
How its looking right now:
它现在的样子：
Database: ( the date is saved as date in phpadmin)
数据库：（日期在phpadmin中保存为日期）
Code:
代码：
<?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>
回答by Anto Jurkovi?
You can get part of what you want using formatproperty of hAxis, for example:
您可以使用formatof 属性获得您想要的部分内容hAxis，例如：
hAxis: {
format: "HH:mm",
...
}
See line chart configuration optionsfor hAxis.format.
见线图表配置选项为hAxis.format。
Update:Example at jsbin
更新：jsbin 中的示例
