ChartJS堆叠柱状图点击高亮实现 选中列添加彩色边框方法

可以通过监听图表点击事件，动态修改对应列的边框配置后重绘图表实现需求，具体修改步骤如下：

• 先给每个数据集补充边框基础配置，初始状态下隐藏边框，同时关闭默认的边框跳过逻辑，确保四个边都能正常渲染：
  在每个dataset对象中新增以下三个属性：

borderWidth: 0,
borderColor: 'transparent',
borderSkipped: false

• 图表初始化完成后绑定点击事件，实现选中状态的切换：

bar_ctx.addEventListener('click', function (evt) {
  // 获取点击位置对应的列索引
  const activePoints = bar_chart.getElementsAtEventForMode(evt, 'index', { intersect: true }, false);
  // 重置所有列的边框配置
  bar_chart.data.datasets.forEach(dataset => {
    dataset.borderWidth = new Array(dates.length).fill(0);
    dataset.borderColor = new Array(dates.length).fill('transparent');
  });
  // 点击到有效列时添加彩色边框
  if (activePoints.length) {
    const selectedColIndex = activePoints[0].index;
    bar_chart.data.datasets.forEach(dataset => {
      dataset.borderWidth[selectedColIndex] = 3; // 可自定义边框宽度
      dataset.borderColor[selectedColIndex] = '#2196F3'; // 可自定义边框颜色
    });
  }
  // 重绘图表让配置生效
  bar_chart.update();
});

如果需要hover状态不覆盖选中的边框效果，同步修改每个dataset的hoverBorderWidth和hoverBorderColor配置即可。

修改后的完整代码 #

// 返回带千分位逗号分隔的数值
var numberWithCommas = function(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
var dataPack1 = [40, 47, 44, 38, 27, 31, 25];
var dataPack2 = [10, 12, 7, 5, 4, 6, 8];
var dataPack3 = [17, 11, 22, 18, 12, 7, 5];
var dates = ["SN 1.0.1", "SN 1.0.2", "SN 1.0.3", "SN 1.0.4", "SN 1.0.5", "SN 2.0.0", "SN 2.0.1"];
var bar_ctx = document.getElementById('bar-chart');
var bar_chart = new Chart(bar_ctx, {
      type: 'bar',
      data: {
        labels: dates,
        datasets: [{
          label: 'Bad Style',
          data: dataPack1,
          backgroundColor: "#512DA8",
          hoverBackgroundColor: "#7E57C2",
          hoverBorderWidth: 0,
          borderWidth: 0,
          borderColor: 'transparent',
          borderSkipped: false
        }, {
          label: 'Warning',
          data: dataPack2,
          backgroundColor: "#FFA000",
          hoverBackgroundColor: "#FFCA28",
          hoverBorderWidth: 0,
          borderWidth: 0,
          borderColor: 'transparent',
          borderSkipped: false
        }, {
          label: 'Error',
          data: dataPack3,
          backgroundColor: "#D32F2F",
          hoverBackgroundColor: "#EF5350",
          hoverBorderWidth: 0,
          borderWidth: 0,
          borderColor: 'transparent',
          borderSkipped: false
        }]
      },
      options: {
        animation: {
          duration: 10,
        },
        tooltips: {
          mode: 'label',
          callbacks: {
            label: function(tooltipItem, data) {
              return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
            }
          }
        },
        scales: {
          xAxes: [{
            stacked: true,
            gridLines: {
              display: false
            },
          }],
          yAxes: [{
            stacked: true,
            ticks: {
              callback: function(value) {
                return numberWithCommas(value);
              },
            },
          }],
        },
        legend: {display: true}
      }
});

// 点击事件绑定
bar_ctx.addEventListener('click', function (evt) {
  const activePoints = bar_chart.getElementsAtEventForMode(evt, 'index', { intersect: true }, false);
  bar_chart.data.datasets.forEach(dataset => {
    dataset.borderWidth = new Array(dates.length).fill(0);
    dataset.borderColor = new Array(dates.length).fill('transparent');
  });
  if (activePoints.length) {
    const selectedColIndex = activePoints[0].index;
    bar_chart.data.datasets.forEach(dataset => {
      dataset.borderWidth[selectedColIndex] = 3;
      dataset.borderColor[selectedColIndex] = '#2196F3';
    });
  }
  bar_chart.update();
});

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