安装
浏览器引入
<script src="./f2.js"></script>复制代码
npm 安装
安装
npm install @antv/f2 --save复制代码
引入
const F2 = require('@antv/f2');复制代码
上手
步骤
创建 Chart 图表对象，指定图表 ID、指定图表的宽高、边距等信息；
载入图表数据源；
使用图形语法进行图表的绘制；
渲染图表。
创建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(
