AntV-f2開發文檔

安裝

瀏覽器引入

<script src="./f2.js"></script>複製代碼

npm 安裝

安裝

npm install @antv/f2 --save複製代碼

引入

const F2 = require('@antv/f2');複製代碼

上手

步驟

1. 建立 Chart 圖表對象，指定圖表 ID、指定圖表的寬高、邊距等信息；

2. 載入圖表數據源；

3. 使用圖形語法進行圖表的繪製；

4. 渲染圖表。

建立canvas

<canvas id="myChart" width="400" height="260"></canvas>複製代碼

數據源

const data = [  { genre: 'Sports', sold: 275 },  { genre: 'Strategy', sold: 115 },  { genre: 'Action', sold: 120 },  { genre: 'Shooter', sold: 350 },  { genre: 'Other', sold: 150 },];複製代碼

建立 Chart 對象

const chart = new F2.Chart({  id: 'myChart',  pixelRatio: window.devicePixelRatio // 指定分辨率});複製代碼

載入數據源

chart.source(data);複製代碼

建立圖形

chart.interval().position('genre*sold').color('genre'); //柱狀圖chart.intervalStack().position('sold').color('genre'); //餅圖 chart.line().position('genre*sold'); //折現 chart.point().position('genre*sold'); //點圖複製代碼

渲染圖表

chart.render();複製代碼

進階

Geometry

chart.<geomType>()  .position()  .size()  .color()  .shape()  .adjust()  .style()  .animate();複製代碼

數據映射相關的屬性函數：position, color, shape, size；

顯示輔助信息的函數：style；

額外的控制函數：adjust；

動畫配置函數：animate

geom 類型	說明
point	點，用於點圖的構建。
path	路徑，無序的點鏈接而成的一條線。
line	線，點按照 x 軸鏈接成一條線，構成線圖。
area	填充線圖跟座標系之間構成區域圖，也能夠指定上下範圍。
interval	使用矩形或者弧形，用面積來表示大小關係的圖形，通常構成柱狀圖、餅圖等圖表。
polygon	多邊形，能夠用於構建熱力圖、地圖等圖表類型。
schema	k 線圖，箱型圖。

chart.<geomType>({  generatePoints: {Boolean}, //是否生成多個點來繪製圖形，true 時會生成多個點  sortable: {Boolean}, //是否對數據按照 x 軸對應字段進行排序，true 時會進行排序  startOnZero: {Boolean}, //用於設置圖形的 Y 軸基線是否從 0 開始，默認爲 true，以 0 爲基線  connectNulls: {Boolean} //用於設置是否將空數據鏈接起來（用於 line，area 以及 path 類型）})複製代碼

adjust

chart.interval().adjust('stack');chart.interval().adjust({  type: 'stack'});chart.interval().adjust([{  type: 'dodge',  marginRatio: 0, // 數值範圍爲 0 至 1，用於調整分組中各個柱子的間距}]);複製代碼

Coordinate

// 選擇笛卡爾座標系chart.coord('rect');// 座標系翻轉，繪製條形圖時須要chart.coord({  transposed: true});chart.coord('rect', {  transposed: true});// 選擇極座標系chart.coord('polar');// 更多配置chart.coord('polar', {  transposed: true, // 座標系翻轉  startAngle: {Number}, // 起始弧度  endAngle: {Number}, // 結束弧度  innerRadius: {Number}, // 內環半徑，數值爲 0 - 1 範圍  radius: {Number} // 半徑，數值爲 0 - 1 範圍});複製代碼

Axis

屬性	類型	使用說明
line	Object/null	座標軸線的配置信息，設置 null 時不顯示，支持全部的 canvas 屬性，參考繪圖屬性，如需調整顯示層級，可設置 top: true* 展現在最上層圖形或者 *top: false 展現在最下層圖形。
labelOffset	Number	座標軸文本距離軸線的距離
grid	Object/Function/null	座標軸網格線的配置項，設置 null 時不顯示，支持全部的 canvas 屬性，參考繪圖屬性，支持回調函數，另外在極座標下，能夠經過配置 type: 'arc' 將其繪製爲圓弧；如需調整顯示層級，可設置 top: true* 展現在最上層圖形或者 *top: false 展現在最下層圖形。
tickLine	Object/null	座標軸刻度線的樣式配置，設置 null 不顯示，支持全部的 canvas 屬性，參考繪圖屬性 ，如需調整顯示層級，可設置 top: true* 展現在最上層圖形或者 *top: false 展現在最下層圖形。
label	Object/Function/null	座標軸文本配置，設置 null 不顯示, 支持全部的 canvas 屬性，參考繪圖屬性，支持回調函數，如需調整顯示層級，可設置 top: true* 展現在最上層圖形或者 *top: false 展現在最下層圖形。
position	String	座標軸顯示位置配置，x 軸默認位於底部 'bottom'，y 軸可設置 position 爲 'left'、'right'

Legend

chart.legend({  custom: true,  position: 'left',  items: [    { name: 'a1', marker: 'square', fill: 'red'},    { name: 'a2', marker: 'square', fill: 'blue'},    { name: 'a3', marker: 'square', fill: 'green'}  ]});chart.legend({  custom: true,  position: 'left',  items: [    { name: 'a1', marker: { symbol: 'square', stroke: 'red', radius: 8 }},    { name: 'a2', marker: { symbol: 'square', stroke: 'green', radius: 8 }},    { name: 'a3', marker: { symbol: 'square', stroke: 'blue', radius: 8 }}  ]});複製代碼

Tooltip

chart.tooltip(false); // 關閉 tooltipchart.tooltip({  alwaysShow: false, // 當移出觸發區域，是否仍顯示提示框內容，默認爲 false，移出觸發區域 tooltip 消失，設置爲 true 能夠保證一直顯示提示框內容  offsetX: 0, // x 方向的偏移  offsetY: 0, // y 方向的偏移  triggerOn: [ 'touchstart', 'touchmove' ], // tooltip 出現的觸發行爲，可自定義，用法同 legend 的 triggerOn  triggerOff: 'touchend', // 消失的觸發行爲，可自定義  showTitle: false, // 是否展現標題，默認不展現  showCrosshairs: false, // 是否顯示輔助線，點圖、路徑圖、線圖、面積圖默認展現  crosshairsStyle: {    stroke: 'rgba(0, 0, 0, 0.25)',    lineWidth: 2  }, // 配置輔助線的樣式  showTooltipMarker: true, // 是否顯示 tooltipMarker  tooltipMarkerStyle: {    fill: '#fff' // 設置 tooltipMarker 的樣式  },  background: {    radius: 2,    fill: '#1890FF',    padding: [ 6, 10 ]  }, // tooltip 內容框的背景樣式  titleStyle: {    fontSize: 24,    fill: '#fff',    textAlign: 'start',    textBaseline: 'top'  }, // tooltip 標題的文本樣式配置，showTitle 爲 false 時不生效  nameStyle: {    fontSize: 24,    fill: '#fff',    textAlign: 'start',    textBaseline: 'middle'  }, // tooltip name 項的文本樣式配置  valueStyle: {    fontSize: 24,    fill: '#fff',    textAlign: 'start',    textBaseline: 'middle'  }, // tooltip value 項的文本樣式配置  showItemMarker: true, // 是否展現每條記錄項前面的 marker  itemMarkerStyle: {    radius: 7,    symbol: 'circle',    lineWidth: 2,    stroke: '#fff'  }, // 每條記錄項前面的 marker 的樣式配置  custom: {Boolean}, // 是否自定義 tooltip 提示框  onShow(obj) {    // obj: { x, y, title, items }  }, // tooltip 顯示時的回調函數  onHide(obj) {    // obj: { x, y, title, items }  }, // tooltip 隱藏時的回調函數  onChange(obj) {    // obj: { x, y, title, items }  }, // tooltip 內容發生改變時的回調函數  crosshairsType: {String}, // 輔助線的種類  showXTip: {Boolean}, // 是否展現 X 軸的輔助信息  showYTip: {Boolean}, // 是否展現 Y 軸的輔助信息  xTip: {Object}/{Function}, // X 軸輔助信息的文本樣式  yTip: {Object}/{Function, // Y 軸輔助信息的文本樣式  xTipBackground: {Object}, // X 軸輔助信息的背景框樣式  yTipBackground: {Object}, // Y 軸輔助信息的背景框樣式    snap: {Boolean} // 是否將輔助線準肯定位至數據點});複製代碼

Guide

用於繪製圖表的輔助元素，該方法的返回值不爲 chart 對象，而是一個 guide 對應的控制類 guideController。 包括輔助線、輔助文本、輔助框、輔助弧線（只在極座標下適用）、輔助 html 等。

Animate

在 F2 的動畫中，圍繞圖表數據的變化，咱們將圖形元素的動畫劃分爲如下四種類型：

動畫類型	解釋	觸發時機
appear	圖表第一次加載時的入場動畫	第一次 chart.render()
enter	圖表繪製完成，數據發生變動後，產生的新圖形的進場動畫	chart.changeData(data)
update	圖表繪製完成，數據發生變動後，有狀態變動的圖形的更新動畫	chart.changeData(data)
leave	圖表繪製完成，數據發生變動後，被銷燬圖形的銷燬動畫	chart.changeData(data)

chart.animate({  'axis-label': {    appear: {      animation: {String} || {Function}, // 定義動畫執行函數      easing: {String} || {Function}, // 動畫緩動函數      delay: {Number} || {Function}, // 動畫延遲執行時間，單位 ms      duration: {Number}  // 動畫執行時間，單位 ms    }, // 初始化入場動畫配置    update: {}, // 更新動畫配置，配置屬性同 appear    enter: {}, // 數據變動後，新產生的圖形的入場動畫配置，配置屬性同 appear    leave: {} // 銷燬動畫配置，配置屬性同 appear  }, // 對座標軸文本進行動畫配置  'axis-tick': {} // 對座標軸刻度線進行動畫配置，配置屬性同 axis-label  'axis-grid': {} // 對座標軸網格線進行動畫配置，配置屬性同 axis-label  'axis-line': {} // 對座標軸線進行動畫配置，配置屬性同 axis-label  line: {} // 對摺線圖進行動畫配置，配置屬性同 axis-label  area: {} // 對面積圖進行動畫配置，配置屬性同 axis-label  interval: {} // 對柱狀圖進行動畫配置，配置屬性同 axis-label  path: {} // 對路徑圖進行動畫配置，配置屬性同 axis-label  point: {} // 對點圖進行動畫配置，配置屬性同 axis-label  polygon: {} // 對多邊形進行動畫配置，配置屬性同 axis-label  schema: {} // 對自定義圖形進行動畫配置，配置屬性同 axis-label});// 關閉圖表全部動畫chart.animate(false)複製代碼

目前對動畫開放的圖形元素包括：

圖形元素名	解釋
axis-label	座標軸文本
axis-grid	座標軸網格線
axis-tick	座標軸刻度線
axis-line	座標軸線
line	折線圖
area	面積圖
interval	柱狀圖
path	路徑圖
point	點圖
polygon	多邊形
schema	自定義圖形

Interaction

chart.interaction('pie-select', {  startEvent: {String}, // 觸發事件，默認爲 tap  animate: {Boolean} || {Object}, // 動畫配置  offset: {Number}, // 光環偏移距離  appendRadius: {Number}, // 光環大小  style: {Object}, // 光環的樣式配置  cancelable: {Boolean}, // 是否容許取消選中，默認值爲 true，表示容許  onStart: {Function}, // 事件觸發後的回調  onEnd: {Function}, // 事件結束後的回調  defaultSelected: {Object} // 設置默認選中的數據，該屬性須要在 chart.render() 以後調用方可生效});複製代碼

PieLabel

chart.pieLabel({  anchorOffset: {Number}, // 錨點的偏移量  inflectionOffset: {Number}, // 拐點的偏移量  sidePadding: {Number}, // 文本距離畫布左右兩邊的距離  lineHeight: {Number}, // 文本的最大行高  adjustOffset: {Number}, // 發生調整時的偏移量  skipOverlapLabels: {Boolean}, // 是否不展現重疊的文本  lineStyle: {Object}, // 鏈接線的樣式  anchorStyle: {Object}, // 錨點的樣式  label1: {Function}, // label1 文本內容及其樣式，Function 類型，回調函數  label2: {Function}, // label2 文本內容及其樣式，Function 類型，回調函數  onClick: {Function}, // 點擊行爲，回調函數  triggerOn: {String}, // 點擊行爲觸發的事件類型  activeShape: {Boolean}, // 當有圖形被選中的時候，是否激活圖形  activeStyle: {Object} // 設置激活圖形的樣式})複製代碼

屬性名	類型	默認值	說明
anchorOffset	Number	5	錨點的偏移量。
inflectionOffset	Number	15	拐點的偏移量。
sidePadding	Number	20	文本距離畫布左右兩邊的距離。
lineHeight	Number	32	文本的最大行高。
adjustOffset	Number	15	發生調整時的偏移量。
skipOverlapLabels	Boolean	false	是否將重疊的文本忽略，默認爲 false，即展現所有文本。
lineStyle	Object		鏈接線的樣式，顏色默認同對應餅圖顏色相同。
anchorStyle	Object		錨點的樣式，顏色默認同對應餅圖的樣色相同。
label1	Function	null	配置 label1 文本內容及其樣式，是個回調函數，詳細使用見連接，該函數的返回值必須是一個對象。
label2	Function	null	配置 label2 文本內容及其樣式，是個回調函數，詳細使用見連接，該函數的返回值必須是一個對象。
onClick	Function	null	點擊行爲定義函數，詳細使用見連接。
triggerOn	String	'touchstart'	配置點擊行爲觸發的事件類型。
activeShape	Boolean	false	當有圖形被選中的時候，是否激活圖形，默認不激活。
activeStyle	Object	{ offset: 1, appendRadius: 8, fillOpacity: 0.5 }	設置被激活圖形的顯示樣式。其中 offset 以及 appendRadius 參數的含義同 pie-select api 中的含義相同，分別表明光環的偏移距離以及光環的大小，其餘屬性爲繪圖屬性便可。

ScrollBar

chart.scrollBar({  // 一些配置項});複製代碼

屬性名	類型	默認值	說明
mode	String	'x'	用於肯定進度條的渲染方向，可選值爲 'x', 'y', 'xy'
xStyle	Object	{ backgroundColor: 'rgba(202, 215, 239, .2)', fillerColor: 'rgba(202, 215, 239, .5)', size: 4, lineCap: 'round', offsetX: 0, offsetY: 8 }	用於設置 x 軸方向進度條的樣式，其中：backgroundColor：進度條背景色fillColor: 範圍進度條的背景色size: 進度條線寬lineCap: line 的圖形屬性offsetX: 進度條 x 方向的偏移量offsetY: 進度條 y 方向的偏移量
yStyle	Obect	{ backgroundColor: 'rgba(202, 215, 239, .2)', fillerColor: 'rgba(202, 215, 239, .5)', size: 4, lineCap: 'round', offsetX: 8, offsetY: 0 }	用於設置 y 軸方向進度條的樣式，其中：backgroundColor：進度條背景色fillColor: 範圍進度條的背景色size: 進度條線寬lineCap: line 的圖形屬性offsetX: 進度條 x 方向的偏移量offsetY: 進度條 y 方向的偏移量

內置函數

獲取方式：

const Util = F2.Util;

upperFirst

upperFirst(s)

• 描述：將字符串的第一個字母轉換成大寫

• 參數：String 類型

• 返回：返回首字母大寫後的字符串

lowerFirst

lowerFirst(s)

• 描述：將字符串的第一個字母轉換成小寫

• 參數：String 類型

• 返回：返回首字母小寫後的字符串

isString

isString(value)

• 描述：判斷是不是字符串

• 參數：任意類型的值

• 返回：返回判斷結果

isNumber

isNumber(value)

• 描述：判斷是否數字

• 參數：任意類型的值

• 返回：返回判斷結果

isBoolean

isBoolean(value)

• 描述：判斷是不是布爾類型

• 參數：任意類型的值

• 返回：返回判斷結果

isFunction

isFunction(fn)

• 描述：判斷是否爲函數

• 參數：任意類型的值

• 返回：返回判斷結果

isArray

isArray(value)

• 描述：判斷是否爲數組

• 參數：任意類型的值

• 返回：返回判斷結果

isDate

isDate(value)

• 描述：判斷是否爲日期類型

• 參數：任意類型的值

• 返回：返回判斷結果

isNil

isNil(o)

• 描述：判斷值是否爲空（undefined 或者 null）

• 參數：任意類型的值

• 返回：返回判斷結果

isObject

isObject(value)

• 描述：判斷是否爲對象類型

• 參數：任意類型的值

• 返回：返回判斷結果

deepMix

deepMix(target, source1, source2 source3)

• 描述：深拷貝

• 參數：target 拷貝的目標，source 拷貝對象，最多支持 3 個對象

• 返回：拷貝結果

mix

mix(target, source1, source2 source3)

• 描述：淺拷貝

• 參數：target 拷貝的目標，source 拷貝對象，最多支持 3 個對象

• 返回：拷貝結果

indexOf

indexOf(arr, element)

• 描述：查找元素在數組中的索引

• 參數：arr：查找的數組，element: 查找的元素

• 返回：返回索引值

each

each(elements, func)

• 描述：遍歷數組或者對象

• 參數：elements：須要遍歷的數組或者對象，func：回調函數

• 返回：

Util.each([ 1, 2, 3 ], (val, index) => { console.log('每項的值', val); console.log('索引', index);});Util.each([ 1, 2, 3, 4, 5 ], (val, index) => { if (val === 4) { return false; // 跳出循環 }});

getPixelRatio

getPixelRatio()

• 描述：獲取當前設備的像素比

• 參數：無

• 返回：Number, 返回當前設備像素比

getRelativePosition

getRelativePosition(point, canvas)

• 描述：將當前鼠標的座標轉換爲畫布的相對座標

• 參數：point: 當前鼠標座標，canvas: 當前圖表的 canvas 對象，chart.get('canvas') 獲取

• 返回：畫布座標，Object 類型