antvG2可视化引擎库，更轻量级的可视化开发选择

本文链接：https://blog.csdn.net/qq_43305958/article/details/108917371

本文介绍了G2可视化引擎，它是一个面向统计图表的数据驱动的图形语法库。通过简单步骤，展示了如何引入库、创建图表容器及绘制柱状图。同时，阐述了图形语法、交互语法等基础概念，包括数据、图形属性、几何标记、度量、坐标系和组件等，为读者提供了全面的G2使用指南。

摘要由CSDN通过智能技术生成

antvG2可视化引擎库，更轻量级的可视化开发选择

一、G2 可视化引擎
二、使用步骤
三、基础概念概括
总结

一、G2 可视化引擎

G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

二、使用步骤

1.引入库

代码如下（示例）：

npm install @antv/g2 --save

2.使用案例

1. 创建 div 图表容器

<div id="c1"></div>

2. 编写图表绘制代码

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

1.创建 Chart 图表对象，指定图表所在的容器 ID、图表的宽高、边距等信息；
2.载入图表数据源；
3.使用图形语法进行图表的绘制；
4.渲染图表。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>柱状图</title>
    <!-- 引入 G2 文件 -->
    <script src="{{ url.g2 }}"></script>
  </head>
  <body>
    <!-- 创建图表容器 -->
    <div id="c1"></div>
    <script>
      const data = [
        { genre: 'Sports', sold: 275 },
        { genre: 'Strategy', sold: 115 },
        { genre: 'Action', sold: 120 },
        { genre: 'Shooter', sold: 350 },
        { genre: 'Other', sold: 150 },
      ];

      // Step 1: 创建 Chart 对象
      const chart = new G2.Chart({
        container: 'c1', // 指定图表容器 ID
        width: 600, // 指定图表宽度
        height: 300, // 指定图表高度
      });

      // Step 2: 载入数据源
      chart.data(data);

      // Step 3：创建图形语法，绘制柱状图
      chart.interval().position('genre*sold');

      // Step 4: 渲染图表
      chart.render();
    </script>
  </body>
</html>

三、基础概念概括

图形语法

数据 Data：可视化最基础的部分。
图形属性 Attribute：负责将数据中的变量映射至图形空间。
几何标记 Geometry：即你在图表中实际看到的图形元素，如点、线、多边形等，每个几何标记对象含有多个图形属性，G2 的核心就是建立数据中的一系列变量到图形属性的映射。
度量 Scale：数据空间到图形属性空间的转换桥梁，每一个图形属性都对应着一个或者多个度量。
坐标系 Coordinate：描述了数据是如何映射到图形所在的平面的，同一个几何标记在不同坐标系下会有不同的表现。G2 提供了多种坐标系的支持：笛卡尔坐标、极坐标以及螺旋坐标等。
可视化组件 Component：也可以成为图表辅助元素，用于增强图表的可读性和可理解性，在 G2 中，提供了丰富的可视化组件，包括坐标轴 Axis，图例 Legend，提示信息 Tooltip，图形标记 Annotation，滑动条 Slider 等。
分面 Facet：描述了如何将数据分解为各个子集，以及如何对这些子集作图并联合进行展示，主要用于多维数据分析。