是否可以导出带有动画的Chart.js图表？

Question

我想知道是否有办法导出我的 Chart.js 动画。我创建了一个统计网站，并向条形图添加了“延迟”动画。您可以在此处查看示例：https://scrapifier.com/no_rbex .

我很想将此图下载为视频，但从我在网上找到的内容来看，似乎没有一个简单的方法可以做到这一点。

有谁知道这是否可能，如果可以，我该如何实现？

非常感谢您的帮助！

这是图形代码（如果有任何帮助的话）：

const ctx2 = document.getElementById('followerGrowthChart').getContext('2d');
const visibleBarsCount = Math.min(formattedTimestamps.length, 30); // Calculate the number of visible bars (up to 30 or less)
const startIndex = formattedTimestamps.length - visibleBarsCount; // Calculate the start index based on the number of visible bars
const followerGrowthChart = new Chart(ctx2, {
    type: 'bar',
    data: {
        labels: formattedTimestamps,
        datasets: [{
            label: 'Total Follower Gain',
            data: barData, // Use modified data with minimum height for zero values
            backgroundColor: backgroundColors, // Array of colors
            borderColor: backgroundColors, // Match border color with background color

            pointRadius: 5,
            fill: true, // Ensure bars are filled
        }],
    },
    options: {
        animation: {
            onComplete: () => {
                delayed = true;
            },
            delay: (context) => {
                let delay = 0;
                if (context.type === 'data' && context.mode === 'default' && !delayed) {
                    // Adjust delay calculation based on the number of visible bars
                    delay = (context.dataIndex - startIndex) * 300 + context.datasetIndex * 100;
                }
                return delay;
            },
        },
        scales: {
            y: {
                grid: {
                    color: 'rgba(185, 187, 190, 0.1)'
                },
                ticks: {
                    precision: 0
                }
            },
            x: {
                grid: {
                    color: 'rgba(185, 187, 190, 0.1)'
                },
                max: formattedTimestamps[formattedTimestamps.length - 1], // Last timestamp
                min: formattedTimestamps[startIndex] // Use the start index to set the minimum timestamp
            }
        },
        responsive: true,
        maintainAspectRatio: false
    },
});

再次感谢您！

尝试使用chatGPT了解是否有办法做到这一点并在线搜索任何视频。

Answer 1

也许您可以使用此答案中的一些代码来实现您的目标？

抓取 HTML5 画布的每一帧

这不是我真正了解的事情，所以如果这没有帮助，我深表歉意。