安装
浏览器引入
<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(