如何在Chart.js中复现多段堆叠条形图？

完全可以实现，针对你遇到的两个问题，直接用横向堆叠条形图+多数据集分组的方案就能解决，具体操作如下：

一、实现每个Stream行的多分段条形 #

把每个Good/Bad分段拆成独立的数据集，给同一Stream下的所有分段设置相同的stack属性，让它们在同一行堆叠：

示例数据结构 #

const chartData = {
  // y轴标签对应各个Stream
  labels: ['Stream A', 'Stream B', 'Stream C'],
  datasets: [
    // Stream A的第一个Good分段
    {
      label: 'Good',
      data: [12, 0, 0], // 仅在对应Stream位置赋值，其余为0
      backgroundColor: '#2ecc71',
      stack: 'Stream A', // 同一Stream的分段共用stack值
      customTooltip: 'Good 1: 持续12个单位'
    },
    // Stream A的Bad分段
    {
      label: 'Bad',
      data: [4, 0, 0],
      backgroundColor: '#e74c3c',
      stack: 'Stream A',
      customTooltip: 'Bad: 持续4个单位'
    },
    // Stream B的两个Good分段
    {
      label: 'Good',
      data: [0, 8, 0],
      backgroundColor: '#27ae60', // 用深浅区分同类型分段
      stack: 'Stream B',
      customTooltip: 'Good 1: 持续8个单位'
    },
    {
      label: 'Good',
      data: [0, 6, 0],
      backgroundColor: '#2ecc71',
      stack: 'Stream B',
      customTooltip: 'Good 2: 持续6个单位'
    },
    // Stream B的Bad分段
    {
      label: 'Bad',
      data: [0, 3, 0],
      backgroundColor: '#c0392b',
      stack: 'Stream B',
      customTooltip: 'Bad: 持续3个单位'
    }
    // 其他Stream的分段按此逻辑添加
  ]
};

核心配置 #

开启横向条形+双向堆叠，确保同Stream的分段在同一行：

const chartConfig = {
  type: 'bar',
  data: chartData,
  options: {
    indexAxis: 'y', // 切换为横向条形图
    scales: {
      x: {
        stacked: true, // x轴堆叠，让分段横向排列
        beginAtZero: true
      },
      y: {
        stacked: true, // y轴堆叠，确保同Stream的分段在同一行
        ticks: { maxRotation: 0 } // 避免标签换行
      }
    }
  }
};

二、配置自定义Tooltip #

通过tooltip.callbacks读取每个数据集的自定义字段，实现精准提示：

// 在chartConfig.options.plugins中添加tooltip配置
plugins: {
  tooltip: {
    callbacks: {
      // 自定义提示内容
      label: (context) => context.dataset.customTooltip,
      // 提示标题显示当前Stream名称
      title: (context) => context[0].label
    }
  }
}

这个方案比你之前尝试的scatter+折线方案更稳定，完全匹配你要的效果：每个Stream行有多个Good/Bad分段，且每个分段能独立显示自定义tooltip。

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