chartjs动画后如何申请 [英] chartjs how to apply after animation

问题描述

试图扩展图表，以便可以绘制到数据点的线，但这是在默认动画之前发生的。

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

更新...

不正确的声音在动画之后仍然播放

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.

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

1. 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）{} <中/ code>，则垂直线将消失并随数据重新出现。 （如果数据开始隐藏，则三元分配可解决冲突）

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]？如果只是画线到点，则可以使y_point与x相同。

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

                });
            }
       });

这篇关于chartjs动画后如何申请的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！