具有单独数据集标签的Chart.js 2折线图

基础概念

Chart.js 是一个基于 HTML5 Canvas 的 JavaScript 图表库，用于创建各种类型的图表，包括折线图、柱状图、饼图等。Chart.js 2 是该库的一个版本，提供了丰富的配置选项和灵活的数据展示方式。

类型

在 Chart.js 2 中，折线图是一种常见的图表类型，用于展示随时间变化的数据趋势。它通过连接各个数据点形成一条或多条折线，从而直观地展示数据的增减变化。

应用场景

折线图广泛应用于各种需要展示数据趋势的场景，如股票价格走势、气温变化、销售数据统计等。

示例代码

以下是一个使用 Chart.js 2 创建具有单独数据集标签的折线图的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chart.js 2 Line Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var 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],
                    borderColor: 'rgba(255, 99, 132, 1)',
                    fill: false
                }, {
                    label: 'Dataset 2',
                    data: [28, 48, 40, 19, 86, 27, 90],
                    borderColor: 'rgba(54, 162, 235, 1)',
                    fill: false
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    </script>
</body>
</html>