创建 chart 实例


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


1const chart = new F2.Chart({
2  id: 'c1',
3  width: 500,
4  height: 500,
5  padding: 'auto'
6});


参数


id



el



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


context



1const chart = new F2.Chart({
2  context: document.getElementById('c1').getContext('2d')
3});


说明:idelcontext 这三个属性必须设置一个。


width



height



 1// 默认使用 canvas 元素的宽高
 2const chart = new F2.Chart({
 3  id: 'c1'
 4});
 5
 6const chart = new F2.Chart({
 7  id: 'c1',
 8  width: 500,
 9  height: 300
10});


padding



 1const chart = new F2.Chart({
 2  id: 'c1',
 3  padding: 'auto' // 默认值,自动计算 padding
 4});
 5
 6const chart = new F2.Chart({
 7  id: 'c1',
 8  padding: [ 0, 10, 40, 100 ] // 分别设置上、右、下、左边距
 9});
10
11const chart = new F2.Chart({
12  id: 'c1',
13  padding: 40 // 单个值
14});
15
16const chart = new F2.Chart({
17  id: 'c1',
18  padding: [ 40, 10, 'auto', 'auto' ]  // 指定几个方向自动计算 padding
19});


说明:padding 的使用方法同 CSS 盒模型中的 padding。


appendPadding



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



pixelRatio



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


1// 全局设置,所有的图表生效
2F2.Global.pixelRatio = window.devicePixelRatio;
3// 只为某个 chart 实例单独设置
4const chart = new F2.Chart({
5  id: 'c1',
6  pixelRatio: window.devicePixelRatio
7});


说明:

如果 pixelRatio 方案仍然无法满足您的需求,您可以根据当前设备的分辨率进行像素值的换算,如下所示:


 1const ONE_REM = parseInt(document.documentElement.style.fontSize, 10) || 100;
 2const SCALE = ONE_REM / 100;
 3
 4/**
 5 * 像素转换
 6 * @param {Number} px - 750视觉稿像素
 7 * @return {Number} 屏幕上实际像素
 8 */
 9function px2hd(px) {
10  return Number((px * SCALE).toFixed(1));
11}
12
13chart.legend({
14  titleStyle: {
15    fontSize:px2hd(12), // 文本大小
16  }
17});


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)



1chart.source(data, {
2  a: {
3    min: 0,
4    max: 100
5  }
6});


图表数据的列定义用于对数据字段进行定义,如数据的类型,显示别名,数值的格式化等,不同的数字类型的配置项不同,支持的数据类型有:



F2 会自动检测数据类型,用户也可以根据自身需求更改一些属性或者数据的类型,具体支持的配置属性详见 Scale API。


scale



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


chart.scale('field', colDef)


为指定的数据字段进行列定义。



示例:


 1const data = [
 2  { x: 0, y: 1 },
 3  { x: 1, y: 2 },
 4  { x: 2, y: 3 }
 5];
 6
 7// 为 x 字段设置列定义
 8chart.scale('x', {
 9  type: 'cat', // 声明 type 字段为分类类型
10  values: [ 'A', 'B', 'C' ] // 重新显示的值
11  alias: '类型' // 设置属性的别名
12});


chart.scale(colDef)


为一个或者多个数据字段进行列定义配置。



示例:


 1const data = [
 2  { x: 0, y: 1 },
 3  { x: 1, y: 2 },
 4  { x: 2, y: 3 }
 5];
 6
 7// 为多个字段设置列定义
 8chart.scale({
 9  x: {
10    type: 'cat', // 声明 type 字段为分类类型
11    values: [ 'A', 'B', 'C' ] // 重新显示的值
12    alias: '类型' // 设置属性的别名
13  },
14  y: {
15    type: 'cat'
16  }
17});


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() 然后重新声明语法,如下示例:


1chart.clear(); // 清除
2chart.source(data);
3chart.line().position('a*b');
4chart.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)



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


getRecord


chart.getRecord(point)



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


getSnapRecords


chart.getSnapRecords(point)



 1[
 2  {
 3    _origin: { year: '1959 年', sales: 38 }, // 该 shape 对应的原始数据
 4    points: [
 5      { x: 0.65625, y: 0 },
 6      { x: 0.65625, y: 0.2375 },
 7      { x: 0.71875, y: 0.2375 },
 8      { x: 0.71875, y: 0 }
 9    ], // 组成该 shape 的关键顶点,归一化数据
10    _originY: 38, // Y 轴对应的原始数据
11    x: 260.53499698638916, // 该 shape 的 x 轴画布坐标
12    y: 165.34375, // 该 shape 的 y 轴画布坐标
13    index: 5 // shape 的索引
14  },
15  ...
16  {}
17]


1const 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 上的事件进行自定义交互行为。