如何通过ng2-charts使用chartJs的自定义渲染方式angular？

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 project.And 我有水平条形图 here.I 已经搜索了很多天来在 ng2-charts 上实现这个圆角功能但是我无法通过 angular ng2-charts.I 访问该自定义方法，如果有人能提出我的 stackblitz 示例来展示它应该如何实现，我将非常高兴。

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

Answer 1

这个 answer 到一个类似的问题提供了可以在 Angular 中与 ng2-charts 一起使用的优秀代码。它使用 Chart.elements.Rectangle.prototype.draw 函数。我对其进行了微调以满足您的需求。

请看下面StackBlitz.

如何通过ng2-charts使用chartJs的自定义渲染方式angular？

How to use custom rendering methods of chartJs through ng2-charts angular?

javascript

angular

typescript

chart.js

ng2-charts