谷歌图表时间轴，x轴为日期答案

【问题标题】：Google chart timeline with date in x axis谷歌图表时间轴，x轴为日期
【发布时间】：2014-04-22 11:25:15
【问题描述】：

在谷歌折线图上工作。我遇到的问题是图表上显示了一天的值，没有实现带有日期的时间表。我知道如果您从一周内获得价值，图表会很宽，有什么办法可以解决这个问题吗？我在想这样的事情吗？

它现在的样子：

数据库：（日期在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>

【问题讨论】：

标签： javascript php mysql date google-visualization

【解决方案1】：

您可以使用hAxis 的format 属性获取您想要的部分内容，例如：

hAxis: {
    format: "HH:mm",
    ...
}

hAxis.format 见折线图configuration options。

更新： Example at jsbin

【讨论】：

您正在使用 timedate，这可以使用 date 和 time 吗？（两个不同的列）
如果要将数据和时间都用于轴值，则必须将它们合并到一列中。您可以在从数据库中提取数据时执行此操作，也可以通过 javascript 中的 DataView 执行此操作。