2019-11-18:

學(xué)習(xí)內(nèi)容：

---

一、基本概念：

坐標(biāo)軸 AXES：

　　每個(gè)圖表通常包含兩個(gè)坐標(biāo)軸，在直角坐標(biāo)系（笛卡爾坐標(biāo)系）下，分別為 x 軸和 y 軸，在極坐標(biāo)軸下，則分別由角度和半徑 2 個(gè)維度構(gòu)成。

　　每個(gè)坐標(biāo)軸由坐標(biāo)軸線（line）、刻度線（tickLine）、刻度文本（label）、標(biāo)題（title）以及網(wǎng)格線（grid）組成。

幾何標(biāo)記（Geometry）：

　　即我們所說的點(diǎn)、線、面這些幾何圖形

提示信息 TOOLTIP：

　　當(dāng)鼠標(biāo)懸停在某個(gè)點(diǎn)上時(shí)，會(huì)以提示框的形式顯示當(dāng)前點(diǎn)對(duì)應(yīng)的數(shù)據(jù)的信息，比如該點(diǎn)的值，數(shù)據(jù)單位等。數(shù)據(jù)提示框內(nèi)提示的信息還可以通過格式化函數(shù)動(dòng)態(tài)指定。

輔助標(biāo)記 GUIDE:

　　當(dāng)需要在圖表上繪制一些輔助線、輔助框或者圖片時(shí)，比如增加平均值線、最高值線或者標(biāo)示明顯的范圍區(qū)域時(shí)

二、創(chuàng)建圖表：

（1）圖表容器：container

// html中：
<div id="c1"></div>


// 傳入dom id：
const chart = new G2.Chart({
  container: 'c1',
   1000,
  height: 500,
  padding: [ 20, 20, 95, 80 ] // 上，右，下，左

});


// 或者傳入dom 的html節(jié)點(diǎn)：
container: document.getElementById('c1'),

（2）圖表樣式：

background：用于設(shè)置整個(gè) chart 的圖表背景樣式，包括邊框，背景色，透明度，圓角等；

plotBackground：用于設(shè)置 chart 繪圖區(qū)域的背景樣式，包括邊框，背景色，透明度，圓角等；

padding：用于設(shè)置邊距，用法同 CSS 中的 padding 屬性相同, [上，右，下，左]；

（3）圖表寬度自適應(yīng)：

　　width 參數(shù)可以不配置

const chart = new G2.Chart({
  container: 'c1',
  forceFit: true,  // 默認(rèn)false
  height : 400
});

注意：

G2 的圖表是根據(jù)父容器的寬度來計(jì)算寬度，如果父容器隱藏，則會(huì)將寬度計(jì)算成 0，顯示父容器時(shí)，需要調(diào)用一下 chart.forceFit()。

僅當(dāng)瀏覽器的窗口變化時(shí)，圖表會(huì)重新計(jì)算寬度，其他情況下不進(jìn)行寬度的計(jì)算和自適應(yīng)。

（4）圖表動(dòng)畫：

　　默認(rèn)情況下，G2 的圖表動(dòng)畫處于開啟狀態(tài)，關(guān)閉方法：

// 方式一： 設(shè)置 animate 屬性
const chart = new G2.Chart({
  container: 'c1',
   800,
  height : 400,
  animate: false // 關(guān)閉圖表動(dòng)畫
});

// 方式二： 手動(dòng)調(diào)用 animate 函數(shù)
chart.animate(false); // 關(guān)閉動(dòng)畫

三、裝載數(shù)據(jù)：

（1）裝載

方法一：data屬性傳入

const chart = new G2.Chart({
  id: 'c1',
   600,
  height: 300,
  data: [
    { x: 'a', y: 1 },
    { x: 'b', y: 2 },
    ...
  ]
});

方法二：調(diào)用chart.source(data)方法，每個(gè)字段的列定義也可以在這里傳入

chart.source(data, {
  x: {
    type: 'cat'
  },
  y: {
    min: 0
  }
})

（2）數(shù)據(jù)格式：

i、json 數(shù)組：

const data = [
  { gender: '男', count: 40 },
  { gender: '女', count: 30 }
];

chart.source(data);

ii、dataview 對(duì)象：

　　《三、dataset 數(shù)據(jù)集包》中敘述

（3）更新數(shù)據(jù)：

G2 更新數(shù)據(jù)的方式主要有三種：

僅僅是更新圖表的數(shù)據(jù)

清理所有，重新繪制

使用 DataView 時(shí)的更新

i、僅僅更新data，：

-- 需要馬上更新圖表：使用chart.changeData(data)

-- 僅僅更新數(shù)據(jù)而不需要馬上更新圖表：

chart.source(newData);

chart.guide().clear();// 清理guide
chart.repaint();

ii、更新數(shù)據(jù)時(shí)還可以清除圖表上的所有元素，重新定義圖形語法，重新繪制：

chart.line().position('x*y');

chart.render();

