前言

G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

快速上手

特性

● 简单、易用
● 完备的可视化编码
● 强大的扩展能力

安装

浏览器引入

<!-- 引入CDN资源 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>

npm 安装

npm install @antv/g2 --save

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

import G2 from '@antv/g2';const chart = new G2.Chart({container: 'bar',width: 600,height: 300
});

开始使用

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

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

浏览器引入方式

1. 创建 div 图表容器

在页面的 body 部分创建一个 div，并制定必须的属性 id：

<div id="bar"></div>

2. 编写图表绘制代码

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

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

这部分代码用 <script></script>，可以放在页面代码的任意位置（最好的做法是放在之前）。

const data = [{ genre: 'Sports', sold: 275 },{ genre: 'Strategy', sold: 115 },{ genre: 'Action', sold: 120 },{ genre: 'Shooter', sold: 350 },{ genre: 'Other', sold: 150 }
]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
// Step 1: 创建 Chart 对象
const chart = new G2.Chart({container: 'c1', // 指定图表容器 IDwidth : 600, // 指定图表宽度height : 300 // 指定图表高度
});
// Step 2: 载入数据源
chart.source(data);
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart.interval().position('genre*sold').color('genre')
// Step 4: 渲染图表
chart.render();

完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>柱状图</title><!-- 引入 G2 文件 --><!-- 引入在线资源 --><script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></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 }]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。// Step 1: 创建 Chart 对象const chart = new G2.Chart({container: "c1", // 指定图表容器 IDwidth: 600, // 指定图表宽度height: 300 // 指定图表高度});// Step 2: 载入数据源chart.source(data);// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴chart.interval().position("genre*sold").color("genre");// Step 4: 渲染图表chart.render();</script></body>
</html>

在线代码

在线代码地址：https://codesandbox.io/s/modest-hertz-e8gt8s?file=/index.html

AntV可视化图表G2-柱状图相关推荐

可视化图表组件体系的构建（内附全套开源文件）
Part01 -------- 前言 EasyV作为一个低代码数字孪生可视化搭建平台,其图表组件作为可视化项目建设的基础构成发挥着重要的作用. 经过多年可视化项目交付经验,沉淀了一套形态多样.样式精细 ...
itextpdf 表格跨行跨列与可视化图表
文章目录 itextpdf 表格跨行跨列与可视化图表效果图普通表格一(表头背景色) 普通表格二 (隔列变色) 表格跨行跨列可视化图表使用示例普通表格一(表头背景色) 普通表格二 (隔列变色) ...
D3 vs G2 vs Echarts以及其他可视化图表
初次接触 web 图表开发的工程师,面对众多的可视化工具库难免会有疑惑,比如说: 这库的产品定位? 哪个更好学? 哪个更强大? 让我们带着问题,从这三个库的命名出发,比较一下: Echarts 简述: ...
echarts legend颜色_echarts数据可视化图表（二）：双柱状图
echarts数据可视化图表(二):双柱状图效果图: html js var loadEcharts09 = function () { var myChartss = echarts.init(d ...
echarts数据可视化图表（二）：双柱状图
echarts数据可视化图表(二):双柱状图效果图: html <script src="js/4.2.1/echarts.min.js"></script&g ...
数据可视化之动态柱状图图表
数据可视化之动态柱状图图表这几天在B站看到了一个宝藏UP主Jannchie见齐,在网上找到了框架源码并学习.以下是可视化过程. 框架鸣谢B站UP主:Jannchie见齐框架GItHub:https ...
axure pr动态可视化元件库在哪有_axChart_动态可视化图表元件库v1.2.3
提示:作品中演示文档为axure9版本制作,下载后请使用文件夹中的rplib格式的元件库,支持Axure8和9,请知晓: axChart,一套支持Axure RP8/9的动态可视化图表元件库.元件的能 ...
蚂蚁金服新一代数据可视化引擎 G2
新公司已经呆了一个多月,目前着手一个数据可视化的项目,数据可视化肯定要用到图形库如D3.Highcharts.ECharts.Chart等,经决定我的这个项目用阿里旗下蚂蚁金服所开发的G2图表库. 官 ...
蚂蚁金服数据可视化引擎 G2 4.0 正式版发布！
G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法. 经历了为期半年的大规模底层重构和开发迭代,G2 4.0 终于和大家见面了.作为继 2017 年 11 月 22 日 G2 3.0 正式 ...

AntV可视化图表G2-柱状图

文章目录

前言