Javascript 如何自定义图表js条形图形状？

如何更改Chart Js的条形图形状，使其顶部和底部都像这张图片一样尖锐

---

获取三角形的一种方法是制作一个堆叠图表，并在顶部添加一个折线图。为了保持反应性，您需要动态调整线数据上的pointRadius大小

或者在chart.js的第4640行上，您可以将element_rectangle draw函数更改为：

draw: function() {
        var ctx = this._chart.ctx;
        var vm = this._view;
        var rects = boundingRects(vm);
        var outer = rects.outer;
        var inner = rects.inner;

        //ctx.fillStyle = vm.backgroundColor;
        //ctx.fillRect(outer.x, outer.y, outer.w, outer.h);

        if (outer.w === inner.w && outer.h === inner.h) {
            return;
    }
    
    let offset = outer.w / 2;

        ctx.save();
    ctx.beginPath();
    
    ctx.moveTo(outer.x, outer.y);
    ctx.lineTo(outer.x, outer.y + outer.h);
    ctx.lineTo(outer.x + offset, outer.y + outer.h + offset);
    //ctx.lineTo(outer.x + offset, outer.y + outer.h);
    ctx.lineTo(outer.x + outer.w, outer.y + outer.h);
    ctx.lineTo(outer.x + outer.w, outer.y);
    ctx.lineTo(outer.x + offset, outer.y - offset);
    ctx.lineTo(outer.x, outer.y);
    ctx.stroke();


        //ctx.rect(outer.x, outer.y, outer.w, outer.h);
         ctx.clip();
         ctx.fillStyle = vm.borderColor;
        // ctx.rect(inner.x, inner.y, inner.w, inner.h);
         ctx.fill('evenodd');
        ctx.restore();
    },

这就产生了：

更可能从源代码导入chart.js，您需要制作自己的图表类型作为条形图的扩展

(function(Chart) {
  var helpers = Chart.helpers;

    Chart.defaults.triBar = {
        hover: {
            mode: "label"
        },
    dataset: {
      categoryPercentage: 0.8,
      barPercentage: 0.9
    },
        scales: {
            xAxes: [{
                type: "category",
                // grid line settings
                gridLines: {
                    offsetGridLines: true
                }
            }],
            yAxes: [{
                type: "linear"
            }]
        }
    };


  Chart.controllers.triangleBar = Chart.controllers.bar.extend({           
    
    //  
    //  extend element_rectangle draw function here
    //

  });    
}).call(this, Chart);

---

在这里，您可以看到关于圆角的信息。您可以尝试通过修改此（chart.types.bar.extend）来扩展条形图。这里是从上面链接的问题衍生出来的另一个问题：试试这个。它有助于在Chart.js条形图上进行圆角处理