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

 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

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 的动画中，围绕图表数据的变化，我们将图形元素的动画划分为以下四种类型：

 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)

目前对动画开放的图形元素包括：

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} // 设置激活图形的样式})

ScrollBar

 chart.scrollBar({  // 一些配置项});

内置函数

获取方式：

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 类型