常见的图形库系列

常见的图形库概览-00-overview

常见的图形库概览-01-Chart.js 入门例子

常见的图形库概览-03-D3.js 入门例子

HighCharts 交互式图表-01-入门介绍

Plotly 函数图像绘制

ApexCharts 图表入门例子

Victory 图表基于 React，适合 React 项目，支持移动端

Recharts 入门例子

AntV G2 入门例子

图表库 C3.js 入门例子

图表库 Google Charts 入门例子

ECharts-01-图表库系列

入门例子

  [html]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js 入门示例</title>
    <!-- 引入 Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div style="width: 600px; height: 400px;">
        <!-- 创建一个 canvas 元素用于渲染图表 -->
        <canvas id="myChart"></canvas>
    </div>

    <script>
        // 在这里编写 Chart.js 代码
        // 获取 canvas 元素的上下文
const ctx = document.getElementById('myChart').getContext('2d');

// 创建图表
const myChart = new Chart(ctx, {
    type: 'bar', // 图表类型：柱状图
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'], // X 轴标签
        datasets: [{
            label: 'Monthly Sales', // 数据集的标签
            data: [65, 59, 80, 81, 56, 55], // 数据值
            backgroundColor: [ // 柱状图的背景颜色
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [ // 柱状图的边框颜色
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1 // 边框宽度
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true // Y 轴从 0 开始
            }
        }
    }
});
    </script>
</body>
</html>

关键点