Question

每当创建类似Charts.js的条形图时，我都试图对其进行动画处理（请参见this example）。目前，我已经可以通过使用.animate()方法来使它起作用，但是可以使用一种解决方法：

将y的值设置为零来创建图
通过使用.animate()

尽管有效，但它引入了一个问题，即轴（特别是y轴）的范围错误。我的猜测是范围是在创建图时计算的，因此在我的情况下，范围是基于零数组计算的。

我已经通过计算自己的范围来解决此问题，但是我确信还有另一种方法（或者更好的方法）。

我的问题是：这是正确的方法吗？是否有更好的方法为图形设置动画，从而避免手动计算范围？

这就是我现在拥有的：

function plotWithAnimate(x, y) {
    // Zeros to set the baseline
    let zeros = new Array(y.length).fill(0);

    // This is a workaround to correctly scale the axis
    let xMin = Math.min(...x) - 1;
    let xMax = Math.max(...x) + 1;
    let yMin = Math.min(...y) - 1;
    let yMax = Math.max(...y) + 1;


    Plotly.newPlot('graph', [{
        x: x,
        y: zeros,
        type: 'bar',
    }], {
        xaxis: {
            range: [xMin, xMax]
        },
        yaxis: {
            range: [yMin, yMax]
        }
    }, {}).then(() => {
        Plotly.animate('graph', {
            data: [{y: y}],
        }, {
            transition: {
                duration: 500,
                easing: 'cubic-in-out'
            }, 
            frame: {
                duration: 500
            }
        });
    });
}

在创作过程中进行动画制作

0 个答案: