Chart.js带时间轴水平条形图：Tooltip仅生效于最后项及图例重复问题

问题说明 #

当前使用Chart.js和moment.js复刻机器时间线时，存在两个问题：

• Tooltip仅在最右侧的最后一个条形上触发显示
• 图例中RUNNING、IDLE、STOPPED三种状态重复出现，每种状态应仅显示一次

解决方案 #

通过调整Tooltip配置和自定义图例过滤逻辑，可以解决这两个问题，同时保留原有图表的外观结构。

修改后的完整代码 #

JavaScript

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Status'],
    datasets: [
      {label:'RUNNING',borderWidth:1,backgroundColor:'rgba(101,172,91,1)',data:[{x:'2023-09-01T08:56:26.000Z',y:0}]},
      {label:'IDLE',borderWidth:1,backgroundColor:'rgba(233,157,82,1)',data:[{x:'2023-09-01T09:39:12.000Z',y:1}]},
      {label:'RUNNING',borderWidth:1,backgroundColor:'rgba(101,172,91,1)',data:[{x:'2023-09-01T09:42:44.000Z',y:2}]},
      {label:'STOPPED',borderWidth:1,backgroundColor:'rgba(212,29,29,1)',data:[{x:'2023-09-01T10:00:11.000Z',y:3}]},
      {label:'RUNNING',borderWidth:1,backgroundColor:'rgba(101,172,91,1)',data:[{x:'2023-09-01T12:30:00.000Z',y:4}]},
      {label:'IDLE',borderWidth:1,backgroundColor:'rgba(233,157,82,1)',data:[{x:'2023-09-01T12:55:23.000Z',y:5}]},
      {label:'RUNNING',borderWidth:1,backgroundColor:'rgba(101,172,91,1)',data:[{x:'2023-09-01T19:00:12.000Z',y:6}]},
      {label:'IDLE',borderWidth:1,backgroundColor:'rgba(233,157,82,1)',data:[{x:'2023-09-01T21:12:45.000Z',y:7}]},
      {label:'RUNNING',borderWidth:1,backgroundColor:'rgba(101,172,91,1)',data:[{x:'2023-09-02T02:12:12.000Z',y:8}]}
    ],
  },
  options: {
    responsive: true,
    // 修复Tooltip问题：设置为单个点触发
    tooltip: {
      mode: 'point',
      intersect: true
    },
    // 修复图例重复问题：过滤重复标签
    legend: {
      labels: {
        filter: function(item, chart) {
          // 仅保留每个标签第一次出现的图例项
          const firstOccurrenceIndex = chart.data.datasets.findIndex(ds => ds.label === item.text);
          return item.datasetIndex === firstOccurrenceIndex;
        }
      }
    },
    scales: {
      x: {
        stacked: false,
        min: '2023-09-01T08:56:26.000Z',
        type: 'time',
        time: {
          unit: 'minute',
          displayFormats: {
            hour: 'H:mm'
          },
        }
      },
      y: {
        stacked: true
      }
    },
    indexAxis: 'y',
  }
});

CSS

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

HTML

<script src="https://npmcdn.com/chart.js@latest/dist/chart.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.1/chartjs-adapter-moment.min.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

关键修改说明 #

1. Tooltip修复：
   默认情况下Chart.js的Tooltip采用index模式，会尝试聚合同索引的所有数据点，但这里每个条形对应独立的y轴索引，因此设置mode: 'point'让Tooltip针对单个数据点触发，确保每个条形都能正常显示Tooltip。

2. 图例去重：
   通过legend.labels.filter函数，找到每个状态标签第一次出现的数据集索引，仅保留该索引对应的图例项，从而避免重复的图例条目。

3. 脚本引入优化：
   移除了重复引入的Chart.js脚本，避免版本冲突导致的潜在问题。

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