AntV移动可视化F2个人使用总结

编程入门行业动态更新时间:2024-10-26 06:31:56

AntV移动可视化F2个人使用总结

最近在做移动端App时，用到了AntV移动可视化F2，发现网上对F2使用的资料甚少。
通过F2的文档和自己的摸索，总结了几个常用图表以及常用功能的用法。

AntV移动可视化F2个人使用总结

- - - 安装与引用
    - - 安装
    - chart对象的创建和基本配置
    - F2各函数介绍(常用的函数与函数中常用的属性)
    - - source数据装载
      - tooltip提示信息
      - Axis坐标轴配置
      - Geometry几何标记对象，决定了图表的类型
      - Coordinate配置坐标系
      - Legend图例
      - Animate动画机制
      - pieLabel用于绘制饼图文本的插件
      - Guide绘制图表的辅助元素
      - 结尾

安装与引用

安装

打开项目所在的终端，输入以下命令
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, //是否显示 tooltipMarkertooltipMarkerStyle: { //设置 tooltipMarker 的样式fill: 'red', //颜色},showItemMarker: true, //是否显示每条记录项前面的 markeritemMarkerStyle: { //设置每条记录项前面的 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、xyshowXTip: 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), 默认 autoshowTitle: 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, //动画延迟执行时间 单位 msduration: 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>`,});}