js 折线图

// 使用 Chart.js 库绘制折线图的示例代码

// 首先需要引入 Chart.js 库，可以通过 CDN 引入
// <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

// HTML 中定义一个 canvas 元素用于绘制图表
// <canvas id="myChart" width="400" height="200"></canvas>

// JavaScript 代码如下：
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line', // 设置图表类型为折线图
    data: {
        labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'], // X 轴标签
        datasets: [{
            label: '销售额 (万元)', // 数据集标签
            data: [12, 19, 3, 5, 2, 3, 8], // 数据点
            backgroundColor: 'rgba(75, 192, 192, 0.2)', // 填充颜色
            borderColor: 'rgba(75, 192, 192, 1)', // 线条颜色
            borderWidth: 1 // 线条宽度
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true // Y 轴从 0 开始
            }
        }
    }
});

// 解释说明：
// 1. 需要引入 Chart.js 库。
// 2. 在 HTML 中定义一个 canvas 元素用于绘制图表。
// 3. 使用 Chart 构造函数创建一个新的折线图实例。
// 4. `type` 设置为 'line' 表示绘制折线图。
// 5. `data` 包含了 X 轴标签和数据集。
// 6. `options` 可以配置图表的各种样式和行为，例如 Y 轴从 0 开始。