F2: a canvas library which providing 2d draw for mobile
Installing
npm install @antv/f2
简介
F2 是面向移动端的一套基于可视化图形语法的图表库,具有精简、高性能、易扩展的特性。适用于对性能、大小、扩展性要求很高的场景。站点
API
Chart
- id: 指定对应 canvas 的id
- el: 如果未指定 id 时可以直接传入 canvas 对象
- width:图表的宽度,如果 canvas 上设置了宽度,可以不传入
- height:图表的高度,如果 canvas 上设置了高度,可以不传入
- pixelRatio:画布的像素比,默认读取 Global 上的pixelRatio
- padding: 绘图区域(坐标轴包围的区域)跟画布边缘的边距,可以是数字或者数组[top, right, bottom, left]
var chart = id: 'c1' width: 500 height: 500 padding: 2010 50 40;
method
-
source(data, defs) 设置
- data 图表显示的数据
- defs 图表数据的列定义
chartsourcedataa:min: 0max: 100; -
render() 渲染图表
chart; -
clear() 清除图表内容
chartclear; // 清除chart;chart; -
destroy () 销毁图表,canvas 元素不会销毁
chart;
-
axis(field, cfg|enable)
- field :坐标轴对应的字段
- cfg 坐标轴的配置信息, 也可以设置成 false
chartaxis'field' false; // 不显示该字段对应的坐标轴chartaxis'field'// 设置坐标轴线的样式,如果值为 null,则不显示坐标轴线 图形属性line:lineWidth: 1stroke: '#ccc'// 标轴文本距离轴线的距离labelOffset: 20// 坐标点对应的线,null 不显示 图形属性tickLine:lineWidth: 1stroke: '#ccc'value: 5// 刻度线长度// 0%处的栅格线着重显示{iftext === '0%'returnstroke: '#efefef';elsereturnstroke: '#f7f7f7';}// 第一个点左对齐,最后一个点右对齐,其余居中,只有一个点时左对齐{var cfg =fill: '#979797'font: '14px san-serif'offset: 6;if index === 0cfgtextAlign = 'left';if index > 0 && index === total - 1cfgtextAlign = 'right';cfgtext = text + '%'; cfgtext 支持文本格式化处理return cfg;}; -
guide() 创建辅助元素,详情查看 辅助元素
-
coord(type, cfg)
- type 坐标系类型,目前支持 rect,polar 两种
- cfg 坐标系的配置项,rect(直角坐标系) 和 polar(极坐标)的配置项不完全一样
- transposed 坐标系翻转
- startAngle polar (极坐标)的起始角度
- endAngle polar (极坐标)的结束角度
- innerRadius polar (极坐标)的内环半径
chart // 直角坐标系chart;chart; // 极坐标chart;chart; -
geometry() F2 支持的 geometry 有以下类型:
- point 点图
- path 线图
- line 线图
- interval 区间图
- area 面积图
- polygon 多边形
- schema 蜡烛图等特殊的图表
-
animate(cfg|false) 执行动画
- cfg|false 指定动画的配置项或者禁用动画
- type: 动画的类型:
- duration: 动画时间(毫秒),默认1000。
- easing: Function/String 缓动函数或缓动函数名称,默认easeInOut。支持linear、easeIn、easeOut、easeInOut、backIn、backOut、elastic、bounce
- success: Function 动画结束后执行的回调函数。
chart;// 禁用动画chart; - cfg|false 指定动画的配置项或者禁用动画
-
getPosition(record) 获取数据对应在画布上的坐标。
var point = chart; -
getRecord(point) 根据画布上的坐标获取对应的数据
var obj = chart; -
getSnapRecords(point, [field]) 根据画布上的坐标获取附近的数据
- point 画布上的点
- field 用于逼近数据的字段,默认都是x 轴对应的字段,但是饼图情况下需要自己指定对应 y 轴的字段
var records = chart;
Geometry
-
position(feilds) 设置位置对应的字段
- fields 可以是字符串 'field1*field2' 也可以是 array ['field1', field2]
chart;chart; -
color(field, [colors]) 设置颜色对应的字段
- field 可以一个字段也可以多个,也可以是常量
- colors 可以是数组、回调函数
chartcolor'x'; // 按照字段x 进行映射,使用内置的颜色chartcolor'red' // 设置常量颜色chartcolor'x' {if x > 100return 'red';return blue;}; -
size(field, [sizes]) 设置大小对应的字段
- field 可以是一个字段也可以是多个,也可以是常量
- sizes 可以是数组、回调函数
pointsize10; // 常量pointsize'value'; // 使用字段映射到大小,使用内置的大小pointsize'value' 10 30; // 指定大小范围pointsize'value' { // 回调函数iftype > 50return 10;elsereturn 5;}; -
shape(field, shapes)
- field 可以是一个字段也可以是多个,也可以是常量
- shapes 可以是数组、回调函数
pointshape'circle'; // 常量pointshape'type'; // 使用字段映射到形状,使用内置的形状pointshape'type' 'circle' 'diamond' 'square'; // 指定形状pointshape'type' { // 回调函数iftype === 'a'return 'circle';elsereturn 'square';}; -
style([field], cfg) 指定图形的样式
- field 映射到样式的字段,可以不设置直接设置配置项 cfg
- cfg 配置项支持的属性,查看:canvas 属性 除此外提供了几个别名
- stroke: 边框, 是 strokeStyle 的简写
- fill: 填充色,是 fillStyle 的简写
- opacity:透明度,是 globalAlpha 的简写
-
adjust(type) 进行数据调整
- F2 目前仅支持 stack(层叠) 和 dodge(分组)的数据调整
guide
F2.Shape 自定义shape
- registerShape(geomType, shapeName, cfg)
- geomType 是 geometry 的类型,point,line,path,area,interval,polygon,schema
- shapeName 创建的shape 的名字
- cfg 指定自定义Shape 需要的函数
- getPoints(cfg) 自定义图形需要的点,是映射到0-1区间的值,path 和 line 不需要
- draw(cfg, canvas) 绘制对应的图形
为了方面用户将0-1 范围的值转换到画布上,提供了2个方法:
- parsePoint(point) 将数据点转换到画布坐标
- parsePoints(points) 将多个数据点转换到画布坐标
var { var ctx = canvas; ctx; ctx; ifpointslength>1 for var i = 1; i <= pointslength - 1; i++ ctx; ctxfillStyle = cfgfill; ctx;};//自定义绘制数据的的形状var Shape = F2Shape;Shape;
F2.Graphic
- drawLine(start, end, canvas, cfg)
- drawText(text, pos, canvas, cfg)
- drawCircle(center, radius, canvas, cfg)
- drawArc(center, radius, startAngle, endAngle, canvas, cfg)
- drawRect(points, canvas, cfg)
- drawShape(canvas, cfg, shapeFn)
- drawLines(points, canvas, cfg)
- drawFan(points, center, canvas, cfg)
- drawSmooth(points, canvas, cfg)
更详细的 API,参考 API详情