当前位置: 首页 > 工具软件 > AntV - F2 > 使用案例 >

AntV-f2开发文档

梁丘高朗
2023-12-01

安装

浏览器引入

 <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多边形,可以用于构建热力图、地图等图表类型。
schemak 线图,箱型图。
 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

属性类型使用说明
lineObject/null坐标轴线的配置信息,设置 null 时不显示,支持所有的 canvas 属性,参考绘图属性,如需调整显示层级,可设置 top: true* 展示在最上层图形或者 *top: false 展示在最下层图形。
labelOffsetNumber坐标轴文本距离轴线的距离
gridObject/Function/null坐标轴网格线的配置项,设置 null 时不显示,支持所有的 canvas 属性,参考绘图属性,支持回调函数,另外在极坐标下,可以通过配置 type: 'arc' 将其绘制为圆弧;如需调整显示层级,可设置 top: true* 展示在最上层图形或者 *top: false 展示在最下层图形。
tickLineObject/null坐标轴刻度线的样式配置,设置 null 不显示,支持所有的 canvas 属性,参考绘图属性 ,如需调整显示层级,可设置 top: true* 展示在最上层图形或者 *top: false 展示在最下层图形。
labelObject/Function/null坐标轴文本配置,设置 null 不显示, 支持所有的 canvas 属性,参考绘图属性,支持回调函数,如需调整显示层级,可设置 top: true* 展示在最上层图形或者 *top: false 展示在最下层图形。
positionString坐标轴显示位置配置,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} // 设置激活图形的样式})复制代码
属性名类型默认值说明
anchorOffsetNumber5锚点的偏移量。
inflectionOffsetNumber15拐点的偏移量。
sidePaddingNumber20文本距离画布左右两边的距离。
lineHeightNumber32文本的最大行高。
adjustOffsetNumber15发生调整时的偏移量。
skipOverlapLabelsBooleanfalse是否将重叠的文本忽略,默认为 false,即展示全部文本。
lineStyleObject连接线的样式,颜色默认同对应饼图颜色相同。
anchorStyleObject锚点的样式,颜色默认同对应饼图的样色相同。
label1Functionnull配置 label1 文本内容及其样式,是个回调函数,详细使用见链接,该函数的返回值必须是一个对象。
label2Functionnull配置 label2 文本内容及其样式,是个回调函数,详细使用见链接,该函数的返回值必须是一个对象。
onClickFunctionnull点击行为定义函数,详细使用见链接
triggerOnString'touchstart'配置点击行为触发的事件类型。
activeShapeBooleanfalse当有图形被选中的时候,是否激活图形,默认不激活。
activeStyleObject{ offset: 1, appendRadius: 8, fillOpacity: 0.5 }设置被激活图形的显示样式。其中 offset 以及 appendRadius 参数的含义同 pie-select api 中的含义相同,分别代表光环的偏移距离以及光环的大小,其他属性为绘图属性即可。

ScrollBar

 chart.scrollBar({  // 一些配置项});复制代码
属性名类型默认值说明
modeString'x'用于确定进度条的渲染方向,可选值为 'x', 'y', 'xy'
xStyleObject{ 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 方向的偏移量
yStyleObect{ 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

 类似资料: