如何在Chart.js同一张图表中绘制不同数据量的两个数据集？

问题场景 #

需要在同一张Chart.js折线图中展示两种不同时间粒度的数据集：

• 每日数据：4个数据点，对应周一到周四
• 每6小时数据：16个数据点（每日4个，共4天）

原代码因数据集长度不匹配无法正常渲染，尝试过的方案要么tooltip会显示无关数据点，要么X轴刻度可读性差，需要找到标准解决方案。

原问题代码 #

JavaScript #

const ctx = document.getElementById('myChart').getContext('2d');
const data = {
  labels: ["mon", "tue", "wed", "thu"],
  datasets: [{
    label: 'daily',
    data: [65, 59, 80, 81],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }, {
    label: 'every 6 hours',
    data: [60, 61, 62, 61, 58, 57, 66, 44, 81, 87, 99, 13, 81, 80, 79, 78],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};
const myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

有效解决方案 #

核心是为不同粒度的数据集配置结构化数据+独立X轴映射，既保证X轴可读性，又避免tooltip干扰。

完整代码 #

JavaScript

const ctx = document.getElementById('myChart').getContext('2d');

// 每日数据：每个点对应一个日期标签
const dailyData = [
  { x: 'mon', y: 65 },
  { x: 'tue', y: 59 },
  { x: 'wed', y: 80 },
  { x: 'thu', y: 81 }
];

// 每6小时数据：每个日期对应4个数据点，用x值绑定到对应日期
const hourlyData = [
  { x: 'mon', y: 60 }, { x: 'mon', y: 61 }, { x: 'mon', y: 62 }, { x: 'mon', y: 61 },
  { x: 'tue', y: 58 }, { x: 'tue', y: 57 }, { x: 'tue', y: 66 }, { x: 'tue', y: 44 },
  { x: 'wed', y: 81 }, { x: 'wed', y: 87 }, { x: 'wed', y: 99 }, { x: 'wed', y: 13 },
  { x: 'thu', y: 81 }, { x: 'thu', y: 80 }, { x: 'thu', y: 79 }, { x: 'thu', y: 78 }
];

const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [
      {
        label: '每日数据',
        data: dailyData,
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1,
        pointRadius: 5,
        parsing: {
          xAxisKey: 'x'
        }
      },
      {
        label: '每6小时数据',
        data: hourlyData,
        fill: false,
        borderColor: 'rgb(255, 99, 132)',
        tension: 0.1,
        pointRadius: 3,
        parsing: {
          xAxisKey: 'x'
        }
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'category',
        labels: ['mon', 'tue', 'wed', 'thu'],
        ticks: {
          autoSkip: false
        }
      },
      y: {
        beginAtZero: true
      }
    },
    tooltip: {
      mode: 'index',
      intersect: false,
      // 确保只显示当前数据集的相关点
      filter: function(item) {
        return item.datasetIndex === this.tooltip.dataPoints[0].datasetIndex;
      }
    }
  }
});

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart" width="600" height="400"></canvas>

关键说明 #

1. 结构化数据格式：将数据集改为{x: 标签, y: 值}的对象格式，让不同长度的数据集能绑定到相同的X轴标签
2. X轴配置：使用分类轴，直接指定每日标签，保证刻度清晰可读
3. Tooltip优化：通过filter函数确保hover时只显示当前数据集的点，避免无关数据干扰
4. 视觉区分：为两个数据集设置不同的颜色和点半径，方便区分粒度

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