Question

使用谷歌折线图。我遇到的问题是图表显示一天的值，没有实现日期的时间表。我知道如果你从一周获得价值，那么图表会很宽，有什么方法可以解决这个问题吗？我在考虑这样的事情？

enter image description here

现在看起来如何：

enter image description here

数据库:(日期在phpadmin中保存为日期）

enter image description here

代码：

<?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>

Answer 1

您可以使用format的{{1}}属性获取所需内容的一部分，例如：

hAxis

查看hAxis: { format: "HH:mm", ... }的折线图configuration options。

更新： Example at jsbin

Google图表时间轴，x轴为日期

1 个答案: