Chart.js温度图表问题求助：如何完整显示日期时间并实现横向滚动

核心调整方向 #

• 用滚动容器包裹图表，实现横向滚动+80%屏幕高度
• 强制Chart.js显示所有X轴日期标签
• 取消图表宽高比限制，适配容器高度

1. 布局层配置（HTML+CSS） #

给图表套一个带滚动的容器，直接实现高度占比和横向滚动：

.chart-container {
  height: 80vh; /* 固定占屏幕高度80% */
  overflow-x: auto; /* 超出容器宽度时横向滚动 */
  overflow-y: hidden;
}

#temperatureChart {
  min-width: max-content; /* 让图表宽度自适应内容，避免压缩 */
}

<div class="chart-container">
  <canvas id="temperatureChart"></canvas>
</div>

2. Chart.js配置调整 #

关闭X轴标签自动跳过，强制显示所有日期，并适配容器高度：

const tempChart = new Chart(document.getElementById('temperatureChart'), {
  type: 'line',
  data: {
    labels: yourDateTimeArray, // 替换为你的日期时间数据数组
    datasets: [{
      label: '实时温度',
      data: yourTemperatureArray, // 替换为你的温度数据数组
      borderColor: '#36A2EB',
      tension: 0.1,
      fill: false
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false, // 取消宽高比限制，让图表填充容器高度
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'hour', // 根据你的数据粒度调整（minute/day等）
          displayFormats: {
            hour: 'YYYY-MM-DD HH:mm' // 自定义日期显示格式
          }
        },
        ticks: {
          autoSkip: false, // 禁止自动跳过标签，强制显示所有日期
          maxRotation: 0, // 标签横向显示，避免旋转截断
          minRotation: 0,
          padding: 10 // 增加标签间距，避免拥挤
        }
      },
      y: {
        beginAtZero: false, // 根据温度数据范围调整
        title: {
          display: true,
          text: '温度(℃)'
        }
      }
    }
  }
});

3. 大数据量优化（可选） #

如果数据点超过100个，可手动设置图表最小宽度，确保每个标签有足够空间：

// 初始化图表前设置canvas最小宽度
const canvas = document.getElementById('temperatureChart');
canvas.style.minWidth = `${yourDateTimeArray.length * 70}px`; // 每个标签分配70px，可按需调整

问题根源说明 #

• 未配置滚动容器：图表被压缩在固定宽度内，导致标签重叠/被自动隐藏
• 未关闭autoSkip：Chart.js默认会跳过部分标签以避免拥挤
• 未设置maintainAspectRatio: false：图表会保持默认宽高比，无法占满80%屏幕高度

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