安装
浏览器引入
复制代码npm 安装
安装
npm install @antv/f2 --save复制代码引入
const F2 = require('@antv/f2');复制代码上手
步骤
创建 Chart 图表对象，指定图表 ID、指定图表的宽高、边距等信息；
载入图表数据源；
使用图形语法进行图表的绘制；
渲染图表。
创建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.() .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.({ generatePoints: {Boolean}, //是否生成多个点来绘制图形，true 时会生成多个点 sortable: {Boolean}, //是否对数据按照 x 轴对应字段进行排序，true 时会进行排序 startOnZero: {Boolean}, //用于设置图形的 Y 轴基线是否从 0 开始，默认为 true，以 0 为基线 connectNulls: {Boolean} //用于设置是否将空数据连接起来（用于 line，area 以及 path 类型）})复制代码 adjust
chart.interval().adjust('stack');chart.interval().adjust({ type: 'stack'});chart.interval().adjust([{ type: 'dodge', marginRatio: 0, // 数值范围为 0 至 1，用于调整分组中各个柱子的间距}]);复制代码Coordinate
// 选择笛卡尔坐标系chart.coord('rect');// 坐标系翻转，绘制条形图时需要chart.coord({ transposed: true});chart.coord('rect', { transposed: true});// 选择极坐标系chart.coord('polar');// 更多配置chart.coord('polar', { transposed: true, // 坐标系翻转 startAngle: {Number}, // 起始弧度 endAngle: {Number}, // 结束弧度 innerRadius: {Number}, // 内环半径，数值为 0 - 1 范围 radius: {Number} // 半径，数值为 0 - 1 范围});复制代码Axis
| 属性 | 类型 | 使用说明 |
|---|---|---|
| line | Object/null | 坐标轴线的配置信息，设置 null 时不显示，支持所有的 canvas 属性，参考绘图属性，如需调整显示层级，可设置 top: true* 展示在最上层图形或者 *top: false 展示在最下层图形。 |
| labelOffset | Number | 坐标轴文本距离轴线的距离 |
| grid | Object/Function/null | 坐标轴网格线的配置项，设置 null 时不显示，支持所有的 canvas 属性，参考绘图属性，支持回调函数，另外在极坐标下，可以通过配置 type: 'arc' 将其绘制为圆弧；如需调整显示层级，可设置 top: true* 展示在最上层图形或者 *top: false 展示在最下层图形。 |
| tickLine | Object/null | 坐标轴刻度线的样式配置，设置 null 不显示，支持所有的 canvas 属性，参考绘图属性 ，如需调整显示层级，可设置 top: true* 展示在最上层图形或者 *top: false 展示在最下层图形。 |
| label | Object/Function/null | 坐标轴文本配置，设置 null 不显示, 支持所有的 canvas 属性，参考绘图属性，支持回调函数，如需调整显示层级，可设置 top: true* 展示在最上层图形或者 *top: false 展示在最下层图形。 |
| position | String | 坐标轴显示位置配置，x 轴默认位于底部 'bottom'，y 轴可设置 position 为 'left'、'right' |
Legend
chart.legend({ custom: true, position: 'left', items: [ { name: 'a1', marker: 'square', fill: 'red'}, { name: 'a2', marker: 'square', fill: 'blue'}, { name: 'a3', marker: 'square', fill: 'green'} ]});chart.legend({ custom: true, position: 'left', items: [ { name: 'a1', marker: { symbol: 'square', stroke: 'red', radius: 8 }}, { name: 'a2', marker: { symbol: 'square', stroke: 'green', radius: 8 }}, { name: 'a3', marker: { symbol: 'square', stroke: 'blue', radius: 8 }} ]});复制代码Tooltip
chart.tooltip(false); // 关闭 tooltipchart.tooltip({ alwaysShow: false, // 当移出触发区域，是否仍显示提示框内容，默认为 false，移出触发区域 tooltip 消失，设置为 true 可以保证一直显示提示框内容 offsetX: 0, // x 方向的偏移 offsetY: 0, // y 方向的偏移 triggerOn: [ 'touchstart', 'touchmove' ], // tooltip 出现的触发行为，可自定义，用法同 legend 的 triggerOn triggerOff: 'touchend', // 消失的触发行为，可自定义 showTitle: false, // 是否展示标题，默认不展示 showCrosshairs: false, // 是否显示辅助线，点图、路径图、线图、面积图默认展示 crosshairsStyle: { stroke: 'rgba(0, 0, 0, 0.25)', lineWidth: 2 }, // 配置辅助线的样式 showTooltipMarker: true, // 是否显示 tooltipMarker tooltipMarkerStyle: { fill: '#fff' // 设置 tooltipMarker 的样式 }, background: { radius: 2, fill: '#1890FF', padding: [ 6, 10 ] }, // tooltip 内容框的背景样式 titleStyle: { fontSize: 24, fill: '#fff', textAlign: 'start', textBaseline: 'top' }, // tooltip 标题的文本样式配置，showTitle 为 false 时不生效 nameStyle: { fontSize: 24, fill: '#fff', textAlign: 'start', textBaseline: 'middle' }, // tooltip name 项的文本样式配置 valueStyle: { fontSize: 24, fill: '#fff', textAlign: 'start', textBaseline: 'middle' }, // tooltip value 项的文本样式配置 showItemMarker: true, // 是否展示每条记录项前面的 marker itemMarkerStyle: { radius: 7, symbol: 'circle', lineWidth: 2, stroke: '#fff' }, // 每条记录项前面的 marker 的样式配置 custom: {Boolean}, // 是否自定义 tooltip 提示框 onShow(obj) { // obj: { x, y, title, items } }, // tooltip 显示时的回调函数 onHide(obj) { // obj: { x, y, title, items } }, // tooltip 隐藏时的回调函数 onChange(obj) { // obj: { x, y, title, items } }, // tooltip 内容发生改变时的回调函数 crosshairsType: {String}, // 辅助线的种类 showXTip: {Boolean}, // 是否展示 X 轴的辅助信息 showYTip: {Boolean}, // 是否展示 Y 轴的辅助信息 xTip: {Object}/{Function}, // X 轴辅助信息的文本样式 yTip: {Object}/{Function, // Y 轴辅助信息的文本样式 xTipBackground: {Object}, // X 轴辅助信息的背景框样式 yTipBackground: {Object}, // Y 轴辅助信息的背景框样式 snap: {Boolean} // 是否将辅助线准确定位至数据点});复制代码Guide
用于绘制图表的辅助元素，该方法的返回值不为 chart 对象，而是一个 guide 对应的控制类 guideController。 包括辅助线、辅助文本、辅助框、辅助弧线（只在极坐标下适用）、辅助 html 等。
Animate
在 F2 的动画中，围绕图表数据的变化，我们将图形元素的动画划分为以下四种类型：
| 动画类型 | 解释 | 触发时机 |
|---|---|---|
| appear | 图表第一次加载时的入场动画 | 第一次 chart.render() |
| enter | 图表绘制完成，数据发生变更后，产生的新图形的进场动画 | chart.changeData(data) |
| update | 图表绘制完成，数据发生变更后，有状态变更的图形的更新动画 | chart.changeData(data) |
| leave | 图表绘制完成，数据发生变更后，被销毁图形的销毁动画 | chart.changeData(data) |
chart.animate({ 'axis-label': { appear: { animation: {String} || {Function}, // 定义动画执行函数 easing: {String} || {Function}, // 动画缓动函数 delay: {Number} || {Function}, // 动画延迟执行时间，单位 ms duration: {Number} // 动画执行时间，单位 ms }, // 初始化入场动画配置 update: {}, // 更新动画配置，配置属性同 appear enter: {}, // 数据变更后，新产生的图形的入场动画配置，配置属性同 appear leave: {} // 销毁动画配置，配置属性同 appear }, // 对坐标轴文本进行动画配置 'axis-tick': {} // 对坐标轴刻度线进行动画配置，配置属性同 axis-label 'axis-grid': {} // 对坐标轴网格线进行动画配置，配置属性同 axis-label 'axis-line': {} // 对坐标轴线进行动画配置，配置属性同 axis-label line: {} // 对折线图进行动画配置，配置属性同 axis-label area: {} // 对面积图进行动画配置，配置属性同 axis-label interval: {} // 对柱状图进行动画配置，配置属性同 axis-label path: {} // 对路径图进行动画配置，配置属性同 axis-label point: {} // 对点图进行动画配置，配置属性同 axis-label polygon: {} // 对多边形进行动画配置，配置属性同 axis-label schema: {} // 对自定义图形进行动画配置，配置属性同 axis-label});// 关闭图表所有动画chart.animate(false)复制代码目前对动画开放的图形元素包括：
| 图形元素名 | 解释 |
|---|---|
| axis-label | 坐标轴文本 |
| axis-grid | 坐标轴网格线 |
| axis-tick | 坐标轴刻度线 |
| axis-line | 坐标轴线 |
| line | 折线图 |
| area | 面积图 |
| interval | 柱状图 |
| path | 路径图 |
| point | 点图 |
| polygon | 多边形 |
| schema | 自定义图形 |
Interaction
chart.interaction('pie-select', { startEvent: {String}, // 触发事件，默认为 tap animate: {Boolean} || {Object}, // 动画配置 offset: {Number}, // 光环偏移距离 appendRadius: {Number}, // 光环大小 style: {Object}, // 光环的样式配置 cancelable: {Boolean}, // 是否允许取消选中，默认值为 true，表示允许 onStart: {Function}, // 事件触发后的回调 onEnd: {Function}, // 事件结束后的回调 defaultSelected: {Object} // 设置默认选中的数据，该属性需要在 chart.render() 之后调用方可生效});复制代码PieLabel
chart.pieLabel({ anchorOffset: {Number}, // 锚点的偏移量 inflectionOffset: {Number}, // 拐点的偏移量 sidePadding: {Number}, // 文本距离画布左右两边的距离 lineHeight: {Number}, // 文本的最大行高 adjustOffset: {Number}, // 发生调整时的偏移量 skipOverlapLabels: {Boolean}, // 是否不展示重叠的文本 lineStyle: {Object}, // 连接线的样式 anchorStyle: {Object}, // 锚点的样式 label1: {Function}, // label1 文本内容及其样式，Function 类型，回调函数 label2: {Function}, // label2 文本内容及其样式，Function 类型，回调函数 onClick: {Function}, // 点击行为，回调函数 triggerOn: {String}, // 点击行为触发的事件类型 activeShape: {Boolean}, // 当有图形被选中的时候，是否激活图形 activeStyle: {Object} // 设置激活图形的样式})复制代码| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| anchorOffset | Number | 5 | 锚点的偏移量。 |
| inflectionOffset | Number | 15 | 拐点的偏移量。 |
| sidePadding | Number | 20 | 文本距离画布左右两边的距离。 |
| lineHeight | Number | 32 | 文本的最大行高。 |
| adjustOffset | Number | 15 | 发生调整时的偏移量。 |
| skipOverlapLabels | Boolean | false | 是否将重叠的文本忽略，默认为 false，即展示全部文本。 |
| lineStyle | Object | 连接线的样式，颜色默认同对应饼图颜色相同。 | |
| anchorStyle | Object | 锚点的样式，颜色默认同对应饼图的样色相同。 | |
| label1 | Function | null | 配置 label1 文本内容及其样式，是个回调函数，详细使用见链接，该函数的返回值必须是一个对象。 |
| label2 | Function | null | 配置 label2 文本内容及其样式，是个回调函数，详细使用见链接，该函数的返回值必须是一个对象。 |
| onClick | Function | null | 点击行为定义函数，详细使用见链接。 |
| triggerOn | String | 'touchstart' | 配置点击行为触发的事件类型。 |
| activeShape | Boolean | false | 当有图形被选中的时候，是否激活图形，默认不激活。 |
| activeStyle | Object | { offset: 1, appendRadius: 8, fillOpacity: 0.5 } | 设置被激活图形的显示样式。其中 offset 以及 appendRadius 参数的含义同 pie-select api 中的含义相同，分别代表光环的偏移距离以及光环的大小，其他属性为绘图属性即可。 |
ScrollBar
chart.scrollBar({ // 一些配置项});复制代码| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| mode | String | 'x' | 用于确定进度条的渲染方向，可选值为 'x', 'y', 'xy' |
| xStyle | Object | { backgroundColor: 'rgba(202, 215, 239, .2)', fillerColor: 'rgba(202, 215, 239, .5)', size: 4, lineCap: 'round', offsetX: 0, offsetY: 8 } | 用于设置 x 轴方向进度条的样式，其中：backgroundColor：进度条背景色fillColor: 范围进度条的背景色size: 进度条线宽lineCap: line 的图形属性offsetX: 进度条 x 方向的偏移量offsetY: 进度条 y 方向的偏移量 |
| yStyle | Obect | { backgroundColor: 'rgba(202, 215, 239, .2)', fillerColor: 'rgba(202, 215, 239, .5)', size: 4, lineCap: 'round', offsetX: 8, offsetY: 0 } | 用于设置 y 轴方向进度条的样式，其中：backgroundColor：进度条背景色fillColor: 范围进度条的背景色size: 进度条线宽lineCap: line 的图形属性offsetX: 进度条 x 方向的偏移量offsetY: 进度条 y 方向的偏移量 |
内置函数
获取方式：
const Util = F2.Util;
upperFirst
upperFirst(s)
描述：将字符串的第一个字母转换成大写
参数：String 类型
返回：返回首字母大写后的字符串
lowerFirst
lowerFirst(s)
描述：将字符串的第一个字母转换成小写
参数：String 类型
返回：返回首字母小写后的字符串
isString
isString(value)
描述：判断是否是字符串
参数：任意类型的值
返回：返回判断结果
isNumber
isNumber(value)
描述：判断是否数字
参数：任意类型的值
返回：返回判断结果
isBoolean
isBoolean(value)
描述：判断是否是布尔类型
参数：任意类型的值
返回：返回判断结果
isFunction
isFunction(fn)
描述：判断是否为函数
参数：任意类型的值
返回：返回判断结果
isArray
isArray(value)
描述：判断是否为数组
参数：任意类型的值
返回：返回判断结果
isDate
isDate(value)
描述：判断是否为日期类型
参数：任意类型的值
返回：返回判断结果
isNil
isNil(o)
描述：判断值是否为空（undefined 或者 null）
参数：任意类型的值
返回：返回判断结果
isObject
isObject(value)
描述：判断是否为对象类型
参数：任意类型的值
返回：返回判断结果
deepMix
deepMix(target, source1, source2 source3)
描述：深拷贝
参数：target 拷贝的目标，source 拷贝对象，最多支持 3 个对象
返回：拷贝结果
mix
mix(target, source1, source2 source3)
描述：浅拷贝
参数：target 拷贝的目标，source 拷贝对象，最多支持 3 个对象
返回：拷贝结果
indexOf
indexOf(arr, element)
描述：查找元素在数组中的索引
参数：arr：查找的数组，element: 查找的元素
返回：返回索引值
each
each(elements, func)
描述：遍历数组或者对象
参数：elements：需要遍历的数组或者对象，func：回调函数
返回：
Util.each([ 1, 2, 3 ], (val, index) => { console.log('每项的值', val); console.log('索引', index);});Util.each([ 1, 2, 3, 4, 5 ], (val, index) => { if (val === 4) { return false; // 跳出循环 }});
getPixelRatio
getPixelRatio()
描述：获取当前设备的像素比
参数：无
返回：Number, 返回当前设备像素比
getRelativePosition
getRelativePosition(point, canvas)
描述：将当前鼠标的坐标转换为画布的相对坐标
参数：point: 当前鼠标坐标，canvas: 当前图表的 canvas 对象，chart.get('canvas') 获取
返回：画布坐标，Object 类型