

お世話になっております。

chart.js v2.7.2 を使っています。

その際、任意の位置にfillrect()などで描画をオーバーレイしたいのですが、  
インタラクティブに動作させることが出来ません。

見よう見まねで以下のように実装してみましたが、図形は描画されるものの、  
変数(posZoomLeft等)を変更しても、関数が再評価されないので、値が更新されません。

[code]

    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; 
    
[/code]

出来ればchart.jsそのものは弄る事無く実現したいのですが、  
何か方法があればアドバイスいただけませんでしょうか。

よろしくお願いします。


CC BY-SA 4.0
2018-05-07T02:19:44.400
43830
2018-05-07T02:19:44.400
28141
question
javascript chart.js
chart.js上でインタラクティブに図形を表示したい