Chart.js/HTML Canvas - 行移動

Question

Chart.jsを使用してHTMLキャンバス上に縦線を移動する必要があります。

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();` 

http://jsfiddle.net/dbyze2ga/377/をしかし、私は必要なのは、Webページ上のボタンがクリックされたときに別のインデックスにラインを移動することです：

私はこれを使用しています。私はhtmlキャンバスについて読んだところ、行を削除するのは「不可能」だが、次にそれを見つけた：https://jsfiddle.net/ombaww9t/2/と行が動いている。

私が必要とするのはおそらくそれらの2つの例の組み合わせです。

お返事ありがとうございます。

Answer 1

私はそれをプラグインで解決します。

var verticalLinePlugin = { 
afterDraw: function(chartInstance) 
{  
    var index = weatherMainChart.config.options.verticalLine[0].x; 

    if (index) 
    { 
      if (chartInstance.options.verticalLine) 
      { 
       var canvas = chartInstance.chart; 
       var ctx = canvas.ctx; 
       var xaxis = chartInstance.scales['x-axis-0']; 
       var yaxis = chartInstance.scales['A']; 

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

Chart.pluginService.register(verticalLinePlugin);