Chartjs如何在动画后应用

尝试扩展图表，以便我可以绘制线条直到数据点，但这是在默认动画之前发生的。如果之后涂抹的话会看起来更光滑。

我已经完成了大部分工作..但是我如何在图表动画之后应用它。

var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
    draw: function () {
        originalLineDraw.apply(this, arguments);
        var chart = this.chart;
        var ctx = chart.chart.ctx;
        var index = chart.config.data.lineAtIndex;
        if (index) {
            var xaxis = chart.scales['x-axis-0'];
            var yaxis = chart.scales['y-axis-1']
            var points = this.chart.getDatasetMeta(this.index).data;
            for (var i = 0; i < points.length; i++) {
               // var point_x = points[i]._model.x;
                var point_y = points[i]._model.y;
                ctx.beginPath();
                ctx.setLineDash([5, 5]);/*dashes are 5px and spaces are 3px*/
                ctx.moveTo(xaxis.getPixelForValue(undefined, i), point_y);
                ctx.strokeStyle = '#fff';
                ctx.lineTo(xaxis.getPixelForValue(undefined, i), yaxis.bottom);
                ctx.stroke();
            }
        }
    }
});

更新...

尽管 darw 不正确，但它仍在动画后播放

var verticalLinePlugin = {

    renderVerticalLine: function (chartInstance) {

        var chart = chartInstance;
        var ctx = chart.chart.ctx;
        var maxpoint = [];

        //loop the datasets
        for (var y = 0; y < chart.config.data.datasets.length; y++) {
            var dataset = chart.config.data.datasets[y];
            if (dataset.hidden)
                continue;
            var points = chart.getDatasetMeta(y).data;
            for (var i = 0; i < points.length; i++) {
                var point_y = points[i]._model.y;
                if (point_y < 0)
                    continue;
                var point = maxpoint[i];
                if (point == undefined) {
                    maxpoint.push({ id: i, y: point_y });
                } else {
                    if (point.y > point_y) {
                        point.y = point_y;
                    }
                }
            }
        }

        var xaxis = chart.scales['x-axis-0'];
        var yaxis = chart.scales['y-axis-1']

        chart.data.datasets.forEach(function (dataset, i) {
            var ds = dataset;
            var meta = chart.getDatasetMeta(i);
            meta.data.forEach(function (element, index) {

                var value = maxpoint[i];

                ctx.beginPath();
                ctx.setLineDash([5, 5]);
                ctx.moveTo(xaxis.getPixelForValue(undefined, i), value.y);
                ctx.strokeStyle = '#fff';
                ctx.lineTo(xaxis.getPixelForValue(undefined, i), yaxis.bottom);
                ctx.stroke();

            });


        });
    },

    afterRender: function (chart) {
        this.renderVerticalLine(chart);
    }
};
Chart.plugins.register(verticalLinePlugin);

我做了一些小更改（不直观！），垂直线现在出现在动画之后。

1. 从元数据而不是数据中获取 x 值。 任何一个：

   var x_point = element._model.x;
   

   or:

    var position = element.tooltipPosition();
    var x_point = position.x;
   

2. 把图包起来if(!hidden){}，然后垂直线将消失并与数据一起重新出现。 （三元赋值修复了数据开始隐藏时的冲突）

3. 您需要 value=max[i] 吗？如果只是画线到点，可以得到与 x 相同的 y_point。

        var xaxis = chart.scales['x-axis-0'];
        var yaxis = chart.scales['y-axis-1'];

        chart.data.datasets.forEach(function (dataset, i) {

            var meta = chart.getDatasetMeta(i);
            var hidden = (meta.hidden != undefined) ? meta.hidden : dataset.hidden

            if(!hidden){
                meta.data.forEach(function (element, index) {

                    //var value = maxpoint[i];
                    var x_point = element._model.x;
                    var y_point = element._model.y;

                    ctx.beginPath();
                    ctx.save();
                    ctx.setLineDash([5, 5])
                    ctx.strokeStyle = '#fff';
                    ctx.moveTo(x_point, y_point); // or value.y
                    ctx.lineTo(x_point, yaxis.bottom)
                    ctx.stroke();
                    ctx.restore();

                });
            }
       });