个人中心
gpt4 book ai didi

php - Google Chart Api 使用日期时间值

转载 作者：行者123 更新时间：2023-11-29 00:00:55 26 4
gpt4 key购买 nike

你好，我想在我的图表中显示日期时间，我在堆栈中进行了一些搜索，我发现了类似的问题，如 this一个，但我不明白如何解决这个问题。

我认为我应该更改的代码部分如下..

<?php

$DB_NAME = 'project';


$DB_HOST = 'localhost';


$DB_USER = 'root';
$DB_PASS = 'smogi';

include_once 'header.php';

$view = ($_GET['view']);
$username2 =$_SESSION['username'];
$firstDate= $_POST['firstdatepicker']; 
$lastDate= $_POST['lastdatepicker'];
$typeValue = ($_POST['typeValue']);
$startHour = ($_POST['startHour']);
$firstMin = ($_POST['firstMin']);
$lastHour = ($_POST['lastHour']);
$lastMin = ($_POST['lastMin']);

$firstTime = $startHour.':'.$firstMin.':00';
$lastTime = $lastHour.':'.$lastMin.':00';

$con = mysqli_connect('localhost','root','smogi','project');

  /* Establish the database connection */
  $mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);

  if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
  }

 $sql="SELECT sensorValue,datetime FROM sensors WHERE username='$view' AND datetime BETWEEN '$firstDate''$firstTime' AND '$lastDate''$lastTime' AND typeValue='$typeValue' ORDER BY datetime DESC";
 $result = mysqli_query($con,$sql);




  $rows = array();
  $table = array();
  $table['cols'] = array(

    // Labels for your chart, these represent the column titles.

    array('label' => 'Date Time', 'type' => 'date'),
    array('label' => 'Sensor Value', 'type' => 'number')

);
    /* Extract the information from $result */
    foreach($result as $r) {

      $temp = array();

      // The following line will be used to slice the  chart

      $temp[] = array('v' => 'Date('.date('Y',strtotime($r['datetime'])).','.(date('n',strtotime($r['datetime'])) - 1).','.date('d',strtotime($r['datetime'])).',0,0,0)'); 

      // Values of the each slice

      $temp[] = array('v' => (int) $r['sensorValue']); 
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;

// convert data into JSON format
$jsonTable = json_encode($table);
//echo $jsonTable;


?>


<html>
  <head>
    <!--Load the Ajax API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(<?=$jsonTable?>);
      var options = {
          hAxis: {title: 'Date & Time'},
          vAxis: {title: 'Sensor Values'},
           title: 'Sensor Data',
          is3D: 'true',
          width: 900,
          height: 600
        };
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
    <!--this is the div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

我的图表现在看起来像这样......

enter image description here

我想要的不是 1000,2000...5000 来显示我正在显示的数据中的日期时间。

我的包含日期时间的数据库表如下...

enter image description here

你能帮帮我吗？？？ :)

最佳答案

我刚刚尝试了以下代码:

<?php
 $rows = array();
  $table = array();
  $table['cols'] = array(

    // Labels for your chart, these represent the column titles.

    array('label' => 'Date Time', 'type' => 'date'),
    array('label' => 'Sensor Value', 'type' => 'number'),
    array('type' => 'string', 'role' => 'tooltip', 'p' => array('html' => 'true')),
);

$result = array(
    array('datetime' => '2015-04-25 00:00:00', 'sensorValue' => 5),
    array('datetime' => '2015-04-25 14:30:00', 'sensorValue' => 10),
    array('datetime' => '2015-04-26 02:10:10', 'sensorValue' => 15),
    array('datetime' => '2015-04-26 12:10:10', 'sensorValue' => 17),
    array('datetime' => '2015-04-27 03:45:23', 'sensorValue' => 25),
    array('datetime' => '2015-04-28 15:34:00', 'sensorValue' => 4),
);

    /* Extract the information from $result */
    foreach($result as $r) {

      $temp = array();

      // The following line will be used to slice the chart

      $temp[] = array('v' => 'Date('.date('Y',strtotime($r['datetime'])).',' . 
                                     (date('n',strtotime($r['datetime'])) - 1).','.
                                     date('d',strtotime($r['datetime'])).','.
                                     date('H',strtotime($r['datetime'])).','.
                                     date('i',strtotime($r['datetime'])).','.
                                     date('s',strtotime($r['datetime'])).')'); 

      // Values of the each slice

      $temp[] = array('v' => (int) $r['sensorValue']); 
      $temp[] = array('v' => 'This is a <b>custom</b> tooltip. Insert your data as you like: On the 25th of April, 2015 the sensor value was: <b>5</b>');
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;
// convert data into JSON format
$jsonTable = json_encode($table);
?>


  <html>
  <head>
    <script type="text/javascript"
          src="https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }"></script>

    <script type="text/javascript">
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' },
          tooltip: {isHtml: true}
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

所以我改变了:

  1. array('label' => 'Date Time', 'type' => 'number')至 array('label' => 'Date Time', 'type' => 'date')
  2. 与'Date(date("Y"),date("n") - 1,date("d"),0,0,0)'形成日期如所述here

这是工具提示中带有 html 的结果:

enter image description here

更新

如果您想要自定义工具提示，here是它的文档。查看上面更新的代码，您需要进行三处更改以自定义工具提示:

  1. 将“虚拟”列添加到列列表中(使用 role = tooltip):

    array('type' => 'string', 'role' => 'tooltip', 'p' => array('html' => 'true')),

  2. 在循环中为列添加值:

    $temp[] = array('v' => 'This is a <b>custom</b> tooltip. Insert your data as you like: On the 25th of April, 2015 the sensor value was: <b>5</b>');

  3. 让jsapi知道内容是html:

    var options = {
      ...
      tooltip: {isHtml: true}
    };

更新

为了自定义水平轴值，您需要查看this第一的。只需添加 hAxis对象(及其 format )到图表选项对象:

    var options = {
      ...
      hAxis: {
        format: 'yyyy-M-d'
      }
    };

你会看到类似的东西:

enter image description here

关于php - Google Chart Api 使用日期时间值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29926717/

26 4 0
文章推荐： php - Laravel/Eloquent/DB 查询 - 当为 null 且不为 null 时加入
文章推荐： php - 当您只插入几行时，MySQL 中的单个多个 INSERT 是否会在速度上产生很大差异？
文章推荐： mysql - 使用 Sails.js 查询 MySql 表
文章推荐： mysql - 在现有记录中插入值。 sqlite 使用准备好的语句
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com