avtv-f2入门

F2，一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）。完备的图形语法理论，满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。

# 简介

官方网站 (opens new window) 官方文档 (opens new window) 其他 (opens new window)

除了以上官方网站，也有很多基于 F2 的封装插件

ant-design-mobile-chart (opens new window)：基于 F2 封装的 ant-mobile 图表组件。
BizCoblin (opens new window)：基于 F2，React 移动端可视化图表库。
VChart (opens new window)：VUX(Vue.js 移动端 UI 组件库)基于 F2 封装的图表组件。
weex-chart (opens new window)：Weex 上的图表组件。
eapp-dd-charts (opens new window)：钉钉 E 应用图表。

# 入门教程

# 官方文档

创建 canvas 标签

<canvas id="container" width="400" height="260"></canvas>

添加逻辑

import { Canvas, Chart, Axis, Interval, Tooltip } from "@antv/f2";

// F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
const data = [
  { genre: "Sports", sold: 275 },
  { genre: "Strategy", sold: 115 },
  { genre: "Action", sold: 120 },
  { genre: "Shooter", sold: 350 },
  { genre: "Other", sold: 150 },
];

// 获取 canvas context
const context = document.getElementById("container").getContext("2d");

const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
    <Chart data={data}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
      <Tooltip />
    </Chart>
  </Canvas>
);

const canvas = new Canvas(props);
canvas.render();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 已废弃方式

<canvas id="container" width="400" height="260"></canvas>

import F2 from "@antv/f2";
const data = [
  { genre: "Sport", sold: 1221 },
  { genre: "Sport2", sold: 222 },
  { genre: "Sport3", sold: 444 },
];
const chart = new F2.Chart({
  id: "container",
  pixelRatio: window.devicePixelRatio,
});
chart.source(data);
chart.interval().position("genre*sold");
chart.render();

1
2
3
4
5
6
7
8
9
10
11
12
13

# 其他平台

# H5 部分文档说明

# Chart

绘制图表前必须创建一个 <canvas>元素或者一个 canvas 上下文环境。

const chart = new F2.Chart({
  id: "c1",
  width: 500,
  height: 500,
  padding: "auto",
});

1
2
3
4
5
6

# 参数

# id

参数类型：String
描述：指定对应 canvas 的 id
默认值：null

# width

参数类型：Number
描述：图表的宽度，如果 <canvas> 元素上设置了宽度，可以不传入
默认值：null

# height

参数类型：Number
描述：图表的高度，如果 <canvas> 元素上设置了高度，可以不传入
默认值：null

# appendPadding

参数类型：Number/Array
描述：图表画布区域四边的预留边距，即我们会在 padding 的基础上，为四边再加上 appendPadding 的数值，默认为 15。
默认值：15

# pixelRatio

参数类型：Number
描述：屏幕画布的像素比
默认值：1

屏幕画布的像素比，由于 canvas 在高清屏上显示时会模糊，所以需要设置 pixelRatio，一般情况下这个值可以设置成 window.devicePixelRatio。这个值之所以没有默认使用 window.devicePixelRatio 的原因在于不同场景下的高清方案不同，不同平台上的实现也不一致，所以需要用户自己指

# 方法

# chart.source(data)

data：Array，可视化数据

# clear

chart.clear()

描述：清除图表内容
返回：当前 chart 实例

# changeData

chart.changeData(data)

参数
- data: Array，数据源
描述：改变数据，同时图表刷新
返回：当前 chart 实例

# destroy

chart.destroy()

描述：销毁图表，<canvas> dom 元素不会销毁

# Geometry

几何标记对象，决定了图表的类型

geom 类型	说明
point	点，用于点图的构建。
path	路径，无序的点连接而成的一条线。
line	线，点按照 x 轴连接成一条线，构成线图。
area	填充线图跟坐标系之间构成区域图，也可以指定上下范围。
interval	使用矩形或者弧形，用面积来表示大小关系的图形，一般构成柱状图、饼图等图表。
polygon	多边形，可以用于构建热力图、地图等图表类型。
schema	k 线图，箱型图。

# position

将数据值映射到图形的位置上的方法。

chart.line().position("x*y");
chart.line().position(["x", "y"]);

1
2

# color

将数据值映射到图形的颜色上的方法。

chart.line().color("red"); // 常量颜色
chart.line().color("type"); // 对 type 字段进行映射，使用内置的颜色
chart.line().color("type", ["red", "blue"]); // 指定颜色
chart.line().color("type", (type) => {
  // 通过回调函数
  if (type === "a") {
    return "red";
  }
  return "blue";
});
chart.line().color("type*value", (type, value) => {
  //多个参数，通过回调函数
  if (type === "a" && value > 100) {
    return "red";
  }
  return "blue";
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# size

将数据值映射到图形的大小上的方法。

# Axis

坐标轴配置

# Legend

F2 图例的生成是由图形语法中的图形属性决定的，我们会根据图形属性映射以及数据的类型自动生成不同类型的图例：color, size 这两个图形属性如果判断接收的参数是数据源的字段时，会自动生成不同的图例：

color，会赋予不同的图例项不同的颜色来区分图形，如果该字段是分类类型，则会生成离散图例，如果是连续类型，则会生成连续图例（本期未支持）
size，在图例上显示图形的大小（本期未支持）

# chart.legend(false)

不显示所有的图例。

# chart.legend(field, false)

不显示 field 字段对应的图例。

field: String

代表图例对应的数据字段名。

# chart.legend(field, config)

为 field 对应的图例进行配置

上次更新: 2024/01/18, 10:44:15

← antv-l7Plot Vue实现pdf、doc、txt、xlsx等的预览→