chart.js 动态折线图

Chart.js 是一个流行的 JavaScript 库，用于在网页上创建交互式图表。它支持多种图表类型，包括折线图、柱状图、饼图等。动态折线图是指数据可以实时更新并反映在图表上的折线图。

基础概念

Canvas API：Chart.js 使用 HTML5 的 Canvas 元素来绘制图表。
数据集（Dataset）：包含一组数据的集合，用于在图表中显示。
标签（Labels）：通常表示时间轴上的点或类别。
数据点（Data Points）：图表中的具体数值。

优势

轻量级：Chart.js 是一个非常轻量级的库，易于集成到项目中。
高度可定制：提供了丰富的配置选项，允许开发者自定义图表的外观和行为。
交互性：支持鼠标悬停提示、缩放和拖动等交互功能。
响应式设计：图表能够自动适应不同屏幕尺寸。

类型

简单折线图：基本的折线图，显示单一数据系列。
多条折线图：同时显示多个数据系列的折线图。
带标记的折线图：数据点上有明显的标记，便于识别。

应用场景

实时监控系统：如服务器性能监控、股票价格跟踪。
数据分析报告：展示历史数据和趋势分析。
项目管理工具：跟踪任务进度和时间表。

示例代码

以下是一个简单的动态折线图的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Line Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        let myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Dynamic Dataset',
                    data: [],
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        function addData(chart, label, data) {
            chart.data.labels.push(label);
            chart.data.datasets.forEach((dataset) => {
                dataset.data.push(data);
            });
            chart.update();
        }

        setInterval(() => {
            const newData = Math.floor(Math.random() * 100);
            addData(myChart, new Date().toLocaleTimeString(), newData);
        }, 1000);
    </script>
</body>
</html>