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');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 类型

转载于:https://juejin.im/post/5d5c9a14518825237b5bf0e8