当前位置：首页 > 文章列表 > 文章 > 前端 > Google图表日期调整与反转技巧

Google图表日期调整与反转技巧

2025-09-23 08:24:29 0浏览收藏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《Google Chart 日期格式调整与图表反转技巧》，涉及到，有需要的可以收藏一下

修改 Google Chart 图表：日期格式、反转图表和数据处理

本文档旨在帮助您修改 Google Chart 图表，使其更易于阅读和理解。我们将重点介绍如何修改日期显示格式，反转图表方向，以及对数据进行处理（例如，将风速除以 10）。通过本文，您将学会如何自定义 Google Chart，以满足您的特定需求。

修改日期显示格式

Google Charts 默认的日期格式可能不够直观。您可以通过配置 hAxis 选项来修改日期显示格式。

首先，您需要确定日期列的数据类型。如果您的日期数据是字符串类型，您需要将其转换为 JavaScript 的 Date 对象。您可以在 PHP 中使用 strtotime() 函数将日期字符串转换为时间戳，然后在 JavaScript 中使用 new Date(timestamp * 1000) 将时间戳转换为 Date 对象。

然后，您可以使用 hAxis.format 选项来指定日期格式。hAxis.format 接受 moment.js 的日期格式字符串。例如，要将日期格式化为 "YYYY-MM-DD"，您可以使用以下代码：

var options = {
  title: 'Evolution sur 24 h',
  legend: { position: 'bottom' },
  hAxis: {
    format: 'YYYY-MM-DD'
  }
};

示例：

假设您的 PHP 代码如下：

<?php
$chartQuery = "SELECT * FROM ZiMeteo ORDER BY ID DESC LIMIT 144";
$chartQueryRecords = mysqli_query($connect, $chartQuery);
while ($row = mysqli_fetch_assoc($chartQueryRecords)) {
  $timestamp = strtotime($row['Date']);
  echo "[new Date(" . $timestamp * 1000 . "), " . $row['TmpExt'] . ", " . $row['Vents'] . ", " . $row['HumExt'] . "],";
}
?>

JavaScript 代码如下：

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(graph24h);

function graph24h() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Température', 'Vent Moyen', 'Humidité'],
    <?php
         $chartQuery = "SELECT * FROM ZiMeteo ORDER BY ID DESC LIMIT 144";
         $chartQueryRecords = mysqli_query($connect, $chartQuery);
              while ($row = mysqli_fetch_assoc($chartQueryRecords)) {
                   $timestamp = strtotime($row['Date']);
                   echo "[new Date(" . $timestamp * 1000 . "), " . $row['TmpExt'] . ", " . $row['Vents'] . ", " . $row['HumExt'] . "],";
              }
     ?>
  ]);

  var options = {
    title: 'Evolution sur 24 h',
    legend: { position: 'bottom' },
    hAxis: {
      format: 'YYYY-MM-DD HH:mm:ss'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  chart.draw(data, options);
}

反转图表方向

要反转图表，您可以使用 hAxis.direction 选项。将 hAxis.direction 设置为 -1 将反转水平轴的方向。

var options = {
  title: 'Evolution sur 24 h',
  legend: { position: 'bottom' },
  hAxis: {
    direction: -1
  }
};

这会将图表的水平轴反转，使最新的数据出现在左侧，最旧的数据出现在右侧。

数据处理：将风速除以 10

要将风速除以 10，您需要在 PHP 中或者 JavaScript 中进行数据处理。

在 PHP 中处理：

在从数据库中读取数据时，直接将风速除以 10。

<?php
$chartQuery = "SELECT * FROM ZiMeteo ORDER BY ID DESC LIMIT 144";
$chartQueryRecords = mysqli_query($connect, $chartQuery);
while ($row = mysqli_fetch_assoc($chartQueryRecords)) {
  $vents = $row['Vents'] / 10; // 将风速除以 10
  echo "['" . $row['Date'] . "', " . $row['TmpExt'] . ", " . $vents . ", " . $row['HumExt'] . "],";
}
?>

在 JavaScript 中处理：

在将数据传递给 Google Charts 之前，遍历数据数组并将风速除以 10。

function graph24h() {
  var dataArray = [
    ['Date', 'Température', 'Vent Moyen', 'Humidité'],
    <?php
         $chartQuery = "SELECT * FROM ZiMeteo ORDER BY ID DESC LIMIT 144";
         $chartQueryRecords = mysqli_query($connect, $chartQuery);
              while ($row = mysqli_fetch_assoc($chartQueryRecords)) {
                   echo "['" . $row['Date'] . "', " . $row['TmpExt'] . ", " . $row['Vents'] . ", " . $row['HumExt'] . "],";
              }
     ?>
  ];

  // 数据处理：将风速除以 10
  for (var i = 1; i < dataArray.length; i++) {
    dataArray[i][2] = dataArray[i][2] / 10;
  }

  var data = google.visualization.arrayToDataTable(dataArray);

  var options = {
    title: 'Evolution sur 24 h',
    legend: { position: 'bottom' }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  chart.draw(data, options);
}

注意事项：