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