最近在做移动端App时，用到了AntV移动可视化F2，发现网上对F2使用的资料甚少。
通过F2的文档和自己的摸索，总结了几个常用图表以及常用功能的用法。
AntV移动可视化F2个人使用总结
安装与引用
安装
打开项目所在的终端，输入以下命令
npm install @antv/f2 --save
//引用
import F2 from '@antv/f2';
chart对象的创建和基本配置
1、创建一个canvas元素(宽高可以在标签上设置，也可以在之后的chart对象中设置)
<canvas id="myChart" width="400" height="300"></canvas>
2、创建一个chart对象
const chart = new F2.Chart();
3、对chart对象进行自己想要的操作和配置
const chart = new F2.Chart({
id: 'myChart', //指定canvas元素
pixelRatio: window.devicePixelRatio, // 设置像素比
width: 400, //画布的长(也可以直接在canvas标签上设置)
height: 300, //画布的宽(同理)
padding: [10, 10, 20, 30], //绘图区和图表边框的距离, 用来显示坐标轴文本、图例 。
appendPadding: 10, //图表的外边距
});
以下是之后渲染图表所用到的数据data
const data = [{
name: '芳华',
percent: 0.22,
a: '1',
date: '2017-06-04',
value: 275
}, {
name: '妖猫传',
percent: 0.05,
a: '1',
date: '2017-06-05',
value: 115
}, {
name: '机器之血',
percent: 0.33,
a: '1',
date: '2017-06-06',
value: 120
}, {
name: '心理罪',
percent: 0.17,
a: '1',
date: '2017-06-07',
value: 350
}, {
name: '寻梦环游记',
percent: 0.23,
a: '1',
date: '2017-06-08',
value: 150
}];
F2各函数介绍(常用的函数与函数中常用的属性)
source数据装载
//参数一: 需要渲染的数据 参数二: 对数据进行处理(Obj)。
chart.source(data, {
percent: {
tickCount: 7, //坐标轴刻度个数(具体看数据渲染是X轴还是Y轴, 来操作对应轴的刻度数)
formatter(val) { //格式化数据
return val*100 + '%'
},
ticks: [80, 100, 120, 140, 160], //指定坐标轴上刻度点的文本信息, 会按照 ticks 的个数和文本来显示(经测试, 仅对数值类字段有效)
},
date: {
type: 'timeCat', //分三种类型: 1、linear: 数值类型; 2、cat: 分类类型(如: 男, 女); 3、timeCat: 时间类型。
//range: [0, 1], //数据在画布的输出范围, 值为Array, 取值范围为0~1。
mask: 'YYYY-MM', //用来格式化日期格式(只有type为timeCat时才可以)
}
});
tooltip提示信息
chart.tooltip(false); //关闭提示信息
chart.tooltip({
alwaysShow: true, //移出触发区域, 是否仍显示提示框内容(false)
showTooltipMarker: true, //是否显示 tooltipMarker
tooltipMarkerStyle: { //设置 tooltipMarker 的样式
fill: 'red', //颜色
},
showItemMarker: true, //是否显示每条记录项前面的 marker
itemMarkerStyle: { //设置每条记录项前面的 marker 的样式
radius: 10,
fill: 'green'
},
offsetX: 0, //X方向的偏移
offsetY: 0, //Y方向的偏移
triggerOn: ['touchstart', 'touchmove'], //tooltip 的触发行为
triggerOff: 'touchend', //tooltip 消失的触发行为(与alwaysShow 同时设置时, alwaysShow会失效)
showTitle: true, //是否展示标题(false)
showCrosshairs: true, //是否显示辅助线
crosshairsStyle: { //配置辅助线的样式
stroke: 'rgba(0, 0, 0, 0.25)',
lineWidth: 2
},
background: { //设置 tooltip 背景样式
radius: 10,
fill: 'yellow',
padding: [ 6, 10 ]
},
titleStyle: { //tooltip 标题的文本样式
fontSize: 24,
fill: 'red',
textAlign: 'start',
textBaseline: 'top'
},
nameStyle: { //tooltip name 项的文本样式配置
fontSize: 12,
fill: 'skyblue',
textAlign: 'start',
textBaseline: 'middle'
},
valueStyle: { //tooltip value 项的文本样式配置
fontSize: 24,
fill: 'red',
textAlign: 'start',
textBaseline: 'middle'
},
crosshairsType: 'xy', //辅助线的种类 有三个值: 1、x 2、y(默认) 3、xy
showXTip: true, //是否展示 X 轴的辅助信息
showYTip: true, //是否展示 Y 轴的辅助信息
xTip: { //配置 x 轴辅助信息的文本样式
fontSize: 10, // 字体大小
fill: '#1890ff', // 字体颜色
},
yTip(val) { //配置 y 轴辅助信息的文本样式
// 返回值必须是对象
return {
val: val.toFixed(2),//这里随便写的, 如果是非 Number 类型会报错, 导致图标渲染失败！
};
},
snap: true, //是否将辅助线准确定位至数据点
onShow: function onShow(ev) { //点击显示详情
const items = ev.items;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = '¥ ' + items[0].value;
}
});
Axis坐标轴配置
chart.axis(false); //不渲染坐标轴
chart.axis('date', { //渲染坐标轴(默认true) 参数一: 选择设置的字段(当前设置的为 x 轴)
label: function(text, index, total) { //配置坐标轴文本(当值为回调函数时, 返回值必须为对象)
//console.log(text, index, total);
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'center'; //textAlign: 设置坐标文本在刻度线的位置
} else if (index === total - 1) {
textCfg.textAlign = 'center';
}
return textCfg;
},
line: { //配置坐标轴线
top: false,
stroke: 'red', //轴线颜色
lineWidth: 1 //轴线粗细
},
labelOffset: 20, //坐标文本与轴线的距离
tickLine: { //配置坐标轴刻度线样式
lineWidth: 1, //刻度线宽度
stroke: 'red', //刻度线颜色
length: 5 //刻度线长度
},
grid: function(text, index, totle) { //配置坐标轴网格线(在极坐标下, 可通过配置 type: 'arc'; 绘制圆弧; 当值为回调函数时, 返回值必须为对象)
console.log(text, index, totle);
if(text === '2017-06-30') {
return {
stroke: 'yellow',
}
}
return {
stroke: 'green',
}
},
position: 'bottom' //配置坐标轴显示位置(当配置 x 轴时, 默认为 bottom, 无法配置其他值)
})
Geometry几何标记对象，决定了图表的类型
//绘制线图
chart
.line({ //绘制折线图
connectNulls: false //设置是否连接空数据(false)
})
.position('date*value') //由 date 和 value 两个属性决定图形位置, date 映射至 x 轴, value 映射至 y 轴
.shape('smooth') //设置数据映射到图形的形状(值可以为 String, Object 或带有返回值的 function) 当用在 line 后面时, 值有三个: 1、line: 直线(默认值) 2、dash: 虚线 3、smooth: 平滑线
//绘制填充阴影
chart
.area({ //填充坐标系与线图之间的区域图 (填充颜色的透明度默认不是1)
startOnZero: true //设置 Y 轴的基线是否从 0 开始(true)
})
.position('date*value') //同上
.color('l(90) 0:#1890FF 1:#f7f7f7') //1、color('red'): 将图标渲染成指定颜色(非数据源字段); 2、color('date'): 将指定字段进行映射(使用内置颜色 注: 字段的值必须为字符串); 3、color('date', ['red']): 按指定颜色映射; 4、color('date', 'red-blue-green'): 使用渐变色映射; 5、color('l(0) 0:red 0.5:blue 1:yellow'): 使用渐变色(l中填渐变的角度)
.shape('smooth') //同上 当为用在 area 后面时, 值有两个: 1、area(默认) 2、smooth
.style({ //配置图形渲染的样式
fillOpacity: 1, //填充颜色的透明度
lineWidth: 1, //画笔线条的宽度
//stroke: '#fff' //画笔的颜色
})
.size(10) //配置数据映射到图形的大小(值可以为 Number 或 字段名) (当图形受其他样式影响时, 会被覆盖: 权重不高)
//绘制柱状图与饼图
chart.interval() //笛卡尔坐标系时为柱状图, 极坐标系下为饼图、环图等
.adjust({ //几何标记对象调整数据;
type: 'dodge', //type有两个值 1、stack: 层叠图 2、dodge: 分组图;
marginRatio: 0 //调整分组各柱子间的间距, 取值范围(0 ~ 1), 仅当 type = 'dodge' 时生效
})
.style({
lineWidth: 2,
stroke: '#fff',
lineJoin: 'round',
lineCap: 'round'
});
注：chart.interval() 等返回的不是 chart 对象，而是一个 geom 几何标记对象 Geom。
Coordinate配置坐标系
chart.coord('polar', { //设置坐标系: 1、笛卡尔坐标系(rect即直角坐标系)(默认); 2、极坐标系(polar)
transposed: true, //坐标系翻转
startAngle: Math.PI, //极坐标的起始角度(值为弧度制)
endAngle: 2*Math.PI, //极坐标的结束角度(值为弧度制)
innerRadius: 0.5, //内圈的半径(绘制圆环时用到)
radius: 0.8, //圆的半径
})
Legend图例
注: color, size 这两个图形属性如果判断接收的参数是数据源的字段时，会自动生成不同的图例
chart.legend({ //设置图例 值为 false 关闭图例 当 color 映射某个字段时, 设置字段无效
position: 'right', //设置图例的位置 'top'(默认)、 'right'、 'bottom'、 'left'
align: 'center', //当 position 为 'top' 或 'bottom' 时生效, 值可设置为 'left'(默认)、 'center'、 'right'
verticalAlign: 'top', //当 position 为 'left' 或 'right' 时生效, 值可设置为 'top'、 'middle'、 'bottom'
itemWidth: 5, //设置每个图例的宽度(Number), 默认 auto
showTitle: true, //是否显示图例标题(false)
titleStyle: { //设置图例标题的样式
textAlign: 'left', //文本对齐方式
fill: 'pink', // 文本的颜色
fontSize: 18, // 文本大小
fontWeight: 'bold', // 文本粗细
textBaseline: 'middle' //文本基准线
},
offsetX: 5, //图例 x 方向的整体偏移(0)
offsetY: 5, //图例 y 方向的整体偏移(0)
titleGap: 15, //标题与图例的距离(12) 显示标题时生效
itemMarginBottom: 15, //每个图例的下方留白(12)
wordSpace: 5, //marker 与文本之间的距离(6)
unCheckStyle: { //设置取消选中的图例 marker 以及文本的样式
fill: 'red'
},
clickable: true, //是否允许点击(true)
itemFormatter: function(val) { //格式化每项的文本
return val.slice(0, 4)
},
marker: {
symbol: 'circle', // marker 的形状
radius: 5 // 半径大小
}, //设置图例 marker 的样式 值为 String 类型时, 可选 square 或 circle(默认), 值为 Object 类型时, 可配置一些绘图属性
nameStyle: { //设置图例项的文本样式
fill: 'skyblue',
fontSize: 12
},
selectedMode: 'single', //设置图例的选中模式 multiple(多选默认) 或 single(单选)
})
Animate动画机制
chart.animate({ //配置动画效果 值为 false 时, 关闭动画效果
appear: { //出场动画配置
animation: 'fadeIn', //执行的具体动画(内置的动画名或 Function)
easing: 'bounceOut', //动画缓动函数(内置的动画名或 Function)
delay: 0.5, //动画延迟执行时间 单位 ms
duration: 1200 //动画执行时间 单位 ms
},
update: {}, //更新动画配置(参数同appear)
enter: {}, //图表发生数据变更时，新进场的元素动画配置(参数同appear)
leave: {} //离场动画配置(参数同appear)
});
具体动画效果请参考F2文档
pieLabel用于绘制饼图文本的插件
chart.pieLabel({ //绘制饼图文本的插件
sidePadding: 30, //文本与画布左右的距离(Number)
anchorOffset: 2, //锚点的偏移量
anchorStyle: { //锚点的样式
fill: '', //锚点的颜色(String)
},
inflectionOffset: 2, //拐点的偏移量
skipOverlapLabels: true, //是否忽略重叠文本(false)
activeShape: true, //图形被选中的时, 是否激活图形(false)
activeStyle: { //激活图形的样式
offset: -1, //激活光环偏移距离
fillOpacity: 1, //激活光环的填充透明度
appendRadius: 4 //激活光环大小
},
lineStyle: { //连接线的样式
stroke: 'rgba(255,0,0,0.3)', //设置画笔的颜色(#000)
},
lineHeight: 2, //文本的行高(Number)
label1: function (data) { //默认连接线上方的文本(带返回值的函数, 返回值必须为 Object), 位置可通过 label1OffsetY 调整
return {
text: '￥' + data.money, //展示的文本
fill: '#343434', //文本颜色
fontWeight: 'bold' //字体样式
textAlign: 'end' //字体位置
}
},
label1OffsetY: 10, //label1与连接线垂直方向的偏移, 位置可通过 label2OffsetY 调整
label2: function(data) { //默认连接线下方的文本(配置与label1相同)
return {
text: data.type,
fill: '#999',
offset: 10, //会被外部的 label2OffsetY 覆盖
textAlign: 'end',
};
},
label2OffsetY: 10, //label2与连接线垂直方向的偏移
onClick: function(ev) { //点击事件 ev(事件对象) ev: { chart: {}, dat: {}, native: {}, type: 'click', x: 339, y: 67}
const data = ev.data; //被点击图形的原始数据
if (data) {
$('#title').text(data.type);
$('#money').text(data.money);
}
}
});
注: 当锚点的偏移量和拐点的偏移量相等时，连接线会变成一条直线
Guide绘制图表的辅助元素
data.forEach(function(obj) {
chart.guide().text({
position: [ obj.action, 2.5 ],
content: (obj.percent * 100).toFixed(0) + '%',
style: {
textBaseline: 'middle',
textAlign: 'center',
fill: '#fff'
}
});
chart.guide().html({
position: [ '41%', obj.total*19+ 2 +'%'],
alignX: 'left',
alignY: 'bottom',
offsetX: 25,
html: `<div style="flex-direction: row;align-items: center;display: flex;"><div style="height:0.5px;background-color:#999999;width:150px;"></div><div style="margin-left:0px;font-size: 12px;color:#666666;text-align: left;white-space:nowrap;flex-direction: row;align-items: center;display: flex;"><div style="margin-left:10px;padding-right: 0px;width:80px">${obj.action}</div></div></div>`,
});
}
结尾
由于项目中只用到了这几个常用的图标，所以才看了看，顺便总结了一下。
如果有描述不准确的地方，欢迎留言指正！
扫一扫
1433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
