javascript - Chart.js v2 覆盖绘制函数

Question

我使用的是chart.js 2.6.0，这是最新版本。

我正在尝试覆盖条形图以使 Angular 变圆。我找到了这个脚本:https://github.com/jedtrow/Chart.js-Rounded-Bar-Charts/blob/master/Chart.extentions.js而且效果很好。

我创建了一个新的图形选项:“is_curved”，因为我在同一页面上有多个图形，并且我只想为其中一些图形制作圆 Angular 。

我的情况的问题是，如果我使用以下代码，所有图表都有圆 Angular :

Chart.elements.Rectangle.prototype.draw = function() {
    //code to make corners rounded
}

功能:

Chart.elements.Rectangle.prototype.draw

在所有图表上调用。我希望它仅在选项“is_curved”设置为 true 时执行。所以我尝试了:

Chart.elements.Rectangle.prototype.draw = function() {
    if(!this._chart.options.is_curved) {
        return;
    }
    //code to make corners rounded
}

但这仍然是错误的，因为没有将“is_curved”选项设置为 true 的图形是空的，我想我调用 .draw 方法的事实会删除所有现有的功能，即使我不'不要为它们添加新功能。

知道如何将绘制函数设置为仅适用于“is_curved”选项设置为 true 的图表吗？谢谢。

Answer 1

更改这行代码:

var cornerRadius = 5;

对此:

var cornerRadius = this._chart.options.is_curved ? 5 : 0;

这会将栏的圆 Angular 半径设置为 5 ，如果 is_curved 属性设置为 true 对于任何特定图表，否则将设置为 0 .

参见 - working example on JSFiddle