如何通过ng2-charts angular使用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;
                    }
                })
            })
        }
    }
});

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

这个例子是我的 angular 项目的演示。我在这里有水平条形图。我已经搜索了很多天来在 ng2 图表上实现这个圆角功能，但我无法通过 angular 访问该自定义方法ng2-charts。如果有人能提出我的 stackblitz 示例来展示它应该如何实现，我将非常高兴。

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

Answer 1

This answer to a similar question提供了出色的代码，可与ng2-charts一起用于 Angular 。 它使用Chart.elements.Rectangle.prototype.draw function。 我稍微调整了它以适应您的需求。

请看下面的StackBlitz 。