如何利用Chart.js创建动态变化的折线图？

Chart.js 动态折线图

1. 引入 Chart.js

在 HTML 文件中引入 Chart.js 库，你可以通过 CDN 或本地文件来引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态折线图</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script>
        // JavaScript 代码将放在这里
    </script>
</body>
</html>

2. 初始化图表

使用 JavaScript 初始化一个基本的折线图。

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Dataset 1',
            data: [65, 59, 80, 81, 56, 55, 40],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

3. 动态更新数据

为了实现动态更新，你可以使用update() 方法来重新渲染图表。

1 更新数据点

假设你有一些新数据需要更新到图表中。

function updateChartData(newData) {
    myChart.data.datasets.forEach((dataset) => {
        dataset.data = newData;
    });
    myChart.update();
}
// 示例调用
updateChartData([75, 69, 85, 88, 60, 55, 45]);

2 添加新的数据点

你也可以向现有的数据集添加新的数据点。

function addDataPoint(newPoint) {
    myChart.data.labels.push('August'); // 添加标签
    myChart.data.datasets.forEach((dataset) => {
        dataset.data.push(newPoint);
    });
    myChart.update();
}
// 示例调用
addDataPoint(50);

4. 完整示例代码

以下是一个完整的示例，包含初始图表和动态更新功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态折线图</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <button onclick="updateChartData([75, 69, 85, 88, 60, 55, 45])">更新数据</button>
    <button onclick="addDataPoint(50)">添加数据点</button>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'Dataset 1',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
        function updateChartData(newData) {
            myChart.data.datasets.forEach((dataset) => {
                dataset.data = newData;
            });
            myChart.update();
        }
        function addDataPoint(newPoint) {
            myChart.data.labels.push('August'); // 添加标签
            myChart.data.datasets.forEach((dataset) => {
                dataset.data.push(newPoint);
            });
            myChart.update();
        }
    </script>
</body>
</html>