使用Chart.js v3实现带链接自定义标签及堆叠柱状图相关功能咨询

1. 自定义顶部多跳转标签实现 #

通过自定义Chart.js插件的afterDraw钩子手动渲染标签文本，同时绑定canvas点击事件匹配点击区域实现不同跳转：

• 首先在插件中计算每个堆叠组的顶部中心点坐标，先渲染加粗文本，通过measureText()获取加粗文本宽度后，紧接在后面渲染普通文本，同时记录两段文本的坐标边界
• 给canvas元素绑定click事件，判断点击坐标落在哪个文本的边界范围内，执行对应的跳转逻辑
  核心代码示例：

const customLabelPlugin = {
  id: 'customTopLabel',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    chart.__clickAreas = [];
    chart.data.labels.forEach((label, index) => {
      const meta = chart.getDatasetMeta(0);
      const topY = chart.chartArea.top - 20;
      const centerX = meta.data[index].x;
      // 渲染加粗文本段
      ctx.font = 'bold 14px sans-serif';
      const boldText = '加粗跳转文本';
      const boldWidth = ctx.measureText(boldText).width;
      ctx.fillStyle = '#000';
      ctx.fillText(boldText, centerX - boldWidth/2, topY);
      // 记录加粗文本点击区域
      chart.__clickAreas.push({
        x1: centerX - boldWidth/2,
        y1: topY - 14,
        x2: centerX - boldWidth/2 + boldWidth,
        y2: topY,
        url: '加粗文本对应的跳转地址'
      })
      // 渲染普通文本段
      ctx.font = '14px sans-serif';
      const normalText = '普通跳转文本';
      const normalStartX = centerX - boldWidth/2 + boldWidth + 4;
      ctx.fillText(normalText, normalStartX, topY);
      // 记录普通文本点击区域
      const normalWidth = ctx.measureText(normalText).width;
      chart.__clickAreas.push({
        x1: normalStartX,
        y1: topY -14,
        x2: normalStartX + normalWidth,
        y2: topY,
        url: '普通文本对应的跳转地址'
      })
    })
  }
}
// 绑定点击跳转逻辑
chart.canvas.addEventListener('click', (e) => {
  const rect = chart.canvas.getBoundingClientRect();
  const clickX = e.clientX - rect.left;
  const clickY = e.clientY - rect.top;
  chart.__clickAreas.forEach(area => {
    if(clickX >= area.x1 && clickX <= area.x2 && clickY >= area.y1 && clickY <= area.y2) {
      window.location.href = area.url;
    }
  })
})

2. 数值标签自动内外切换实现 #

使用chartjs-plugin-datalabels插件实现，通过回调判断柱状条宽度是否足够容纳文本，自动调整显示位置和文本颜色：
核心配置示例：

options: {
  plugins: {
    datalabels: {
      color: (context) => {
        const barWidth = context.element.width;
        const textWidth = context.chart.ctx.measureText(context.formatted).width;
        return barWidth > textWidth + 8 ? '#fff' : '#000';
      },
      anchor: (context) => {
        const barWidth = context.element.width;
        const textWidth = context.chart.ctx.measureText(context.formatted).width;
        return barWidth > textWidth + 8 ? 'center' : 'end';
      },
      align: (context) => {
        const barWidth = context.element.width;
        const textWidth = context.chart.ctx.measureText(context.formatted).width;
        return barWidth > textWidth + 8 ? 'center' : 'right';
      },
      formatter: (val) => `${val}%`
    }
  }
}

3. 堆叠条间垂直空白间距实现 #

通过给每个数据集设置白色上下边框模拟间距，无需额外调整布局逻辑：
核心配置示例：

options: {
  datasets: {
    bar: {
      borderWidth: {
        top: 3,
        bottom: 3,
        left: 0,
        right: 0
      },
      borderColor: '#ffffff'
    }
  },
  scales: {
    x: { stacked: true },
    y: { stacked: true }
  }
}

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