本文旨在帮助开发者修改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 的配置选项，可以满足各种不同的图表展示需求。
以上就是修改Google Chart图表：日期格式、反转图表与数值缩放的详细内容，更多请关注mysql php javascript java go google 排列 yy php JavaScript 数据类型 date format 字符串 值类型 对象