Chart.js / HTML画布-移动线

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