快速上手

    成功安装完成之后，即可使用 或 require 进行引用。

    1. import { Chart } from '@antv/g2';
    3. const chart = new Chart({
    4.   container: 'c1',
    5.   width: 600,
    6.   height: 300,
    7. });

    浏览器引入

    既可以通过将脚本下载到本地也可以直接引入在线资源：

    1. <!-- 引入本地脚本 -->
    2. <script src="./g2.js"></script>

    在 G2 引入页面后，我们就已经做好了创建第一个图表的准备了。

    下面是以一个基础的柱状图为例开始我们的第一个图表创建。

    1. 创建 div 图表容器

    2. 编写图表绘制代码

    创建 div 容器后，我们就可以进行简单的图表绘制：

    • 创建 Chart 图表对象，指定图表所在的容器 ID、图表的宽高、边距等信息；
    • 载入图表数据源；
    • 使用图形语法进行图表的绘制；
    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8" />
    6.     <!-- 引入 G2 文件 -->
    7.     <script src="{{ url.g2 }}"></script>
    8.   </head>
    9.   <body>
    10.     <!-- 创建图表容器 -->
    11.     <div id="c1"></div>
    12.     <script>
    13.       const data = [
    14.         { genre: 'Sports', sold: 275 },
    15.         { genre: 'Strategy', sold: 115 },
    16.         { genre: 'Action', sold: 120 },
    17.         { genre: 'Shooter', sold: 350 },
    18.         { genre: 'Other', sold: 150 },
    19.       ];
    21.       const chart = new G2.Chart({
    22.         container: 'c1', // 指定图表容器 ID
    23.         width: 600, // 指定图表宽度
    24.         height: 300, // 指定图表高度
    25.       });
    27.       // Step 2: 载入数据源
    28.       chart.data(data);
    30.       // Step 3：创建图形语法，绘制柱状图
    31.       chart.interval().position('genre*sold');
    33.       // Step 4: 渲染图表
    34.       chart.render();
    35.     </script>
    37. </html>

    这样，你的第一个柱状图就绘制完成了! 你也可以进入 G2 图表示例页面查看更多例子。

    • BizCharts 地址：