AntV-f2开发文档

安装

浏览器引入

 <script src="./f2.js"></script>复制代码

npm 安装

安装

 npm install @antv/f2 --save复制代码

引入

 const F2 = require('@antv/f2');复制代码

上手

步骤

1. 创建 Chart 图表对象，指定图表 ID、指定图表的宽高、边距等信息；

2. 载入图表数据源；

3. 使用图形语法进行图表的绘制；

4. 渲染图表。

创建canvas

 <canvas id="myChart" width="400" height="260"></canvas>复制代码

数据源

 const data = [  { genre: 'Sports', sold: 275 },  { genre: 'Strategy', sold: 115 },  { genre: 'Action', sold: 120 },  { genre: 'Shooter', sold: 350 },  { genre: 'Other', sold: 150 },];复制代码

创建 Chart 对象

 const chart = new F2.Chart({  id: 'myChart',  pixelRatio: window.devicePixelRatio // 指定分辨率});复制代码

载入数据源

 chart.source(data);复制代码

创建图形

 chart.interval().position('genre*sold').color('genre'); //柱状图chart.intervalStack().position('sold').color('genre'); //饼图 chart.line().position('genre*sold'); //折现 chart.point().position('genre*sold'); //点图复制代码

渲染图表

 chart.render();复制代码

进阶

Geometry

 chart.<geomType>()  .position()  .size()  .color()  .shape()  .adjust()  .style()  .animate();复制代码

数据映射相关的属性函数：position, color, shape, size；

显示辅助信息的函数：style；

额外的控制函数：adjust；

动画配置函数：animate

geom 类型	说明
point	点，用于点图的构建。
path	路径，无序的点连接而成的一条线。
line	线，点按照 x 轴连接成一条线，构成线图。
area	填充线图跟坐标系之间构成区域图，也可以指定上下范围。
interval	使用矩形或者弧形，用面积来表示大小关系的图形，一般构成柱状图、饼图等图表。
polygon	多边形，可以用于构建热力图、地图等图表类型。
schema	k 线图，箱型图。

 chart.<geomType>({  generatePoints: {Boolean}, //是否生成多个点来绘制图形，true 时会生成多个点  sortable: {Boolean}, //是否对数据按照 x 轴对应字段进行排序，true 时会进行排序  startOnZero: {Boolean}, //用于设置图形的 Y 轴基线是否从 0 开始，默认为 true，以 0 为基线  connectNulls: {Boolean} //用于设置是否将空数据连接起来（用于 line，area 以及 path 类型）})复制代码

adjust

 chart.interval().adjust('stack'