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'
创建 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'); //折现 char 渲染图表
进阶
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 轴对应字段进⾏排序adjust
chart.interval().adjust('stack');chart.interval().adjust({  type: 'stack'});chart.interval().adjust([{  type: 'dodge',  marginRatio: 0, // 数值范围为 0 ⾄ 1，⽤于调整分组中Coordinate
// 选择笛卡尔坐标系d('rect');// 坐标系翻转，绘制条形图时需要d({  transposed: true});d('rect', {  transposed: true});// 选择极坐标系ch Axis
属性类型使⽤说明
line Object/null 坐标轴线的配置信息，设置 null 时不显⽰，⽀持所有的 canvas 属性，参考，如需调整显⽰层级，可设置 top:
top: true* 展⽰在最上层图形或者 *top: false
true* 展⽰在最上层图形或者 *top: false 展⽰在最下层图形。
labelOffset Number坐标轴⽂本距离轴线的距离
grid Object/Function/null 坐标轴⽹格线的配置项，设置 null 时不显⽰，⽀持所有的 canvas 属性，参考，⽀持回调函数，另外在极坐标下，可以通过配置 type: 'arc'
type: 'arc' 将其绘制为圆弧；如需调整显⽰层级，可设置 top: true* 展⽰在最上层图形或
top: true* 展⽰在最上层图形或者 *top: false
者 *top: false 展⽰在最下层图形。
tickLine Object/null 坐标轴刻度线的样式配置，设置 null 不显⽰，⽀持所有的 canvas 属性，参考 ，如需调整显⽰层级，可设置top: true* 展⽰在最上层图形或者 *top: false
top: true* 展⽰在最上层图形或者 *top: false 展⽰在最下层图形。
坐标轴⽂本配置，设置 null 不显⽰, ⽀持所有的 canvas 属性，参考，⽀持回调函数，如需调整显⽰层级，可设置
label Object/Function/null
属性类型使⽤说明
top: true* 展⽰在最上层图形或者 *top: false 展⽰在最下层图形。
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: Tooltip
⽤于绘制图表的辅助元素，该⽅法的返回值不为 chart 对象，⽽是⼀个 guide 对应的控制类 guideController。 包括辅助线、辅助⽂本、
辅助框、辅助弧线（只在极坐标下适⽤）、辅助 html 等。
Animate
在 F2 的动画中，围绕图表数据的变化，我们将图形元素的动画划分为以下四种类型：
动画类型解释触发时机
appear图表第⼀次加载时的⼊场动画第⼀次 der()
enter图表绘制完成，数据发⽣变更后，产⽣的新图形的进场动画chart.changeData(data)
update图表绘制完成，数据发⽣变更后，有状态变更的图形的更新动画chart.changeData(data)
leave图表绘制完成，数据发⽣变更后，被销毁图形的销毁动画chart.changeData(data)
chart.animate({  'axis-label': {    appear: {      animation: {String} || {Function}, // 定义动画执⾏函数      easing: {String} || {Function}, // 动画缓动函数      delay: {Num ⽬前对动画开放的图形元素包括：
图形元素名解释
axis-label坐标轴⽂本
axis-grid坐标轴⽹格线
axis-tick坐标轴刻度线
axis-line坐标轴线
line折线图canvas动画
area⾯积图
interval柱状图
path路径图
point点图
polygon多边形
schema⾃定义图形
Interaction
chart.interaction('pie-select', {  startEvent: {String}, // 触发事件，默认为 tap  animate: {Boolean} || {Object}, // 动画配置  offset: {Number}, // 光环偏移距离  append PieLabel
chart.pieLabel({  anchorOffset: {Number}, // 锚点的偏移量  inflectionOffset: {Number}, // 拐点的偏移量  sidePadding: {Number}, // ⽂本距离画布左右两边的距离  lin
属性名类型默认值说明
anchorOffset Number5锚点的偏移量。
inflectionOffset Number15拐点的偏移量。
sidePadding Number20⽂本距离画布左右两边的距离。
lineHeight Number32⽂本的最⼤⾏⾼。
adjustOffset Number15发⽣调整时的偏移量。
skipOverlapLabels Boolean false是否将重叠的⽂本忽略，默认为 false，即展⽰全部⽂本。
lineStyle Object连接线的样式，颜⾊默认同对应饼图颜⾊相同。
anchorStyle Object锚点的样式，颜⾊默认同对应饼图的样⾊相同。
label1Function null 配置 label1 ⽂本内容及其样式，是个回调函数，详细使⽤见，该函数的返回值必须是⼀个对象。
label2Function null 配置 label2 ⽂本内容及其样式，是个回调函数，详细使⽤见，该函数的返回值必须是⼀个对象。
onClick Function null点击⾏为定义函数，详细使⽤见。
triggerOn String'touchstart'配置点击⾏为触发的事件类型。
activeShape Boolean false当有图形被选中的时候，是否激活图形，默认不激活。
activeStyle Object { offset: 1,
appendRadius: 8,
fillOpacity: 0.5 }
设置被激活图形的显⽰样式。其中 offset 以及 appendRadius 参数的含义同 中的含义相
同，分别代表光环的偏移距离以及光环的⼤⼩，其他属性为绘图属性即可。
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)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。