本文旨在帮助开发者修改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 来实现。
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>总结
通过本文，你学习了如何修改 Google Chart 图表的日期显示格式、反转图表方向以及缩放数值数据。这些技巧可以帮助你创建更具可读性和信息量的图表，从而更好地展示数据。记住，灵活运用 Google Charts 的配置选项，可以满足各种不同的图表展示需求。
