如何使用Chart JS将柱状图转换为三角形形状的图表

可以通过Chart.js的自定义插件能力修改默认柱体的绘制逻辑，无需修改源码即可将矩形柱体替换为三角形，完整修改后的代码如下：

var ctx = document.getElementById('myChart');
// 自定义三角形柱体插件
const triangleBarPlugin = {
  id: 'triangleBar',
  beforeDatasetDraw: (chart, args) => {
    const { ctx, chartArea } = chart;
    const dataset = chart.data.datasets[args.index];
    // 遍历当前数据集的所有柱体元素
    chart.getDatasetMeta(args.index).data.forEach(bar => {
      const { x, y, width } = bar;
      // 覆盖默认的矩形绘制方法
      bar.draw = () => {
        ctx.save();
        // 复用原有配置的样式参数
        ctx.fillStyle = dataset.backgroundColor[bar.dataIndex];
        ctx.strokeStyle = dataset.borderColor[bar.dataIndex];
        ctx.lineWidth = dataset.borderWidth;
        // 绘制等腰三角形
        ctx.beginPath();
        ctx.moveTo(x - width/2, chartArea.bottom); // 左下角点：取原柱体底边左端点
        ctx.lineTo(x + width/2, chartArea.bottom); // 右下角点：取原柱体底边右端点
        ctx.lineTo(x, y); // 顶部点：取原柱体顶部中心点
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        ctx.restore();
      }
    });
  }
};

var myChart = new Chart(ctx, {
    type: 'bar',
    plugins: [triangleBarPlugin], // 注册自定义插件
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

关键说明 #

• 上述代码适配Chart.js 3.x、4.x版本，坐标逻辑直接复用Chart.js内部计算好的柱体位置参数，无需手动适配坐标轴刻度
• 如果需要支持负值数据，只需要增加数据正负判断，调整三角形顶点的方向即可
• 所有样式参数完全复用原有配置，不需要额外修改数据集定义

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