2019-11-18:

學習內容：

---

一、基本概念：

坐標軸 AXES：

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

　　每個坐標軸由坐標軸線（line）、刻度線（tickLine）、刻度文本（label）、標題（title）以及網格線（grid）組成。

幾何標記（Geometry）：

　　即我們所說的點、線、面這些幾何圖形

提示信息 TOOLTIP：

　　當鼠標懸停在某個點上時，會以提示框的形式顯示當前點對應的數據的信息，比如該點的值，數據單位等。數據提示框內提示的信息還可以通過格式化函數動態指定。

輔助標記 GUIDE:

　　當需要在圖表上繪制一些輔助線、輔助框或者圖片時，比如增加平均值線、最高值線或者標示明顯的范圍區域時

二、創建圖表：

（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節點：
container: document.getElementById('c1'),

（2）圖表樣式：

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

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

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

（3）圖表寬度自適應：

　　width 參數可以不配置

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

注意：

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

僅當瀏覽器的窗口變化時，圖表會重新計算寬度，其他情況下不進行寬度的計算和自適應。

（4）圖表動畫：

　　默認情況下，G2 的圖表動畫處于開啟狀態，關閉方法：

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

// 方式二： 手動調用 animate 函數
chart.animate(false); // 關閉動畫

三、裝載數據：

（1）裝載

方法一：data屬性傳入

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

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

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

（2）數據格式：

i、json 數組：

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

chart.source(data);

ii、dataview 對象：

　　《三、dataset 數據集包》中敘述

（3）更新數據：

G2 更新數據的方式主要有三種：

僅僅是更新圖表的數據

清理所有，重新繪制

使用 DataView 時的更新

i、僅僅更新data，：

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

-- 僅僅更新數據而不需要馬上更新圖表：

chart.source(newData);

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

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

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

chart.render();

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

四、DataSet：

　　把數據處理部分從 G2 中完全抽離出來，對數據處理本身進行了進一步的抽象，擴展和優化，從而實現了一個獨立的數據處理模塊 DataSet。

　　把數據處理分為兩個大的步驟：數據連接（Connector）和數據轉換（Transform）。Connector 負責導入和歸一化數據（譬如導入 CSV 數據，導入 GeoJSON 數據等），Transform 負責進行各種數據轉換操作（譬如圖布局、數據統計、數據補全等）。

（1）安裝與引用：

npm install @antv/data-set --save

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

（3）功能介紹：

DataSet 主要完成了以下功能：

源數據的解析，將 CSV, DSV, GeoJSON 轉成標準的JSON，查看Connector

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

統計函數，匯總統計、百分比、封箱 等統計函數，查看Transform

特殊數據處理，包括 地理數據、矩形樹圖、桑基圖、文字云 的數據處理，查看Transform

五、scale 度量：

　　數據空間到圖形空間的轉換橋梁，負責原始數據到 [0, 1] 區間數值的相互轉換工作，從原始數據到 [0, 1] 區間的轉換我們稱之為歸一化操作。

（1）功能：

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

將數據轉換到 [0, 1] 范圍內，方便將數據映射到位置、顏色、大小等圖形屬性；

將歸一化后的數據反轉回原始值。例如分類a轉換成 0.2，那么對應0.2需要反轉回分類a；

劃分數據，用于在坐標軸、圖例顯示數值的范圍、分類等信息。

（2）度量類型：

在 G2 中我們按照數值是否連續對數據進行分類：

分類（非連續）數據，又分為有序分類和無序分類；

連續數據，時間也是一種連續數據類型。

　　常量　　　　　 　　|　　 　 　　　　identity

（3）度量對象的屬性：

{
  type: {string}, // 度量的類型
  range: {array}, // 數值范圍區間，即度量轉換的范圍，默認為 [0, 1]
  alias: {string}, // 為數據屬性定義別名，用于圖例、坐標軸、tooltip 的個性化顯示
  ticks: {array}, // 存儲坐標軸上的刻度點文本信息
  tickCount: {number}, // 坐標軸上刻度點的個數，不同的度量類型對應不同的默認值
  formatter: {function}, // 回調函數，用于格式化坐標軸刻度點的文本顯示，會影響數據在坐標軸、圖例、tooltip 上的顯示
}

（4）默認生成度量的機制：

查看用戶是否制定了對應字段的數據類型（列定義）

如果沒有，判斷字段的第一條數據的字段類型

如果數據中不存在對應的字段，則為 'identity'

如果是數字則為 'linear'；

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

否則是分類類型 'cat'

（5）linear：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。