如何修改Google Chart：日期优化、图表反转及风速值除以10展示

针对你提出的三个调整需求，直接按下面的方式修改代码即可：

• 日期可读性优化：将传入的日期字符串转为JS原生Date对象供图表识别，同时在横轴配置项中指定友好的日期显示格式，控制横轴标签密度避免重叠
• 图表顺序反转：直接修改SQL查询的排序规则，将原有的ORDER BY ID DESC改为ORDER BY ID ASC，取到的144条数据就会按时间从早到晚正序排列，不需要前端额外反转数组
• 风速数值调整：PHP循环输出数据时，直接将风速字段Vents的值除以10后再输出，从数据源层面完成数值转换

修改后完整代码 #

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(graph24h);

  function graph24h() {
    var data = google.visualization.arrayToDataTable([
      // 第一列指定为日期类型，不再是普通字符串
      [{type: 'date', label: 'Date'}, 'Température', 'Vent Moyen', 'Humidité'],
      <?php 
           // 排序改为ASC，实现图表从早到晚正序展示
           $chartQuery = "SELECT * FROM ZiMeteo ORDER BY ID ASC LIMIT 144";
           $chartQueryRecords = mysqli_query($connect, $chartQuery);
                while ($row = mysqli_fetch_assoc($chartQueryRecords)) {
                     // 1. 日期转为JS Date对象格式 2. 风速值直接除以10输出
                     echo "[new Date('".$row['Date']."'),".$row['TmpExt'].",".($row['Vents']/10).",".$row['HumExt']."],";
                }
       ?>
       ]);

    var options = {
      title: 'Evolution sur 24 h',
      legend: { position: 'bottom' },
      // 横轴日期格式配置
      hAxis: {
        format: 'dd/MM HH:mm', // 可按需调整格式顺序
        showTextEvery: 12 // 每12个数据点显示一个标签，避免文字挤压，可根据实际效果调整数值
      }
    };

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

补充说明：如果你的数据库存储的日期格式不是JS Date可直接识别的标准格式（如YYYY-MM-dd HH:mm:ss），只需要调整new Date()内的日期拼接逻辑，匹配实际存储的日期格式即可。

内容的提问来源于stack exchange，提问作者Jérôme