logo

F2

  • Manual
  • Component Documentation
  • Examples
  • Productsantv logo arrow
  • 5.0.3
  • 快速上手
  • 图表组成
  • 图形语法
  • 数据
  • 度量
  • 坐标系
  • Framework
    • 小程序上渲染 F2
  • Advanced
  • Question

数据

Previous
图形语法
Next
度量

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

数据是绘制一张图表最基本的部分。F2 基本的数据格式如下:

const data = [
{ year: 2010, sales: 40 },
{ year: 2011, sales: 30 },
{ year: 2012, sales: 50 },
{ year: 2013, sales: 60 },
{ year: 2014, sales: 70 },
{ year: 2015, sales: 80 },
{ year: 2016, sales: 80 },
{ year: 2017, sales: 90 },
{ year: 2018, sales: 120 },
];

特殊图表的数据说明

饼图

绘制饼图时,数据集中的每一条记录中必须包含一个常量字段(并且必须是字符串类型),如下所示:

const data = [
{ name: '芳华', percent: 0.4, a: '1' },
{ name: '妖猫传', percent: 0.2, a: '1' },
{ name: '机器之血', percent: 0.18, a: '1' },
{ name: '心理罪', percent: 0.15, a: '1' },
{ name: '寻梦环游记', percent: 0.05, a: '1' },
{ name: '其他', percent: 0.02, a: '1' },
];

详见饼图示例。

区间柱状图

当 x 轴或者 y 轴的数据为数组时,我们默认会将映射为一段区间,进而绘制为区间柱状图。如下数据格式:

const data = [
{ x: '分类一', y: [76, 100] },
{ x: '分类二', y: [56, 108] },
{ x: '分类三', y: [38, 129] },
{ x: '分类四', y: [58, 155] },
{ x: '分类五', y: [45, 120] },
{ x: '分类六', y: [23, 99] },
{ x: '分类七', y: [18, 56] },
{ x: '分类八', y: [18, 34] },
];

详见区间柱状图示例。