如何使用Chart.js展示分钟级温湿度数据并优化X轴刻度

核心解决方案思路 #

要实现X轴按小时显示刻度并正确格式化时间，关键是利用Chart.js的时间轴类型（time scale），而非手动生成标签。手动标签会因数据点数量（每分钟1条，一天1440条）与标签数量（24个）不匹配导致错位，时间轴会自动根据数据范围计算刻度位置。

步骤1：引入时间适配器 #

Chart.js的时间轴需要依赖第三方时间库解析时间戳，推荐使用date-fns，直接通过CDN引入：

<!-- 先引入Chart.js核心库 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- 引入date-fns时间适配器 -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

步骤2：处理JSON数据 #

假设你的JSON数据结构如下：

[
  {"timestamp": 1699123200000, "temperature": 22.5, "humidity": 60},
  {"timestamp": 1699123260000, "temperature": 22.6, "humidity": 59},
  ...
]

先将数据转换为Chart.js可识别的格式：

// 假设已通过fetch读取到jsonData
const timeLabels = jsonData.map(item => new Date(item.timestamp));
const tempDataset = jsonData.map(item => item.temperature);
const humidityDataset = jsonData.map(item => item.humidity);

步骤3：配置Chart.js的X轴 #

在图表配置中指定X轴为时间类型，同时设置刻度间隔与显示格式：

const ctx = document.getElementById('gardenChart').getContext('2d');
const gardenChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: timeLabels,
    datasets: [
      {
        label: '温度 (°C)',
        data: tempDataset,
        borderColor: '#ff6384',
        tension: 0.1
      },
      {
        label: '湿度 (%)',
        data: humidityDataset,
        borderColor: '#36a2eb',
        tension: 0.1,
        yAxisID: 'y1' // 双Y轴区分温湿度，可选
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'hour', // 强制按小时生成刻度
          displayFormats: {
            hour: 'HH:mm' // 刻度显示为「小时:分钟」格式
          },
          tooltipFormat: 'yyyy-MM-dd HH:mm' // 鼠标悬浮时显示完整时间
        },
        ticks: {
          maxRotation: 0, // 避免标签旋转，优化可读性
          maxTicksLimit: 24 // 最多显示24个刻度，对应一天24小时
        },
        title: {
          display: true,
          text: '时间'
        }
      },
      y: {
        title: {
          display: true,
          text: '温度 (°C)'
        }
      },
      y1: {
        position: 'right',
        title: {
          display: true,
          text: '湿度 (%)'
        },
        grid: {
          drawOnChartArea: false // 右侧Y轴不绘制网格线，简化视觉
        }
      }
    }
  }
});

常见问题排查 #

• 若时间刻度不显示：检查Raspberry Pi记录的时间戳是否为毫秒级，如果是秒级需乘以1000转换。
• 若刻度仍过多：调整maxTicksLimit数值，或确认time.unit设置为'hour'。
• 数据错位问题：放弃手动生成标签的方式，完全依赖时间轴自动匹配数据点与刻度。

内容的提问来源于stack exchange，提问作者Dakota Williams