修改Google Chart图表：日期格式、反转图表与数值缩放-html教程-PHP中文网

修改Google Chart图表：日期格式、反转图表与数值缩放

聖光之護

发布： 2025-09-18 16:58:22

原创

443人浏览过

修改google chart图表：日期格式、反转图表与数值缩放

本文旨在帮助开发者修改Google Chart图表，使其更具可读性和实用性。主要内容包括：自定义日期显示格式，实现图表反转，以及对图表数据进行数值缩放。通过本文，你将掌握如何调整Google Chart的hAxis和vAxis属性，以及如何处理数据源，从而满足特定的图表展示需求。

Google Charts 提供了丰富的配置选项，允许开发者根据需求定制图表。以下将针对日期格式修改、图表反转和数值缩放三个方面进行详细讲解。

1. 修改日期显示格式

Google Charts 默认的日期显示格式可能不符合所有需求。为了使其更具可读性，你需要自定义日期格式。这通常涉及到修改数据源和配置 hAxis 属性。

数据源处理：

首先，确保你的日期数据以 JavaScript Date 对象的形式传递给 Google Charts。如果你的日期数据是以字符串形式存储的（例如，YYYY-MM-DD HH:MM:SS），你需要先将其转换为 Date 对象。

// 假设 dateString 是从数据库中获取的日期字符串
function formatDate(dateString) {
  return new Date(dateString);
}

// 在从数据库获取数据后，对日期进行转换
<?php
  $chartQuery = "SELECT * FROM ZiMeteo ORDER BY ID DESC LIMIT 144";
  $chartQueryRecords = mysqli_query($connect, $chartQuery);
  while ($row = mysqli_fetch_assoc($chartQueryRecords)) {
    // 将数据库中的日期字符串转换为 JavaScript Date 对象
    $dateString = $row['Date'];
    echo "['". "<script>document.write(formatDate('" . $dateString . "'))</script>" ."',".$row['TmpExt'].",".$row['Vents'].",".$row['HumExt']."],";
  }
?>

登录后复制

配置 hAxis：

然后，使用 hAxis.format 属性来指定日期格式。常用的日期格式包括 yyyy-MM-dd、MM/dd/yy、HH:mm 等。

var options = {
  title: 'Evolution sur 24 h',
  legend: { position: 'bottom' },
  hAxis: {
    format: 'HH:mm', // 设置日期格式为小时:分钟
    textStyle: {
      color: 'white'
    }
  },
  vAxis: {
    textStyle: {
      color: 'white'
    }
  }
};

登录后复制

常用日期格式：

格式	描述	示例
yyyy-MM-dd	年-月-日	2023-10-27
MM/dd/yy	月/日/年	10/27/23
HH:mm:ss	时:分:秒	14:30:00
MMM d, y	月份缩写日, 年	Oct 27, 2023

2. 反转图表

反转图表意味着将横轴（hAxis）的方向颠倒。这可以通过设置 hAxis.direction 属性为 -1 来实现。

爱图表

AI驱动的智能化图表创作平台

查看详情

var options = {
  title: 'Evolution sur 24 h',
  legend: { position: 'bottom' },
  hAxis: {
    direction: -1, // 反转横轴方向
    textStyle: {
      color: 'white'
    }
  },
  vAxis: {
    textStyle: {
      color: 'white'
    }
  }
};

登录后复制

设置 direction: -1 后，图表中的数据点将从右向左排列，而不是默认的从左向右排列。

3. 数值缩放

对图表数据进行数值缩放，通常是为了更好地展示数据，或者将数据转换为更易理解的单位。例如，将风速数据除以 10。

数据源处理：

在将数据传递给 Google Charts 之前，对数据进行处理。这可以在 PHP 代码中完成。

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

登录后复制

或者，在 JavaScript 代码中处理：

// 假设 dataArray 是从数据库获取的原始数据
var newDataArray = dataArray.map(function(item) {
  // 将风速数据除以 10
  var vents = item[2] / 10;
  return [item[0], item[1], vents, item[3]];
});

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

登录后复制

注意事项：

确保数据类型正确。数值缩放操作仅适用于数值类型的数据。
在缩放数据后，考虑更新图表的 vAxis.title 属性，以反映新的单位。例如，如果将风速除以 10，可以将 vAxis.title 设置为 "风速 (m/s / 10)"。

完整示例代码

<script type="text/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)) {
                     // 缩放风速数据
                     $vents = $row['Vents'] / 10;
                     // 将数据库中的日期字符串转换为 JavaScript Date 对象
                     $dateString = $row['Date'];
                     echo "['". "<script>document.write(formatDate('" . $dateString . "'))</script>" ."',".$row['TmpExt'].",".$vents.",".$row['HumExt']."],";
                }
       ?>
    ]);

    var options = {
      title: 'Evolution sur 24 h',
      legend: { position: 'bottom' },
      hAxis: {
        format: 'HH:mm', // 设置日期格式
        direction: -1,  // 反转图表
        textStyle: {
          color: 'white'
        }
      },
      vAxis: {
        title: '风速 (m/s / 10)', // 更新 vAxis 标题
        textStyle: {
          color: 'white'
        }
      }
    };

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

    chart.draw(data, options);
  }

  function formatDate(dateString) {
    return new Date(dateString);
  }
</script>

<div id="curve_chart" style="width: 900px; height: 500px"></div>

登录后复制