如何通过ng2-charts角度使用chartJs的自定义呈现方法？

Question

我这里有一个JFiddle示例，其中的条上有圆角曲线：https://jsfiddle.net/qjae6xyp/

在条形图上您会看到顶部有曲线。下面有一种方法可以绘制这些角

Chart.types.Bar.extend({
    name: "BarAlt",
    initialize: function (data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);

        if (this.options.curvature !== undefined && this.options.curvature <= 1) {
            var rectangleDraw = this.datasets[0].bars[0].draw;
            var self = this;
            var radius = this.datasets[0].bars[0].width * this.options.curvature * 0.2;

            // override the rectangle draw with ours
            this.datasets.forEach(function (dataset) {
                dataset.bars.forEach(function (bar) {
                    bar.draw = function () {
                        // draw the original bar a little down (so that our curve brings it to its original position)
                        var y = bar.y;
                        // the min is required so animation does not start from below the axes
                        bar.y = Math.min(bar.y + radius, self.scale.endPoint - 1);
                        // adjust the bar radius depending on how much of a curve we can draw
                        var barRadius = (bar.y - y);
                        rectangleDraw.apply(bar, arguments);

                        // draw a rounded rectangle on top
                        Chart.helpers.drawRoundedRectangle(self.chart.ctx, bar.x - bar.width / 2, bar.y - barRadius + 1, bar.width, bar.height, barRadius);
                        ctx.fill();

                        // restore the y value
                        bar.y = y;
                    }
                })
            })
        }
    }
});

但是问题是我有角度的项目并使用ng2-charts。https://stackblitz.com/edit/ng2-charts-bar-template-kkmuqx?file=src/app/app.component.ts

此示例是我的有角项目的演示。这里有horizo​​ntalBar图表。我一直在寻找很多天，以便在ng2-charts上实现此圆角功能，但我无法访问该自定义方法如果有人能拿出我的stackblitz示例来说明应如何实现，我将非常高兴。

https://stackblitz.com/edit/ng2-charts-bar-template-kkmuqx?file=src/app/app.component.ts

Answer 1

此answer给类似的问题提供了出色的代码，可以与ng2-charts一起在Angular中使用。它使用Chart.elements.Rectangle.prototype.draw功能。

我在下面的StackBlitz中进行了略微调整，以适应您的需求。