Chart.js相同标签未自动合并：是数据映射错误还是框架限制？

这是Chart.js的默认行为，同时你的数据映射逻辑也存在问题：

问题原因 #

• Chart.js无自动合并同名数据集的功能：datasets数组中的每个对象都是独立的数据系列，哪怕label完全一致，也会被视为不同系列单独渲染——你看到两个"Task 2"，就是因为定义了两个label为"Task 2"的数据集。
• 数据格式不符合默认条形图要求：标准Chart.js条形图的data字段应为对应每个标签的单个数值，但你使用了二维数组（如[[0, 2]]），这不是默认支持的格式，错误的数据格式加上重复的数据集，进一步导致了图表渲染异常。

解决方案 #

如果你想在同一个"Task 2"分类下展示多个时间区间的条形，可按以下方式调整：

1. 合并相同标签的数据集（基础实现） #

将两个"Task 2"的数据集拆分为同分类下的两个子系列，通过offset属性让条形不重叠，同时将时间区间转换为长度值（例如0-2的长度为2，7-9的长度为2）：

const config = {
  type: 'bar',
  data: {
    labels: ['Task 2', 'Task 1', 'Task 3'],
    datasets: [
      {
        label: 'Task 2 (0-2)',
        data: [2, 0, 0],
        backgroundColor: '#ff638440',
        borderColor: '#ff6384',
        borderWidth: 1,
        offset: true // 开启偏移避免同分类条形重叠
      },
      {
        label: 'Task 2 (7-9)',
        data: [2, 0, 0],
        backgroundColor: '#36a2eb40',
        borderColor: '#36a2eb',
        borderWidth: 1,
        offset: true
      },
      {
        label: 'Task 1 (2-5)',
        data: [0, 3, 0],
        backgroundColor: '#ffce5640',
        borderColor: '#ffce56',
        borderWidth: 1
      },
      {
        label: 'Task 3 (5-7)',
        data: [0, 0, 2],
        backgroundColor: '#4bc0c040',
        borderColor: '#4bc0c0',
        borderWidth: 1
      }
    ]
  },
  options: {
    responsive: true,
    indexAxis: 'y',
    scales: {
      x: {
        beginAtZero: true,
        ticks: {
          stepSize: 1
        }
      }
    }
  }
};

new Chart(document.getElementById('myChart'), config);

2. 使用甘特图插件（推荐） #

如果你的核心需求是创建展示任务时间区间的甘特图，推荐使用Chart.js的专用插件chartjs-chart-gantt。它原生支持定义任务的开始/结束时间，能自动处理同任务的多区间数据，无需手动合并或转换格式。

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