Chart.js v2 覆盖绘制函数答案

【问题标题】：Chart.js v2 overwrite draw functionChart.js v2 覆盖绘制函数
【发布时间】：2017-08-04 04:26:31
【问题描述】：

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

我正在尝试覆盖条形图以使角变圆。我找到了这个脚本：https://github.com/jedtrow/Chart.js-Rounded-Bar-Charts/blob/master/Chart.extentions.js，它运行良好。

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

我的问题是，如果我使用以下代码，所有图表都有圆角：

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 方法的事实删除了所有现有功能，即使我没有t 为它们添加新功能。

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

【问题讨论】：

标签： javascript jquery chart.js

【解决方案1】：

更改这行代码：

var cornerRadius = 5;

对此：

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

如果 is_curved 属性设置为 @，这会将 bar 的角半径设置为 5 987654326@ 用于任何特定图表，否则将设置为 0。

见 - working example on JSFiddle

【讨论】：

这正是我昨天修复它的方式。谢谢。