antv图例出现分页_AntV

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

同时，G2 也是 AntV 最重要的组成，始于《The Grammar of Graphics》一书描述的视觉编码语法系统(这也是 G2 项目命名的由来)。

特性

简单、易用：从数据出发，仅需几行代码就可以轻松获得想要的图表展示效果

完备的可视化编码：以数据驱动，提供了从数据到图形的完整映射

强大的扩展能力：任何图表，都可以基于图形语法灵活绘制，满足你无限的创意

示例

柱状图

完整代码：

html>

柱状图

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', // 指定图表容器 ID

width : 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();

安装

浏览器引入

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

通过 npm 安装

官方提供了 G2 npm 包，通过下面的命令即可完成安装

npm install @antv/g2 --save

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

import G2 from '@antv/g2';

const chart = new G2.Chart({

container: 'c1',

width: 600,

height: 300

});

antv图例出现分页_AntV - G2相关推荐

antv图例出现分页_2020，贴地飞行的 AntV 设计
前不久,一年一度的数据可视化产品 AntV 品牌发布日又来到,今年我们给大家带来了"贴地飞行"的 AntV 设计.为什么称之为"贴地飞行"?这一年中,AntV ...
antv图例出现分页_图例-自定义文本样式
源码复制成功复制失败全屏复制运行 F2 图表组件库 - AntV var data = [{ assetType: '债券资产', percent: 73.76, const: 'const' } ...
antv图例出现分页_带图例、文本的饼图
源码复制成功复制失败全屏复制运行 F2 图表组件库 - AntV var data = [{ amount: 20, ratio: 0.1, memo: '学习', const: 'const' ...
antv图例出现分页_自定义图例组件
源码复制成功复制失败全屏复制运行自定义图例组件 #map { position:absolute; top:0; bottom:0; width:100%; } .infolegend { pa ...
antv g2字体阴影_antv g2的理解总结
G2 G2本身是一门图形语法,G2和传统的图表系统(HighCharts,ACharts等)不同,G2是一个基于统计分析的语义化数据可视化系统.它真正做到了让数据驱动图形,让你在使用它时候不用关心绘图 ...
antv g2字体阴影_antv g2坐标轴文字过长时添加省略号，悬浮显示全部
antv g2坐标轴文字过长时添加省略号,悬浮显示全部示例改编自antv基础条形图 https://g2.antv.vision/zh/examples/bar/basic#basic import ...
antv g6 禁止移动_antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
数据可视化记二基础学习(Highcharts、AntV、ECharts)
目录一.Highcharts 1.1 Highcharts JS 1.2 Highstock JS 1.3 Highmaps JS 二.AntV 2.1 绘制流程 2.1.1 Antv G2 绘图流 ...
蚂蚁金服数据可视化引擎 G2 4.0 正式版发布！
G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法. 经历了为期半年的大规模底层重构和开发迭代,G2 4.0 终于和大家见面了.作为继 2017 年 11 月 22 日 G2 3.0 正式 ...
antv g6 禁止移动_十 AntV
← Highcharts AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便.专业可靠.无限可能的数据可视化最佳实践. AntV 包括以下解决方案: G2:可视化引擎 G2Plot ...

antv图例出现分页_AntV - G2

antv图例出现分页_AntV - G2相关推荐

最新文章

热门文章