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

Example 1

上面的代码在Windows上可以正常工作，但是我在Mac设备上遇到问题。从左到右动画显示数据不正确意味着数据从x轴向上移动。如何解决此问题？我要附加屏幕截图。

Screenshot

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

Chart.js使X轴动画化，无法在Mac设备中正确显示数据

1 个答案: