创建 chart 实例

绘制图表前必须创建一个 <canvas> 元素或者一个 canvas 上下文环境。
const chart = new F2.Chart({
  id: 'c1',
  width: 500,
  height: 500,
  padding: 'auto'
});

参数

id

el

const chart = new F2.Chart({
  el: document.getElementById('c1')
});

context

const chart = new F2.Chart({
  context: document.getElementById('c1').getContext('2d')
});
说明:idelcontext 这三个属性必须设置一个。

width

height

// 默认使用 canvas 元素的宽高
const chart = new F2.Chart({
  id: 'c1'
});

const chart = new F2.Chart({
  id: 'c1',
  width: 500,
  height: 300
});

padding

const chart = new F2.Chart({
  id: 'c1',
  padding: 'auto' // 默认值,自动计算 padding
});

const chart = new F2.Chart({
  id: 'c1',
  padding: [ 0, 10, 40, 100 ] // 分别设置上、右、下、左边距
});

const chart = new F2.Chart({
  id: 'c1',
  padding: 40 // 单个值
});

const chart = new F2.Chart({
  id: 'c1',
  padding: [ 40, 10, 'auto', 'auto' ]  // 指定几个方向自动计算 padding
});
说明:padding 的使用方法同 CSS 盒模型中的 padding。

appendPadding

下图中红色区域为 appendPadding,黄色区域为 padding

pixelRatio

屏幕画布的像素比,由于 canvas 在高清屏上显示时会模糊,所以需要设置 pixelRatio,一般情况下这个值可以设置成 window.devicePixelRatio。 这个值之所以没有默认使用 window.devicePixelRatio 的原因在于不同场景下的高清方案不同,不同平台上的实现也不一致,所以需要用户自己指定。
// 全局设置,所有的图表生效
F2.Global.pixelRatio = window.devicePixelRatio;
// 只为某个 chart 实例单独设置
const chart = new F2.Chart({
  id: 'c1',
  pixelRatio: window.devicePixelRatio
});

plugins

更多关于插件的使用,详见Plugin

animate

syncY

方法

get

该方法用于获取 chart 内部的属性,如 chart.get('width'),包含的属性如下:
属性名
解释
id
对应 canvas 的 id
padding
当前的图表绘图区域和画布边框的间距
data
原始数据
width
图表宽度
height
图表高度
pixelRatio
图表的屏幕像素比
el
对应 canvas 的 dom 对象
canvas
对应的 canvas 对象(G.Canvas)
geoms
chart render 之后可获取,返回所有的 geoms 对象

source

chart.source(data)

chart.source(data, colDefs)

chart.source(data, {
  a: {
    min: 0,
    max: 100
  }
});
图表数据的列定义用于对数据字段进行定义,如数据的类型,显示别名,数值的格式化等,不同的数字类型的配置项不同,支持的数据类型有:
F2 会自动检测数据类型,用户也可以根据自身需求更改一些属性或者数据的类型,具体支持的配置属性详见 Scale API。

scale

!注意: 如数据属性 field 在 chart.source()chart.scale() 中均有定义,那么后声明的会覆盖之前声明的配置。

chart.scale('field', colDef)

为指定的数据字段进行列定义。
示例:
const data = [
  { x: 0, y: 1 },
  { x: 1, y: 2 },
  { x: 2, y: 3 }
];

// 为 x 字段设置列定义
chart.scale('x', {
  type: 'cat', // 声明 type 字段为分类类型
  values: [ 'A', 'B', 'C' ] // 重新显示的值
  alias: '类型' // 设置属性的别名
});

chart.scale(colDef)

为一个或者多个数据字段进行列定义配置。
示例:
const data = [
  { x: 0, y: 1 },
  { x: 1, y: 2 },
  { x: 2, y: 3 }
];

// 为多个字段设置列定义
chart.scale({
  x: {
    type: 'cat', // 声明 type 字段为分类类型
    values: [ 'A', 'B', 'C' ] // 重新显示的值
    alias: '类型' // 设置属性的别名
  },
  y: {
    type: 'cat'
  }
});

coord

chart.coord()
详见 Coordinate

axis

chart.axis()
详见 Axis

legend

chart.legend()
详见 Legend

tooltip

chart.tooltip()
详见 Tooltip

guide

chart.guide()
详见 Guide

animate

chart.animate()
详见 Animation

创建 Geometry 对象

注意:以上方法返回的是几何标记实例,不是 chart 实例。

render

chart.render()

clear

chart.clear()
F2 重新绘制时不需要 destroy,而仅需要 chart.clear() 然后重新声明语法,如下示例:
chart.clear(); // 清除
chart.source(data);
chart.line().position('a*b');
chart.render();

repaint

chart.repaint()
当修改了 guide、geometry 的配置项时可以重新绘制图表。

changeData

chart.changeData(data)

changeSize

chart.changeSize(width, height)
chart.changeSize(300) 只改变宽度; chart.changeSize(300, 500) 宽度高度同时改变; chart.changeSize(, 300) 只改变高度。

destroy

chart.destroy()

getPosition

chart.getPosition(record)
const point = chart.getPosition({ time: '2010-02-02', value: 20 });

getRecord

chart.getRecord(point)
const obj = chart.getRecord({ x: 100, y: 100 });

getSnapRecords

chart.getSnapRecords(point)
[
  {
    _origin: { year: '1959 年', sales: 38 }, // 该 shape 对应的原始数据
    points: [
      { x: 0.65625, y: 0 },
      { x: 0.65625, y: 0.2375 },
      { x: 0.71875, y: 0.2375 },
      { x: 0.71875, y: 0 }
    ], // 组成该 shape 的关键顶点,归一化数据
    _originY: 38, // Y 轴对应的原始数据
    x: 260.53499698638916, // 该 shape 的 x 轴画布坐标
    y: 165.34375, // 该 shape 的 y 轴画布坐标
    index: 5 // shape 的索引
  },
  ...
  {}
]
const obj = chart.getSnapRecords({x: 100, y: 100});

getLegendItems

chart.getLegendItems()

getXScale

chart.getXScale()

getYScales

chart.getYScales()

showTooltip

chart.showTooltip(point)

hideTooltip

chart.hideTooltip()

事件说明

F2 没有提供事件机制,用户可以直接通过监听 canvas DOM 上的事件进行自定义交互行为。