javascript – Google图表时间轴,x轴为日期

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

它现在看起来如何：

数据库:(日期在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',array('label' => 'temperature',array('label' => 'Chlorine',);

    $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",};

        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的format属性获取所需内容的一部分,例如：

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

有关hAxis.format,请参见折线图configuration options.

更新：Example at jsbin

原文链接：https://www.f2er.com/js/159062.html

javascript – Google图表时间轴,x轴为日期

解决方法

猜你在找的JavaScript相关文章