Chart.js实现点击区域时高亮对应柱状图分类

要解决点击后无视觉反馈的问题，我们可以通过记录选中的分类索引，动态修改对应区域的背景色（柱子或X轴分类区域）来提升用户体验。以下是两种可行的实现方案：

方案1：高亮点击分类下的所有柱子 #

该方案直接修改对应分类中所有柱子的颜色，视觉反馈直观：

首先在组件中添加两个变量，用于保存选中状态和原始背景色：

private selectedXIndex: number | null = null;
private originalBgColors = ['rgb(178, 69, 69)', 'rgb(12, 133, 75)']; // 对应两个数据集的原始颜色

然后修改图表初始化代码，在点击事件中处理颜色切换：

this.fireProgressionChart = new Chart(this.fireProgressionCanvas.nativeElement, {
  data: {
    datasets: [{
        type: 'bar',
        label: 'Expenses',
        data: [],
        backgroundColor: this.originalBgColors[0],
      }, {
       type: 'bar',
       label: 'Passive Income',
       backgroundColor: this.originalBgColors[1],
       data: [],
    }],
    labels: this.getNwProgressionLabels(),
  },
  options: {
    onClick: (event, elements, chart) => {
      const xScale = chart.scales['x'];
      const canvasPosition = getRelativePosition(event, chart);
      const xIndex = xScale.getValueForPixel(canvasPosition.x);

      // 重置上一次选中分类的柱子颜色
      if (this.selectedXIndex !== null) {
        chart.data.datasets.forEach((dataset, idx) => {
          // 将单个颜色值转为数组，确保每个柱子可单独设置颜色
          if (typeof dataset.backgroundColor === 'string') {
            dataset.backgroundColor = Array(chart.data.labels.length).fill(this.originalBgColors[idx]);
          }
          (dataset.backgroundColor as string[])[this.selectedXIndex] = this.originalBgColors[idx];
        });
      }

      // 设置当前选中分类的柱子高亮色
      chart.data.datasets.forEach((dataset, idx) => {
        if (typeof dataset.backgroundColor === 'string') {
          dataset.backgroundColor = Array(chart.data.labels.length).fill(this.originalBgColors[idx]);
        }
        // 选用比原始颜色更亮的色调作为高亮
        (dataset.backgroundColor as string[])[xIndex] = idx === 0 ? 'rgb(210, 99, 99)' : 'rgb(42, 163, 105)';
      });

      this.selectedXIndex = xIndex;
      chart.update(); // 触发图表重新渲染

      // 原业务逻辑保留
      const age = chart.data.labels[xIndex] as string;
      this.updateFireGapData(age);
    }
  }
});

方案2：高亮整个X轴分类区域 #

如果希望给整个分类的横向区域添加背景高亮（而非仅柱子），可以通过Chart.js插件实现：

同样先定义选中状态变量：

private selectedXIndex: number | null = null;

修改图表初始化代码，添加自定义插件和点击事件逻辑：

this.fireProgressionChart = new Chart(this.fireProgressionCanvas.nativeElement, {
  data: {
    datasets: [{
        type: 'bar',
        label: 'Expenses',
        data: [],
        backgroundColor: 'rgb(178, 69, 69)',
      }, {
       type: 'bar',
       label: 'Passive Income',
       backgroundColor: 'rgb(12, 133, 75)',
       data: [],
    }],
    labels: this.getNwProgressionLabels(),
  },
  options: {
    onClick: (event, elements, chart) => {
      const xScale = chart.scales['x'];
      const canvasPosition = getRelativePosition(event, chart);
      const xIndex = xScale.getValueForPixel(canvasPosition.x);

      this.selectedXIndex = xIndex;
      chart.update(); // 触发插件重新绘制高亮背景

      // 原业务逻辑保留
      const age = chart.data.labels[xIndex] as string;
      this.updateFireGapData(age);
    }
  },
  plugins: [{
    id: 'highlightCategoryBackground',
    afterDraw: (chart) => {
      if (this.selectedXIndex === null) return;
      const ctx = chart.ctx;
      const xScale = chart.scales['x'];
      const yScale = chart.scales['y'];

      // 计算当前分类的X轴起始和结束位置
      const categoryWidth = xScale.width / chart.data.labels.length;
      const xStart = xScale.getPixelForValue(this.selectedXIndex) - categoryWidth / 2;
      const xEnd = xStart + categoryWidth;

      // 绘制半透明背景
      ctx.fillStyle = 'rgba(200, 200, 200, 0.2)';
      ctx.fillRect(xStart, yScale.top, xEnd - xStart, yScale.bottom - yScale.top);
    }
  }]
});

两种方案都能实现清晰的点击位置提示，你可以根据视觉设计需求选择其中一种。

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