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/을하지만 내가 필요하면 웹 페이지에서 버튼을 클릭하면 다른 인덱스에 라인을 이동하는 것입니다 :

나는 이것을 사용하고 있습니다. 나는 html 캔버스에 대해 읽었을 때 라인을 지우는 것이 불가능하다는 것을 알았지 만 그걸 찾았습니다 : https://jsfiddle.net/ombaww9t/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);