AntV/F2/3.x学习笔记

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单、多线程执行,输出测试报告