Chart.js拡張用の新しい構文は何ですか？

Question

Chart.jsのコードサンプルを見て、私は次のJSFiddle（http://jsfiddle.net/dbyze2ga/14/）を見つけました。 私はこれを私のIDE（brackets.io）にコピーしたとき、jsfiddleがcha​​rt.js 1.x.xを使用していることに気づくまで動作しませんでした。

v2.0を使用してグラフを拡張するための現在の構文は何ですか？私はドキュメントをチェックしようとしました。それは正直に私をさらに混乱させてしまった。少なくともブラケットの場合は、チャートにとって本当に便利なドット補完は表示されません。

問題のJSコードは次のとおりです。

var data = { 
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"], 
    datasets: [{ 
     data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1] 
    }] 
}; 

var ctx = document.getElementById("LineWithLine").getContext("2d"); 

Chart.types.Line.extend({ 
    name: "LineWithLine", 
    draw: function() { 
     Chart.types.Line.prototype.draw.apply(this, arguments); 

     var point = this.datasets[0].points[this.options.lineAtIndex] 
     var scale = this.scale 

     // draw line 
     this.chart.ctx.beginPath(); 
     this.chart.ctx.moveTo(point.x, scale.startPoint + 24); 
     this.chart.ctx.strokeStyle = '#ff0000'; 
     this.chart.ctx.lineTo(point.x, scale.endPoint); 
     this.chart.ctx.stroke(); 

     // write TODAY 
     this.chart.ctx.textAlign = 'center'; 
     this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12); 
    } 
}); 

new Chart(ctx).LineWithLine(data, { 
    datasetFill : false, 
    lineAtIndex: 2 
}); 

Answer 1

2.0の変更がdocumentationで説明されています：

var myLineExtend = Chart.controllers.line.prototype.draw; 
 

 
var ctx = document.getElementById("LineWithLine").getContext("2d"); 
 

 
var config = { 
 
    type: 'line', 
 
    data: { 
 
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"], 
 
    datasets: [{ 
 
     data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1] 
 
    }], 
 
    datasetFill : false, 
 
    lineAtIndex: 2 
 
    } 
 
}; 
 

 
Chart.helpers.extend(Chart.controllers.line.prototype, { 
 
    draw: function() { 
 
    
 
     myLineExtend.apply(this, arguments); 
 

 
     var chart = this.chart; 
 
     var ctx = chart.chart.ctx; 
 

 
     var index = chart.config.data.lineAtIndex; 
 
     var xaxis = chart.scales['x-axis-0']; 
 
     var yaxis = chart.scales['y-axis-0']; 
 

 
     ctx.save(); 
 
     ctx.beginPath(); 
 
     ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top + 24); 
 
     ctx.strokeStyle = '#ff0000'; 
 
     ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom); 
 
     ctx.stroke(); 
 
     ctx.restore(); 
 

 
     ctx.textAlign = 'center'; 
 
     ctx.fillText("TODAY", xaxis.getPixelForValue(undefined, index), yaxis.top + 12); 
 

 
    } 
 
}); 
 

 
new Chart(ctx, config);

<script src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.bundle.min.js"></script> 
 
<canvas id="LineWithLine"></canvas>