AntV/F2/3.x学习笔记

2024-01-24 08:27:52

F2/3.x

F2简介

F2，可视化解决方案，支持H5环境，兼容node，小程序，weex。

相关链接

官网
GitHub

特性

优雅

  • 轻量，交互自然
  • 流畅
  • 多端异构，兼容多环境

图表丰富，组件完备

扩展灵活

  • 为开发者提供了灵活的扩展机制，包括Shape、动画以及交互的自定义能力
  • 图表样式个性化

开源

快速上手

安装

浏览器或本地引入

<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2.min.js"></script>
<!-- 引入本地脚本 -->
<script src="./f2.js"></script>

通过npm安装

npm install @antv/f2 --save

安装后，

const f2=require('@antv/f2');

基础实例

  1. 创建标签，并指定id
<canvas id="myChart" width="400" height="300"></canvas>
  1. js部分
window.onload=function(){
    //准备数据
    const data=[
        {type:'剧情电影',playAmount:111},
        {type:'文艺电影',playAmount:34},
        {type:'科幻电影',playAmount:566},
        {type:'动画电影',playAmount:233},
        {type:'喜剧电影',playAmount:456},
    ];
    //创建Chart对象
    const chart=new F2.Chart({
        id:'myChart',
        pixelRatio:window.devicePixelRatio
    });
    //载入数据
    chart.source(data);
    //创建图形语法，绘制柱状图，type映射至x轴，playAmount映射至y轴
    chart.interval().position('type*playAmount').color('type');
    //渲染图表
    chart.render();
}
  1. 效果如下图：
    AntV/F2/3.x学习笔记
    更多实例 demo

图表组成

F2 图表一般包含坐标轴（Axis）、几何标记（Geometry）、提示信息（Tooltip）、图例（Legend）等，另外还可以包括辅助标记（Guide）、数据标签（dataLabels）等。
AntV/F2/3.x学习笔记

术语 描述
Coordinate（坐标系） 描述了数据是如何映射到图形所在的平面
Axis（坐标轴） 由坐标轴线（line）、刻度线（tickLine）、刻度文本（label）以及网格线（grid）组成
Legend（图例） 用于标定不同数据类型以及数据的范围，辅助阅读和帮助用户对数据筛选
Geometry（几何标记） 数据被可视化的表现
Attribute（图形属性） 不同几何标记拥有自己的图形属性，如position、color、shape等
Tooltip（提示信息） 当鼠标点击在某个点时，会提示对应的数据信息
Guide（辅助标记） 绘制辅助线、辅助框或者文本

数据

格式

    const data=[
        {type:'剧情电影',playAmount:111},
        {type:'文艺电影',playAmount:34},
        {type:'科幻电影',playAmount:566},
        {type:'动画电影',playAmount:233},
        {type:'喜剧电影',playAmount:456},
    ];

装载数据

chart.source(data);

更新数据

  1. 图表数据更新，需要马上更新图表
chart.changeData(data);
  1. 更新数据，不需要马上更新图表
//先更新数据源
chart.source(newData);
//等需要更新图表时更新图表
chart.repaint();
  1. 更新数据时，可以清除图表元素，重新定义图形语法、改变图标类型和配置
chart.clear();
chart.source(newData);
chart.interval().position(x*y).color('z');
chart.render();

特殊图表的数据

饼图

数据集的每一条记录必须含有一个字符串类型的常量字段，如：

    const data=[
        {type:'剧情电影',percent:0.08,a:'1'},
        {type:'文艺电影',percent:0.02,a:'1'},
        {type:'科幻电影',percent:0.4,a:'1'},
        {type:'动画电影',percent:0.17,a:'1'},
        {type:'喜剧电影',percent:0.33,a:'1'},
    ];

区间柱状图

当x轴或者y轴的数据为数组时，会被默认映射为一段区间，如：
AntV/F2/3.x学习笔记

    const data=[
        {type:'分类一',playAmount:[111,330]},
        {type:'分类二',playAmount:[34,200]},
        {type:'分类三',playAmount:[566,200]},
        {type:'分类四',playAmount:[233,0]},
        {type:'分类五',playAmount:[456,567]},
    ];

股票图

股票图的Y轴数据由收盘价、开盘价、最高价和最低价组成，所以Y轴对应的数据为一个数组

const data = [
  { time: '2015-09-02', range: [ 6.2, 5.99, 6.84, 5.98 ], trend:1 },
  { time: '2015-09-07', range: [ 6.19, 6.2, 6.45, 6.09 ], trend: 0 },
];

度量（Scale）

数据空间到图形空间的转换桥梁，F2支持的度量类型如下：

  • identity，常量类型的数值；
  • linear，连续的数字，如[1,2,3]；
  • cat，分类，如[‘男’,‘女’]；
  • timeCat，时间类型；
const scale={
	a:{
		type:'cat'
	},
	b:{
		min:0,
		max:100
	}
};

通用属性

