Chart.js堆叠柱状图悬停时如何设置统一柱状边框？

直接给每个柱状数据集加borderColor和borderWidth会导致每个分段都出现边框，中间的分割线会破坏整体效果。要实现整根柱子的统一边框，需要用Chart.js的自定义插件，在图表绘制完成后，手动给每个堆叠组绘制边框。

实现步骤： #

1. 定义自定义插件
   利用Chart.js的afterDraw钩子，在所有柱子绘制完成后，计算每个堆叠组的位置和尺寸，用Canvas API绘制统一边框：

   const stackBarBorderPlugin = {
     id: 'stackBarBorder',
     afterDraw: (chart) => {
       const { ctx, scales: { x, y } } = chart;
       ctx.save();
       // 自定义边框样式
       ctx.strokeStyle = '#000000'; // 替换为你的边框颜色
       ctx.lineWidth = 2;
       ctx.lineJoin = 'round'; // 可选：圆角边框
   
       // 遍历每个x轴刻度对应的堆叠组
       x.ticks.forEach((_, index) => {
         // 获取柱子位置和宽度
         const barMeta = chart.getDatasetMeta(1).data[index]; // 取第一个柱状数据集的柱子信息
         const barX = barMeta.x - barMeta.width / 2;
         const barWidth = barMeta.width;
   
         // 计算当前堆叠组的总高度（所有分段数值之和）
         const totalValue = chart.data.datasets
           .filter(ds => ds.type === 'bar' && ds.stack === 'standing costs')
           .reduce((sum, ds) => sum + (ds.data[index] || 0), 0);
   
         // 转换为Canvas像素坐标
         const barTop = y.getPixelForValue(totalValue);
         const barBottom = y.getPixelForValue(0); // 假设堆叠从0开始，按需调整
   
         // 绘制矩形边框
         ctx.beginPath();
         ctx.rect(barX, barTop, barWidth, barBottom - barTop);
         ctx.stroke();
       });
   
       ctx.restore();
     }
   };
   

2. 将插件添加到图表配置
   在你的图表配置中引入这个插件：

   const chartOptions = {
     // 其他配置项（比如scales、legend等）
     plugins: [stackBarBorderPlugin],
   };
   

3. 移除原有分段边框配置
   删掉所有柱状数据集中的borderColor、borderWidth等相关配置，避免和自定义边框冲突。

注意事项： #

• 如果你的堆叠不是从0开始，需要把barBottom的计算改为y轴最小值对应的像素：y.getPixelForValue(y.min)
• 边框颜色、宽度、圆角等样式可以根据需求自行调整
• 确保过滤条件ds.stack === 'standing costs'和你的实际堆叠名称一致

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