试图扩展图表，以便我可以绘制数据点的线条，但这发生在默认动画之前.以后再涂会更流畅.

trying to extend a chart, so that i can draw lines up to the data point, but this is happening before the default animation. it would look smoother if it applied after.

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

i have got most of it to work.. but how do i get this to apply after chart animation.

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 不正确，但动画后仍在播放

altho the darw is incorrect it still is playing after animation

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

推荐答案

我做了一些小改动(不直观！)，现在动画之后出现了竖线.

I made some small changes (non-intuitive!), and the vertical lines now appear after the animation.

从元数据而不是数据中获取 x 值.要么:

Get the x values from the metadata instead of the data. Either:

var x_point = element._model.x;

或:

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

将绘图包裹在 if(!hidden){} 中，则垂直线将消失并与数据一起重新出现.(如果数据开始隐藏，三元赋值会修复冲突)

Wrap the drawing in if(!hidden){}, then the vertical lines will disapear and reappear with the data. (The ternary assignment fixes a clash if the data starts hidden)

你需要 value=max[i] 吗?如果只是将线绘制到点，可以获得与 x 相同的 y_point.

Do you need the value=max[i]? If just drawing the line up to the points, can get the y_point the same as for x.

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

                });
            }
       });