Анимация оси Chartjs неправильно отображает данные в устройстве Mac

Question

Я работаю с chartjs, я пытаюсь анимировать график справа налево или слева направо при загрузке.

    var canvas = document.getElementById('chart_canvas');
var ctx = canvas.getContext('2d');

// Generate random data to plot
var DATA_POINT_NUM = 10;
var data = {
    labels: [],
    datasets: [
        {
            data: [],
        },
    ]
}
for (var i=0; i<DATA_POINT_NUM; i++) {
    data.datasets[0].data.push(Math.random()*10);
    data.labels.push(String.fromCharCode(65+i));
}

var oldDraw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function(animationFraction) {
    var animationConfig = this.chart.options.animation;
    if (animationConfig.xAxis === true) {
        var ctx = this.chart.chart.ctx;
        var hShift = (1-animationFraction)*ctx.canvas.width;
        ctx.save();
        ctx.setTransform(1, 0, 0, 1, hShift,0);
        if (animationConfig.yAxis === true) {
            oldDraw.call(this, animationFraction);
        } else {
            oldDraw.call(this, 1);
        }
        ctx.restore();
    } else if (animationConfig.yAxis === true) {
        oldDraw.call(this, animationFraction);
    } else {
        oldDraw.call(this, 1);
    }
}


var lineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: { 
        animation: { 
            duration: 5000,
            xAxis: true,
            yAxis: true,
        }
    }
});

Пример 1

Приведенный выше код прекрасно работает на Windows, но я сталкиваюсь с проблемой на устройствах Mac. Если анимация слева направо отображает данные неправильно, это означает, что данные перемещаются вверх от оси x. Как решить эту проблему?Я прилагаю скриншот.

Скриншот

Answer 1

Пожалуйста, измените setTransform на transform.Попробуйте следующий код

var canvas = document.getElementById('chart_canvas');
var ctx = canvas.getContext('2d');

// Generate random data to plot
var DATA_POINT_NUM = 10;
var data = {
    labels: [],
    datasets: [
        {
            data: [],
        },
    ]
}
for (var i=0; i<DATA_POINT_NUM; i++) {
    data.datasets[0].data.push(Math.random()*10);
    data.labels.push(String.fromCharCode(65+i));
}

var oldDraw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function(animationFraction) {
    var animationConfig = this.chart.options.animation;
    if (animationConfig.xAxis === true) {
        var ctx = this.chart.chart.ctx;
        var hShift = (1-animationFraction)*ctx.canvas.width;
        ctx.save();
        ctx.transform(1, 0, 0, 1, hShift,0);
        if (animationConfig.yAxis === true) {
            oldDraw.call(this, animationFraction);
        } else {
            oldDraw.call(this, 1);
        }
        ctx.restore();
    } else if (animationConfig.yAxis === true) {
        oldDraw.call(this, animationFraction);
    } else {
        oldDraw.call(this, 1);
    }
}


var lineChart = new Chart(ctx, {
type: 'line',
data: data,
options: { 
animation: { 
duration: 5000,
xAxis: true,
yAxis: true,
}
}
});