我想使用 chartjs 折线图来可视化我的数据点。 Chartjs似乎默认情况下为图形设置动画，但它不会为 x 轴上的值设置动画。 x 轴仅以离散步长移动。

有没有办法在轴上启用动画？

谢谢!

最佳答案

据我所知，ChartJS 不支持开箱即用的 x 轴动画。所以你必须破解它。有几种方法可以做到这一点，但以下方法似乎有效。

如果您想对 X 轴上的数据进行动画处理

更新图表时，会发生以下步骤:1) 绘制轴，然后 2) draw()函数被调用来绘制数据。有不同draw()不同图表类型的函数，折线图的函数是Chart.controllers.line.prototype.draw . draw()函数接受一个参数，我称之为 animationFraction ，表示动画的完整程度作为一个分数。例如，如果动画完成了 5%，则 animationFraction将是 0.05，如果动画 100% 完成(即如果图表处于最终形式)，animationFraction=1 . draw()在动画的每一步都会调用函数来更新数据显示。

然后为 x 轴设置动画的一种方法是对折线图进行猴子修补 draw()在每个绘制步骤中在水平维度上平移 Canvas 的函数:

var hShift = (1-animationFraction)*ctx.canvas.width;

ctx.save();
ctx.setTransform(1, 0, 0, 1, hShift, 0);
ctx.oldDraw.call(this, animationFraction);
ctx.restore();

var oldDraw = Chart.controllers.line.prototype.draw;

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

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

function getXAxisLabel(value) {
    try {
        var xMin = lineChart.options.scales.xAxes[0].ticks.min;
    } catch(e) {
        var xMin = undefined;
    }
    if (xMin === value) {
        return '';
    } else {
        return data.labels[value];
    }
}

var lineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: { 
        animation: false,
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom',
                ticks: {
                    min: 0,
                    max: 10,
                    callback: getXAxisLabel, // function(value) { return data.labels[value]; },
                    autoSkip: false,
                    maxRotation: 0,

                },
            }]
        }
    }
});

var xMin = 0;                   // Starting minimum value for the x-axis
var xLength = 10;               // Length of the x-axis
var animationDuration = 5000;   // Duration of animation in ms

// Calculate animation properties
var framesPerSec = 100;
var frameTime = 1000/framesPerSec;
var xStep = (DATA_POINT_NUM-xMin+xLength)/(animationDuration/1000*framesPerSec);

function nextFrame() {
    var xMax = xMin+xLength;
    if (xMax < DATA_POINT_NUM-1) {

        if (xMax+xStep > DATA_POINT_NUM-1) {
            xMax = DATA_POINT_NUM-1;
            xMin = xMax-xLength;
        }
        lineChart.options.scales.xAxes[0].ticks.min = xMin;
        lineChart.options.scales.xAxes[0].ticks.max = xMax;
        lineChart.update();
        setTimeout(nextFrame, frameTime);
        xMin += 0.1;
    }
}

nextFrame();

关于javascript - Chartjs 动画 x 轴，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38172594/