ChartJs v2.7.3水平柱状图圆角无法生效，求解决方法

Chart.js v2.7.3 原生并不支持borderRadius配置项，所以你之前设置的elements.rectangle.borderRadius不会生效。下面提供一个通过自定义插件重写绘制逻辑的可行方案：

实现步骤 #

1. 注册自定义圆角插件 #

该插件会重写水平柱状图的绘制方法，手动绘制带圆角的矩形：

// 自定义圆角插件
Chart.plugins.register({
  beforeInit: function(chart) {
    // 保存原生绘制方法
    const originalDraw = chart.controllers.horizontalBar.prototype.draw;
    
    // 重写水平柱状图绘制逻辑
    chart.controllers.horizontalBar.prototype.draw = function() {
      const ctx = chart.chart.ctx;
      const borderRadius = 10; // 可自行调整圆角半径
      
      this.data.datasets.forEach((dataset, datasetIndex) => {
        const meta = chart.getDatasetMeta(datasetIndex);
        
        meta.data.forEach((element, index) => {
          const { x, y, width, height } = element._model;
          const isFirst = datasetIndex === 0;
          const isLast = datasetIndex === chart.data.datasets.length - 1;
          
          ctx.save();
          ctx.beginPath();
          
          // 绘制路径：根据堆叠位置决定圆角位置
          if (isFirst) {
            ctx.moveTo(x, y + borderRadius);
            ctx.arc(x + borderRadius, y + borderRadius, borderRadius, Math.PI, Math.PI * 1.5);
          } else {
            ctx.moveTo(x, y);
          }
          
          ctx.lineTo(x + width, y);
          
          if (isLast) {
            ctx.arc(x + width - borderRadius, y + borderRadius, borderRadius, Math.PI * 1.5, Math.PI * 2);
          }
          
          ctx.lineTo(x + width, y + height);
          
          if (isLast) {
            ctx.arc(x + width - borderRadius, y + height - borderRadius, borderRadius, Math.PI * 2, Math.PI * 0.5);
          }
          
          ctx.lineTo(x, y + height);
          
          if (isFirst) {
            ctx.arc(x + borderRadius, y + height - borderRadius, borderRadius, Math.PI * 0.5, Math.PI);
          }
          
          ctx.closePath();
          ctx.fillStyle = dataset.backgroundColor[index % dataset.backgroundColor.length];
          ctx.fill();
          ctx.restore();
        });
      });
      
      // 跳过原生绘制，避免重复渲染
      return;
    };
  }
});

2. 修改图表配置 #

将插件引入后，移除无效的elements.rectangle.borderRadius配置，完整代码如下：

// 先注册上面的插件

var hwajuStockinChart = new Chart(hwajuStockin, {
    type: 'horizontalBar',
    data: {
        labels: dataHwaju.stockin.name,
        datasets: [
            {
                label:"완료 입고량",
                backgroundColor: [
                    "rgba(64, 0, 255, 0.5)",
                    "rgba(0, 255, 255, 0.5)",
                    "rgba(4, 180, 4, 0.5)",
                    "rgba(132, 132, 132, 0.5)",
                    "rgba(223, 1, 1, 0.5)",
                    "rgba(255, 128, 0, 0.5)"
                ],
                data: dataHwaju.stockin.qty_per
            }, {
                label:"남은 입고량",
                data: dataHwaju.stockin.req_per
            }
        ]
    },
    options: {
        responsive: false,
        legend: {
            display: true,
            labels: {
                fontSize: 0,
                padding: 0,
                boxWidth: 0,
            },
        },
        title: {
            display: false
        },
        scales:{
            xAxes:[{ 
                stacked: true
            }],
            yAxes:[{ 
                stacked: true,
                gridLines: { 
                    display: false, 
                    drawBorder: false,
                },
            }]
        }
        // 移除无效的elements.rectangle配置
    }
});

说明 #

• 插件逻辑：仅给堆叠柱状图的最左侧（第一个数据集）和最右侧（最后一个数据集）添加圆角，避免中间堆叠部分出现圆角导致视觉重叠
• 可调整参数：修改borderRadius的值可以改变圆角大小
• 背景色处理：保持原代码的颜色循环逻辑，适配多标签场景

内容的提问来源于stack exchange，提问作者Lee.Do.Do