<!-- 引入在线资源 -->
<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');

基础实例

创建标签，并指定id

<canvas id="myChart" width="400" height="300"></canvas>

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();
}

效果如下图：

更多实例 demo

图表组成

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

术语	描述
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);

更新数据

图表数据更新，需要马上更新图表

chart.changeData(data);

更新数据，不需要马上更新图表

//先更新数据源
chart.source(newData);
//等需要更新图表时更新图表
chart.repaint();

更新数据时，可以清除图表元素，重新定义图形语法、改变图标类型和配置

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轴的数据为数组时，会被默认映射为一段区间，如：
区间柱状图

    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,{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官网

标签：playAmount,F2,标记,color,AntV,chart,笔记,图表,type
来源： https://blog.csdn.net/weixin_44473112/article/details/100079004

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

AntV/F2/3.x学习笔记

F2/3.x

F2简介

相关链接

特性

优雅

图表丰富，组件完备

扩展灵活

开源

快速上手

安装

浏览器或本地引入

通过npm安装

基础实例

图表组成

数据

格式

装载数据

更新数据

特殊图表的数据

饼图

区间柱状图

股票图

度量（Scale）

通用属性

几何标记

声明几何标记

几何标记类型

几何标记和图形形状

图形属性

使用

position

color

shape

size

Geom支持的图形属性

坐标系

设置坐标系

坐标系配置

Api见官网