chart.js上でインタラクティブに図形を表示したい
お世話になっております。
chart.js v2.7.2 を使っています。
その際、任意の位置にfillrect()などで描画をオーバーレイしたいのですが、
インタラクティブに動作させることが出来ません。
見よう見まねで以下のように実装してみましたが、図形は描画されるものの、
変数(posZoomLeft等)を変更しても、関数が再評価されないので、値が更新されません。
Chart.defaults.derivedLine = Chart.defaults.line;
var custom = Chart.controllers.line.extend({
draw: function(ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
ctx.save();
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.strokeRect(posZoomLeft, posZoomTop, posZoomWidth, posZoomHeight);
ctx.restore();
}
});
Chart.controllers.derivedLine = custom;
出来ればchart.jsそのものは弄る事無く実現したいのですが、
何か方法があればアドバイスいただけませんでしょうか。
よろしくお願いします。