chart.clear(); // 清理所有
chart.source(newData); // 重新加載數(shù)據(jù)
chart.interval().position('x*y').color('z');
chart.render();

四、DataSet：

　　把數(shù)據(jù)處理部分從 G2 中完全抽離出來，對(duì)數(shù)據(jù)處理本身進(jìn)行了進(jìn)一步的抽象，擴(kuò)展和優(yōu)化，從而實(shí)現(xiàn)了一個(gè)獨(dú)立的數(shù)據(jù)處理模塊 DataSet。

　　把數(shù)據(jù)處理分為兩個(gè)大的步驟：數(shù)據(jù)連接（Connector）和數(shù)據(jù)轉(zhuǎn)換（Transform）。Connector 負(fù)責(zé)導(dǎo)入和歸一化數(shù)據(jù)（譬如導(dǎo)入 CSV 數(shù)據(jù)，導(dǎo)入 GeoJSON 數(shù)據(jù)等），Transform 負(fù)責(zé)進(jìn)行各種數(shù)據(jù)轉(zhuǎn)換操作（譬如圖布局、數(shù)據(jù)統(tǒng)計(jì)、數(shù)據(jù)補(bǔ)全等）。

（1）安裝與引用：

npm install @antv/data-set --save

import { View } from '@antv/data-set';
const dv = new View();

（3）功能介紹：

DataSet 主要完成了以下功能：

源數(shù)據(jù)的解析，將 CSV, DSV, GeoJSON 轉(zhuǎn)成標(biāo)準(zhǔn)的JSON，查看Connector

加工數(shù)據(jù)，包括 filter, map, fold(補(bǔ)數(shù)據(jù)) 等操作，查看Transform

統(tǒng)計(jì)函數(shù)，匯總統(tǒng)計(jì)、百分比、封箱 等統(tǒng)計(jì)函數(shù)，查看Transform

特殊數(shù)據(jù)處理，包括 地理數(shù)據(jù)、矩形樹圖、?；鶊D、文字云 的數(shù)據(jù)處理，查看Transform

五、scale 度量：

　　數(shù)據(jù)空間到圖形空間的轉(zhuǎn)換橋梁，負(fù)責(zé)原始數(shù)據(jù)到 [0, 1] 區(qū)間數(shù)值的相互轉(zhuǎn)換工作，從原始數(shù)據(jù)到 [0, 1] 區(qū)間的轉(zhuǎn)換我們稱之為歸一化操作。

（1）功能：

在 G2 中度量用于完成以下功能：

將數(shù)據(jù)轉(zhuǎn)換到 [0, 1] 范圍內(nèi)，方便將數(shù)據(jù)映射到位置、顏色、大小等圖形屬性；

將歸一化后的數(shù)據(jù)反轉(zhuǎn)回原始值。例如分類a轉(zhuǎn)換成 0.2，那么對(duì)應(yīng)0.2需要反轉(zhuǎn)回分類a；

劃分?jǐn)?shù)據(jù)，用于在坐標(biāo)軸、圖例顯示數(shù)值的范圍、分類等信息。

（2）度量類型：

在 G2 中我們按照數(shù)值是否連續(xù)對(duì)數(shù)據(jù)進(jìn)行分類：

分類（非連續(xù)）數(shù)據(jù)，又分為有序分類和無序分類；

連續(xù)數(shù)據(jù)，時(shí)間也是一種連續(xù)數(shù)據(jù)類型。

　　常量　　　　　 　　|　　 　 　　　　identity

（3）度量對(duì)象的屬性：

{
  type: {string}, // 度量的類型
  range: {array}, // 數(shù)值范圍區(qū)間，即度量轉(zhuǎn)換的范圍，默認(rèn)為 [0, 1]
  alias: {string}, // 為數(shù)據(jù)屬性定義別名，用于圖例、坐標(biāo)軸、tooltip 的個(gè)性化顯示
  ticks: {array}, // 存儲(chǔ)坐標(biāo)軸上的刻度點(diǎn)文本信息
  tickCount: {number}, // 坐標(biāo)軸上刻度點(diǎn)的個(gè)數(shù)，不同的度量類型對(duì)應(yīng)不同的默認(rèn)值
  formatter: {function}, // 回調(diào)函數(shù)，用于格式化坐標(biāo)軸刻度點(diǎn)的文本顯示，會(huì)影響數(shù)據(jù)在坐標(biāo)軸、圖例、tooltip 上的顯示
}

（4）默認(rèn)生成度量的機(jī)制：

查看用戶是否制定了對(duì)應(yīng)字段的數(shù)據(jù)類型（列定義）

如果沒有，判斷字段的第一條數(shù)據(jù)的字段類型

如果數(shù)據(jù)中不存在對(duì)應(yīng)的字段，則為 'identity'

如果是數(shù)字則為 'linear'；

如果是字符串，判定是否是時(shí)間格式，如果是時(shí)間格式則為時(shí)間類型 'time',

否則是分類類型 'cat'

（5）linear：

總結(jié)

以上是生活随笔為你收集整理的antV--G2 学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。