chart.scale('fileName',{
});
属性名 类型 描述
type String 度量类型（identity、linear、cat、timeCat）
formatter Function 自定义坐标轴刻度点的文本显示，会影响坐标轴、图例、提示信息的显示
range Array 输出数据的范围
alias String 该数据字段的显示别名，一般用于字段英文名转换成中文名
ticks Array 指定坐标轴刻度点的文本信息

各个Scale类型对应的属性

几何标记

声明几何标记

const geom=chart.point();

几何标记类型

类型 描述
point 点，用于绘制点图、气泡图
path 路径，无序的点连接而成的一条线，常用于路径图的绘制
line 线，点按照x轴连接成一条线
area 填充线图跟坐标系之间构成区域图，也可指定上下范围
interval 使用矩形或者弧形，用面积来表示大小关系的图形，如柱状图、饼图等
polygon 多边形，可以用于构建色块图、地图等
schema 自定义图形，如构建箱型图、股票图等

F2没有特定的图表类型概念，但是仍支持所有传统图表类型的绘制，详情见几何标记类型和传统图表的对应关系

几何标记和图形形状

geom类型 shape类型 描述
point ‘circle’，‘hollowCircle’，‘rect’ 默认为’circle’
line ‘line’，‘smooth’，‘dash’ –
area ‘area’，‘smooth’ 填充内容的区域图
interval ‘rect’ –
polygon ‘polygon’ –
schema ‘candle’ 目前仅K线图

若无法满足可以自定义shape

图形属性

  • position：位置；
  • color：颜色，包含色调、饱和度和亮度；
  • size：大小，不同的几何标记对大小的定义有差异；
  • shape：形状

使用

图形属性是属于每一个几何标记geom的，需先声明几何标记

chart.<geomType>().<attrType>(fields[, callback]);
  • geomType：几何标记类型；
  • attrType：图形属性类型，对应视觉通道；
  • fields：参与单个视觉通道映射的字段；
  • callback：回调函数，定义如何解析视觉通道，不提供则使用F2默认视觉通道
chart.interval().position('a*b').color('c', (cValue) => {
 if (cvalue === 'fail') {
   return 'red';
 }
 return 'green';
});

position

确定x轴和y轴的数据字段

color

语法如下

  • color(‘field’)，默认颜色；
  • color(‘field’,colors)，自定义颜色，colors可以是字符串也可以是数组；
  • color(‘field’,‘color1-color2-colorN’)，颜色渐变路径；
  • color(‘field’,callback)，使用回调函数进行自定义颜色，可以使用多个字段使用*号连接；
  • color(’#fff’)，指定颜色常量，不进行数据映射。

使用回调函数

chart.point().position('x*y').color('level*value', (level, value) => {
 if (level < 2) {
   if (value > 10) {
     return 'green';
   }
   return 'blue';
 } else {
   if (value > 20) {
     return '#cdcdcd';
   }
   return 'red';
 }
});

shape

语法如下

  • shape(‘field’)，将指定字段映射到内置shapes数组中；
  • shape(‘field’,shapes)，自定义shapes数据；
  • shape(‘field’,callback)，使用回调函数自定义shape，可以根据单个或者多个字段确定；
  • shape(‘circle’)，固定shape。

使用回调函数

chart.point()
 .position('x*y')
 .shape('value', (value) => {
   if (value > 10) {
     return 'circle';
   }
   return 'rect';
 });

size

含义

  • 对于point，size对应点的半径；
  • 对于line线，size对应线的粗细；
  • 对于interval柱状图，size对应柱子的宽度；

语法如下

  • size(‘field’)，指定映射的字段，默认大小范围为[1,10]；
  • size(‘field’,[min,{min},min,{max})，指定映射的字段，自定义范围；
  • size(‘field’，callback)，使用回调函数自定义，可以使用多个单个或多个字段映射；
  • size(5)，固定大小。

使用回调函数

chart.point().position('x*y').size('level*text', (level, text) => {
 if (level === 0) {
   return 50;
 }
 return text.length * 10; // 根据文本长度返回长度
});

Geom支持的图形属性

  • area和polygon不支持size

坐标系

设置坐标系

默认为直角坐标系，若需切换，可调用以下语法声明：

//声明坐标系类型
chart,coord('coordType');
//声明坐标系的同时，声明配置项
chart.coord('coordType',{
	//配置
});

坐标系类型

  • rect，直角坐标系；
  • polar，极坐标系

坐标系配置

直角坐标系

//声明直角坐标系
chart.coord('rect');
//直角坐标系转置
chart.coord('rect',{
	transposed:true
	});

极坐标

//声明极坐标
chart.coord('polar');
//配置
chart.coord('polar',{
	startAngle:{Number},//起始弧度
	endAngle:{Number},//结束弧度
	innerRadius:{Number},//设置空心部分的半径设置
	radius:{Number},//设置实心圆的半径
	transposed:true //极坐标转置
	});

Api见官网

以上内容皆参考F2官网

上一篇：Python-单元测试unittest


下一篇：改造BeautifulReport适用于unittest单、多线程执行，输出测试报告