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

Question

如何更改 Chart Js 的条形图形状，使其具有尖尖的顶部和底部，如下图所示？

Answer 1

获取三角形的一种方法是制作堆积图，并在顶部添加折线图。为了保持其反应性，您需要动态调整线条数据上的 pointRadius 的大小。https://jsfiddle.net/0mcd5s13/3/或者在 Chart.js 的第 4640 行，您可以将 element_rectangle 绘制函数更改为：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);