Chart.js堆叠条形图左端圆角与图例配置问题求助

1. 配置图例显示分段并设置顶部位置 #

在图表的options中修改legend配置，让图例显示每个分段并固定在顶部：

options: {
  legend: {
    position: 'top', // 将图例放置在顶部
    display: true,
    labels: {
      boxWidth: 12, // 调整图例方块的大小
      usePointStyle: true // 可选，让图例样式更贴合条形分段
    }
  },
  // 保留原有scales等配置
}

2. 实现条形图左端圆角效果 #

Chart.js没有原生单端圆角配置，需通过自定义插件实现：
在图表的plugins数组中添加自定义绘制逻辑，仅给堆叠条形的左侧添加圆角：

plugins: [{
  afterDraw: function(chart) {
    const ctx = chart.ctx;
    chart.data.datasets.forEach((dataset, datasetIndex) => {
      const meta = chart.getDatasetMeta(datasetIndex);
      meta.data.forEach((bar, index) => {
        // 仅处理堆叠组最左侧的分段（第一个数据集的条形）
        if (datasetIndex === 0) {
          const x = bar._model.x - bar._model.width;
          const y = bar._model.y;
          const width = bar._model.width;
          const height = bar._model.height;
          const radius = 8; // 可根据需求调整圆角半径

          ctx.save();
          // 绘制带左圆角的自定义矩形
          ctx.beginPath();
          ctx.moveTo(x + radius, y);
          ctx.lineTo(x + width, y);
          ctx.lineTo(x + width, y + height);
          ctx.lineTo(x + radius, y + height);
          ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
          ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI);
          ctx.closePath();
          ctx.fillStyle = dataset.backgroundColor;
          ctx.fill();
          // 若有边框，同步绘制边框
          if (dataset.borderWidth > 0) {
            ctx.strokeStyle = dataset.borderColor;
            ctx.lineWidth = dataset.borderWidth;
            ctx.stroke();
          }
          ctx.restore();
          // 隐藏原生绘制的矩形
          bar._model.skip = true;
        }
      });
    });
  }
}]

3. 完整配置示例 #

将上述配置整合到你的组件代码中，最终的图表配置如下：

public barChartOptions: ChartConfiguration['options'] = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: {
      stacked: true,
    },
    y: {
      stacked: true,
      beginAtZero: true
    }
  },
  legend: {
    position: 'top',
    display: true,
    labels: {
      boxWidth: 12
    }
  },
  plugins: [{
    afterDraw: function(chart) {
      const ctx = chart.ctx;
      chart.data.datasets.forEach((dataset, datasetIndex) => {
        const meta = chart.getDatasetMeta(datasetIndex);
        meta.data.forEach((bar, index) => {
          if (datasetIndex === 0) {
            const x = bar._model.x - bar._model.width;
            const y = bar._model.y;
            const width = bar._model.width;
            const height = bar._model.height;
            const radius = 8;

            ctx.save();
            ctx.beginPath();
            ctx.moveTo(x + radius, y);
            ctx.lineTo(x + width, y);
            ctx.lineTo(x + width, y + height);
            ctx.lineTo(x + radius, y + height);
            ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
            ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI);
            ctx.closePath();
            ctx.fillStyle = dataset.backgroundColor;
            ctx.fill();
            if (dataset.borderWidth > 0) {
              ctx.strokeStyle = dataset.borderColor;
              ctx.lineWidth = dataset.borderWidth;
              ctx.stroke();
            }
            ctx.restore();
            bar._model.skip = true;
          }
        });
      });
    }
  }]
};

注意事项 #

• 可通过调整radius值改变圆角大小
• 若堆叠数据集顺序变化，需对应调整datasetIndex判断逻辑，确保选中最左侧的分段
• 若需要边框样式，需保证数据集配置了正确的borderColor和borderWidth

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