如何自定义图表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);