如何使用Chart.js实现条形图形式的时间区间展示效果

完全可以用Chart.js实现你需要的时间区间展示效果，你选择横向条形图的实现方向是正确的，不需要依赖堆叠条形图，直接用Chart.js原生支持的浮动条形（Floating Bars） 能力即可达成目标。

你当前代码的核心问题是没有正确触发浮动条形的渲染逻辑，且缺少部分体验相关的配置，以下是可直接运行的修正版本：

const data = {
  labels: ['Mon', 'Tue', 'Wed' ],
  datasets: [{
    label: '时间区间',
    data: [
        [14, 16],
        [17, 22],
        [13, 19],
        // 跨天区间示例：当日22点至次日2点，匹配你设置的x轴最大值26的规则
        [22, 26]
    ],
    backgroundColor: 'rgba(255, 26, 104, 0.2)',
    borderColor: 'rgba(255, 26, 104, 1)',
    borderWidth: 2,
    borderSkipped: false,
    // 调整条形宽度，更贴合时间区间的展示视觉
    barPercentage: 0.6
  }]
};

const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    responsive: true,
    plugins: {
      tooltip: {
        callbacks: {
          // 自定义提示框，将数值转换为时间格式展示
          label: (context) => {
            const [start, end] = context.raw;
            const format = (val) => `${String(val % 24).padStart(2, '0')}:00`;
            return `时段：${format(start)} - ${format(end)}`
          }
        }
      }
    },
    scales: {
      x: {
        min: 12,
        max: 26,
        ticks: {
            stepSize: 1,
            callback: (val) => `${String(val % 24).padStart(2, '0')}:00`
        },
      },
      y: {
        // 分类轴无需设置beginAtZero，关闭纵向网格线减少视觉干扰
        grid: {
          display: false
        }
      }
    }
  }
};

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

关键配置说明 #

• 浮动条形是Chart.js v3及以上版本的原生特性，使用时请确认你的Chart.js版本不低于3.0
• 你采用的「超过24点的时间用24+小时数表示，渲染时取模转成时间格式」的跨天处理逻辑完全可行，不需要额外调整
• 如果需要在同一个分类（比如周一）下展示多个时间区间，只需要新增dataset，或者在对应data项中传入多个区间数组即可，无需开启堆叠模式
• 可通过调整barPercentage参数修改条形的粗细，匹配你需要的视觉密度

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