Chart.js 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();
            }
        }
    }
});

var originalLineDraw=Chart.controllers.line.prototype.draw；
Chart.helpers.extend（Chart.controllers.line.prototype{
绘图：函数（）{
应用（这个，参数）；
var chart=this.chart；
var ctx=chart.chart.ctx；
var index=chart.config.data.lineAtIndex；
如果（索引）{
var xaxis=图表刻度['x轴-0']；
var yaxis=图表刻度['y轴-1']
var points=this.chart.getDatasetMeta（this.index）.data；
对于（变量i=0；i

更新…

虽然黑暗是不正确的，它仍然是动画后播放

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

var verticalLinePlugin={
RenderTicaline:函数（chartInstance）{
var-chart=chartInstance；
var ctx=chart.chart.ctx；
var maxpoint=[]；
//循环数据集
对于（变量y=0；y点y）{
点y=点y；
}
}
}
}
var xaxis=图表刻度['x轴-0']；
var yaxis=图表刻度['y轴-1']
chart.data.dataset.forEach（函数（dataset，i）{
var-ds=数据集；
var meta=chart.getDatasetMeta（i）；
meta.data.forEach（函数（元素、索引）{
var值=最大点[i]；
ctx.beginPath（）；
ctx.setLineDash（[5,5]）；
ctx.moveTo（xaxis.getPixelForValue（未定义，i），value.y）；
ctx.strokeStyle='#fff'；
ctx.lineTo（xaxis.getPixelForValue（未定义，i），yaxis.bottom）；
ctx.stroke（）；
});
});
},
afterRender:函数（图表）{
本品为苯妥替卡林（图表）；
}
};
Chart.plugins.register（verticalLinePlugin）；

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

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

从元数据而不是数据中获取x值。 要么：

var x_point = element._model.x;

或：

如果（！hidden）{}将图形包装在

中，则垂直线将消失并与数据一起重新显示。（如果数据开始隐藏，三元指定将修复冲突）

是否需要值=max[i]？如果只是画点的直线，可以得到与x相同的y_点

我做了一些小改动（非直观！），现在垂直线显示在动画之后

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

从元数据而不是数据中获取x值。 要么：

var x_point = element._model.x;

或：

如果（！hidden）{}将图形包装在

中，则垂直线将消失并与数据一起重新显示。（如果数据开始隐藏，三元指定将修复冲突）

是否需要值=max[i]？如果只是画点的直线，可以得到与x相同的y_点