當(dāng)前位置：首頁(yè) > 编程资源 > 综合教程 >内容正文

综合教程

BizCharts 使用笔记

發(fā)布時(shí)間：2023/12/15 综合教程 29 生活家

生活随笔收集整理的這篇文章主要介紹了 BizCharts 使用笔记小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、介紹

1、背景

BizCharts 這個(gè)其實(shí)兩年前就用過一次，最近做 dashboard，涉及數(shù)據(jù)的可視化展示（即圖表功能），于是又用了回 BizCharts。這次干脆趁熱通讀下官方文檔，遂成此篇。

2、什么是 BizCharts

首先，AntV 是螞蟻金服全新一代數(shù)據(jù)可視化解決方案。
其次，G2是 AntV 旗下，以數(shù)據(jù)驅(qū)動(dòng)，具有高度的易用性和擴(kuò)展性的可視化圖形語(yǔ)法。
再次，Bizcharts是一款基于antv 的 G2 進(jìn)行 react 封裝的組件，是以數(shù)據(jù)為驅(qū)動(dòng)的可視化圖表。

3、優(yōu)勢(shì)/特點(diǎn)

（在市面上跟其他類似庫(kù)相比）跟 react 組件寫法結(jié)合的最好
是 ant design pro 推薦使用的第三方圖表庫(kù)（我司用的即 ant design pro），且 ant design pro 還原生提供了在 BizCharts 基礎(chǔ)上二次封裝的簡(jiǎn)化版圖表
支持 Canvas 及 SVG 兩種模式的圖表渲染
兼容性，支持 Chrome，Safari，IE11+ 瀏覽器

4、文檔

① 官網(wǎng)：
https://bizcharts.net/

② API：
https://bizcharts.net/product/bizcharts/category/7/page/12

③ gallery（demo）：
https://bizcharts.net/product/bizcharts/gallery

建議開發(fā)的時(shí)候，直接翻閱 gallery（demo）拿來主義再修改即可。因?yàn)?BizCharts 的有些編碼設(shè)計(jì)（尤其是涉及復(fù)雜圖表）我覺得并不是很好理解。

gallery 還支持根據(jù) api 篩選 demo，挺好用：

5、安裝

npm install bizcharts --save

以最新的 v3.5.8 為例。

二、圖表構(gòu)成

1、組件構(gòu)成

在 BizCharts 中，圖表是由各個(gè)組件組合而成的。組件有兩種類型：

實(shí)體組件：在圖表上有對(duì)應(yīng)的圖形、文本顯示。
抽象組件：沒有顯示，是一種概念抽象組件。

引用組件的方式：

import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";

2、組件的空間構(gòu)成

下圖所示為常用圖表的各組件的空間構(gòu)成。

三、組件 - Chart

1、data

BizCharts 支持兩種格式的源數(shù)據(jù)：

JSON 數(shù)組
DataView 對(duì)象 (由 DataSet 創(chuàng)建，下面會(huì)專門介紹）

2、width/height + forceFit + padding

① height、width

height、width 未指定時(shí)，默認(rèn)為 500px。

注：只是 Canvas 的寬高，如果<Chart />內(nèi)還包含其他標(biāo)簽元素，譬如加上了標(biāo)題（<h3 />），或者沒有數(shù)據(jù)觸發(fā)了placeholder屬性（下面會(huì)介紹），則不算在內(nèi)。

② forceFit

圖表的寬度自適應(yīng)開關(guān)（不能自適應(yīng)高度），默認(rèn)為 false，設(shè)置為 true 時(shí)表示自動(dòng)取 dom（實(shí)例容器）的寬度。

注：當(dāng) forceFit: true 時(shí)，width 不生效。

② padding

有時(shí)候坐標(biāo)軸、圖例等繪圖區(qū)域外的組件顯示不全時(shí)，可以通過調(diào)整圖表各個(gè)方向的 padding 來調(diào)整最終效果，或者直接用 auto（推薦），它會(huì)自動(dòng)計(jì)算邊框（僅考慮 axis 和 legend ）

<Chart padding="auto" />
<Chart padding={[ 20, 30, 20, 30]} />
<Chart padding={20} />
<Chart padding={{ top: 20, right: 30, bottom: 20, left: 30 }} />
<Chart padding={[20, 'auto', 30, 'auto']} />
<Chart padding={['20%', '30%']} />

3、選擇 Canvas 還是 SVG ？

默認(rèn)使用 Canvas 渲染，可以改用 SVG 版本、

如何選擇：如果單就圖表庫(kù)的視角來看，選擇 Canvas 和 SVG 各有千秋。小畫布、大數(shù)據(jù)量的場(chǎng)景適合用 Canvas，譬如熱力圖、大數(shù)據(jù)量的散點(diǎn)圖等。如果畫布非常大，有縮放、平移等高頻的交互，或者移動(dòng)端對(duì)內(nèi)存占用量非常敏感等場(chǎng)景，可以使用 SVG 的方案。

4、scale

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

更多資料，可看：https://bizcharts.net/product/bizcharts/category/7/page/35

const scale = {
  'sales': {
    type: 'identity' | 'linear' | 'cat' | 'time' | 'timeCat' | 'log' | 'pow', // 指定數(shù)據(jù)類型
    alias: string, // 數(shù)據(jù)字段的別名，會(huì)影響到軸的標(biāo)題內(nèi)容
    formatter: () => {}, // 格式化文本內(nèi)容，會(huì)影響到軸的label格式
    range: array, // 輸出數(shù)據(jù)的范圍，默認(rèn)[0, 1]，格式為 [min, max]，min 和 max 均為 0 至 1 范圍的數(shù)據(jù)。
    tickCount: number, // 設(shè)置坐標(biāo)軸上刻度點(diǎn)的個(gè)數(shù)
    ticks: array, // 用于指定坐標(biāo)軸上刻度點(diǎn)的文本信息，當(dāng)用戶設(shè)置了 ticks 就會(huì)按照 ticks 的個(gè)數(shù)和文本來顯示
    sync: boolean // 當(dāng) chart 存在不同數(shù)據(jù)源的 view 時(shí)，用于統(tǒng)一相同數(shù)據(jù)屬性的值域范圍
  }
};

常用的：

formatter：formatter: (item) => {return item + "%"}, // 格式化 label 文本內(nèi)容
alias：修改 lable 的 title

注：通過 Chart 的 scale ，可以直接對(duì) Chart 下的子組件，如 Axis、Label 進(jìn)行配置（當(dāng)然也可以單獨(dú)在 Axis、Label 上設(shè)置）。

5、placeholder

沒有數(shù)據(jù)，即 data 屬性傳了 null or []，應(yīng)該顯示什么？

默認(rèn)值: <div style={{ position: 'relative', top: '48%', textAlign: 'center' }}>暫無數(shù)據(jù)</div>

6、theme

默認(rèn) "default" ，可開啟 "dark" 樣式。

此功能可以作用于全局或者作用在單獨(dú)的 Chart 上。

四、組件 - Coord

1、介紹

BizCharts 將坐標(biāo)系抽象為 Coord 組件，并且包含兩種：

笛卡爾坐標(biāo)系（又名直角坐標(biāo)系）（rect）【默認(rèn)】
極坐標(biāo)系（polar、theta、helix）

注：目前所有的坐標(biāo)系均是 2 維的。

可通過 type 屬性改變坐標(biāo)系類型。

五、組件 - Axis

1、介紹

坐標(biāo)軸由如下五部分組成：

標(biāo)題 title
文本 label
坐標(biāo)軸線 line
刻度線 tickLine
網(wǎng)格 grid

2、使用

// 只顯示其中一條坐標(biāo)軸
<Chart width={600} height={400} data={data}>
  <Axis name="sold" />
  <Axis name="genre" visible={false} />
  <Geom type="interval" position="genre*sold" color="genre" />
</Chart>

1、name 屬性必填
2、如果不用<Axis/>組件，默認(rèn)不顯示坐標(biāo)軸，但一旦使用，所有的坐標(biāo)軸都會(huì)顯示，這時(shí)如若需要隱藏某一個(gè)坐標(biāo)軸，務(wù)必將visible參數(shù)置為false。

3、更多設(shè)置

Axis 的很多屬性，在<Chart /> 中的 scale 中也可以設(shè)置。大致分為三類：

1、只能在 Axis 中設(shè)置
2、只能在<Chart /> 中的 scale 設(shè)置：坐標(biāo)軸設(shè)置別名
3、兩者都能設(shè)置：刻度線（tickLine）等

六、組件 - Geom

1、介紹

Geom 為幾何標(biāo)記對(duì)象，決定創(chuàng)建圖表的類型。

BizCharts 生成的圖表的類型，是由幾何標(biāo)記（Geom 的 type 屬性）和坐標(biāo)系（Coord）共同決定的。

2、幾何標(biāo)記類型：type

例如：

point：點(diǎn)，用于點(diǎn)圖的構(gòu)建。
line：線，點(diǎn)按照 x 軸連接成一條線，構(gòu)成線圖。

還可以自定義 shape。

3、數(shù)據(jù)映射相關(guān)的屬性

包含：position, color, shape, size, opacity。

① position

位置屬性的映射，用于確定由數(shù)據(jù)中的哪幾個(gè)字段來確定數(shù)據(jù)在平面坐標(biāo)系的位置。通俗地解釋，即確定 x 軸和 y 軸的數(shù)據(jù)字段。

寫法：

<Geom position="x*y" />
<Geom position={['x', 'y']} />

② color

將數(shù)據(jù)值映射到圖形的顏色上的方法。

'field'，field 為數(shù)據(jù)字段名，內(nèi)部會(huì)使用主題中的默認(rèn)顏色進(jìn)行數(shù)據(jù)值到顏色值的映射；
//代碼示例
<Geom color='cut'/>


['field', colors]，將數(shù)據(jù)值映射至指定的顏色值 colors（可以是字符串也可以是數(shù)組），此時(shí)用于通常映射分類數(shù)據(jù)；
//代碼示例
<Geom color={['city', ['#ff0000', '#00ff00']]}/>


['field', 'color1-color2-colorN')]，指定顏色的漸變路徑，用于映射連續(xù)的數(shù)據(jù)；
//代碼示例
<Geom color={['price', '#ff0000-#00ff00']}/>


['field', callback)]，使用回調(diào)函數(shù)進(jìn)行顏色值的自定義；可以使用多個(gè)字段使用*號(hào)連接 注意： color 屬性的回調(diào)函數(shù)一般返回的單個(gè)顏色，因?yàn)?G2 中所有的 shape 僅支持單個(gè)顏色 color 屬性的回調(diào)函數(shù)也可以返回?cái)?shù)組，數(shù)組中有多個(gè)顏色，但是這時(shí)候需要 shape 支持多顏色的解析，詳細(xì)情況查看 自定義shape。
//代碼示例
<Geom
  color={['cut', (cut)=>{
    //some code
      if(cut < 1000)
        return '#00ff00';
      else
        return '#ff0000';
    }]}
/>


color('#ffffff')， 直接指定顏色常量，不進(jìn)行數(shù)據(jù)映射。
//代碼示例
<Geom color='#ffffff'/>


color('l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff')，支持線性漸變和放射漸變，具體參見漸變色

③ shape、size、opacity 同 color 的寫法，略

4、更多屬性

顯示輔助信息的屬性：style, tooltip
額外的控制屬性：adjust, select, setSelect, active, hide

七、組件 - Label

1、介紹

2、使用

① 在每個(gè)幾何標(biāo)記 Geom 內(nèi)使用 Label 組件。

② 一旦使用 <Label/> 組件，那么所有的圖例都會(huì)顯示，如若需要隱藏某一個(gè)圖例，將那一個(gè)的 visible 參數(shù)配置為 false。

③ content 指定 label 上顯示的文本內(nèi)容。

<Label content="常量字符串" />
// 使用數(shù)據(jù)
<Label content="sales*date"/>
// 使用回調(diào)函數(shù)
<Label content={["sales*date", (sales, date)=>{
    return ${data}:${sales};
  }]}
/>

八、組件 - Legend

1、介紹

圖例分為兩種：

分類圖例
連續(xù)圖例

2、怎么才能有 Legend

① 只有當(dāng) <Geom /> 組件上有 shape、color、size 中任意一個(gè)屬性時(shí)，并且將 <Legend /> 組件的 name 屬性跟這個(gè)屬性的字段關(guān)聯(lián)上，才會(huì)正常顯示 Legend。

② 一旦使用 <Legend /> 組件，那么所有的圖例都會(huì)顯示，如若需要隱藏某一個(gè)圖例，將那一個(gè) visible 參數(shù)配置為 false。

3、自定義圖例

把 custom 設(shè)為 ture，表示不使用默認(rèn)生成的圖例，允許用戶自定義圖例，包括具體的圖例項(xiàng)以及 click、hover 交互。

如果不是特別需要，建議別輕易的開啟 custom，這會(huì)讓你多寫很多代碼。

例如：

<Legend
  custom={true}
  items={[
    { value: 'waiting', fill: '#3182bd', marker: 'shape' },
    { value: 'call', fill: '#99d8c9', marker: 'shape' },
    { value: 'people', fill: '#fdae6b', marker: 'shape' },
  ]}
  onHover={ev => {console.log(ev)}} // 自定義 hover 事件
  onClick={ev => {console.log(ev)}} // 自定義 click 事件
/>

更詳細(xì)的例子，可參考柱線混合圖的例子（https://bizcharts.net/product/bizcharts/demo/8）

1、介紹

BizCharts 默認(rèn)不展示。

2、crosshairs - 輔助線

<Tooltip crosshairs={{
  //rect: 矩形框,x: 水平輔助線,y: 垂直輔助線,cross: 十字輔助線。
  type: 'rect' || 'x' || 'y' || 'cross',
  style: {
   // 圖形樣式
   fill: {string}, // 填充的顏色
   stroke: {string}, // 邊框的顏色
   strokeOpacity: {number}, // 邊框顏色的透明度，數(shù)值為 0 - 1 范圍
   fillOpacity: {number}, // 填充的顏色透明度，數(shù)值為 0 - 1 范圍
   lineWidth: {number}, // 邊框的粗細(xì)
   lineDash: {number} | {array} // 線的虛線樣式
}}/>

如下圖，右邊的默認(rèn)的，左邊是 type='cross'。

3、格式化顯示內(nèi)容

有幾種方法：

通過 <Geom /> 上的 tooltip 屬性的回調(diào)函數(shù)來配置。
通過 <Tooltip /> 上的 itemTpl 來格式化顯示內(nèi)容。
特別復(fù)雜的場(chǎng)景可以通過 <Chart> 上的 onTooltipChange 事件來格式化 <Tooltip /> 顯示內(nèi)容。

十、組件 - Guide

用于繪制圖表的輔助元素。

分面組件，將一份數(shù)據(jù)按照某個(gè)維度分隔成若干子集，然后創(chuàng)建一個(gè)圖表的矩陣，將每一個(gè)數(shù)據(jù)子集繪制到圖形矩陣的窗格中，所有子圖采用相同的圖表類型，并進(jìn)行了一定的設(shè)計(jì)，使得它們之間方便進(jìn)行比較。

十二、組件 - View

視圖，由 Chart 生成和管理，擁有自己獨(dú)立的數(shù)據(jù)源、坐標(biāo)系和圖層，用于異構(gòu)數(shù)據(jù)的可視化以及圖表組合。

一個(gè) Chart 由一個(gè)或者多個(gè)視圖 View 組成。因此 view 上的 api 同 chart 基本相同。

可參考多層餅圖的例子（https://bizcharts.net/product/bizcharts/demo/124）

十三、DataSet

1、介紹

DataSet 主要完成了以下功能：

① Connector + Transform

源數(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ù)、矩形樹圖、桑基圖、文字云的數(shù)據(jù)處理，查看 Transform

Transform 基于的 lodash 的封裝。

② state 狀態(tài)量

使用 DataSet 的狀態(tài)量可以很容易的實(shí)現(xiàn)圖表的聯(lián)動(dòng)。

類似 react 里的 state 概念。
這邊就牽扯一個(gè)問題，就是數(shù)據(jù)的狀態(tài)更新到底是托管在 react 的 state 里，還是托管在 DataSet 的 state 里？后者的好處是，可以跟 Connector + Transform 的功能融為一套數(shù)據(jù)處理流，一改則改，很方便維護(hù)。

2、安裝

npm install @antv/data-set --save

3、使用

方法一：不用 DataSet 的 state，直接創(chuàng)建 DataView，傳入 <Chart />

import { View } from '@antv/data-set'; 
const data = [
  {
    item: '事例一',
    count: 40,
  },
  {
    item: '事例二',
    count: 21,
  },
  {
    item: '事例三',
    count: 17,
  },
  {
    item: '事例四',
    count: 13,
  },
  {
    item: '事例五',
    count: 9,
  },
];
const dv = new View();
dv.source(data).transform({
  type: 'percent',
  field: 'count',
  dimension: 'item',
  as: 'percent',
});

上面的例子，即基礎(chǔ)環(huán)圖（餅圖）。

我們可以后臺(tái)先構(gòu)造一個(gè)簡(jiǎn)單的數(shù)據(jù)類型：

{
    item: '事例一',
    count: 40,
},

因?yàn)椴挥?DataSet 的 state，我們就直接創(chuàng)建 DataView 。

再通過 DataView 里的 Transform，改造數(shù)據(jù)為：

item: "事例一"
count: 40
percent: 0.4

最后塞給 <Chart />。

方法二：使用 DataSet 的 state，實(shí)現(xiàn)圖表的聯(lián)動(dòng)

import DataSet from '@antv/data-set'; 

// step1：創(chuàng)建 dataset （指定 state）
const ds = new DataSet({
  state: {
    year: '2010'
  }
});

// step2：創(chuàng)建 DataView
const dv = ds.createView().source(data);

// step3：使用 transform 改造數(shù)據(jù)
dv.transform({
  type: 'filter',
  callback(row) {
    return row.year === ds.state.year; //（取 state）
  }
});

// step4：引用 DataView
<chart data={dv}>...</chart>

// step5：更新 state
ds.setState('year', '2012');

十四、圖表（組件）事件 - Event

Chart組件上提供了各種事件支持，以響應(yīng)用戶的操作，方便用戶擴(kuò)展交互。開發(fā)者可以監(jiān)聽這些事件，然后通過回調(diào)函數(shù)做相應(yīng)的處理，比如跳轉(zhuǎn)到一個(gè)地址，或者彈出對(duì)話框，或者做數(shù)據(jù)下鉆等等。

事件用法如下：

<Chart
    eventType={eventCallback}
>
 ...
</Chart>

具體介紹，略。

總結(jié)

以上是生活随笔為你收集整理的BizCharts 使用笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： java厨房_Java多线程基础
下一篇： SAP反冲之COGI(三)

综合教程

BizCharts 使用笔记

一、介紹

1、背景

2、什么是 BizCharts

3、優(yōu)勢(shì)/特點(diǎn)

4、文檔

5、安裝

二、圖表構(gòu)成

1、組件構(gòu)成

2、組件的空間構(gòu)成

三、組件 - Chart

1、data

2、width/height + forceFit + padding

3、選擇 Canvas 還是 SVG ？

4、scale

5、placeholder

6、theme

四、組件 - Coord

1、介紹

五、組件 - Axis

1、介紹

2、使用

3、更多設(shè)置

六、組件 - Geom

1、介紹

2、幾何標(biāo)記類型：type

3、數(shù)據(jù)映射相關(guān)的屬性

4、更多屬性

七、組件 - Label

1、介紹

2、使用

八、組件 - Legend

1、介紹

2、怎么才能有 Legend

3、自定義圖例

九、組件 - Tooltip

1、介紹

2、crosshairs - 輔助線

3、格式化顯示內(nèi)容

十、組件 - Guide

十一、組件 - Facet

十二、組件 - View

十三、DataSet

1、介紹

2、安裝

3、使用

十四、圖表（組件）事件 - Event

總結(jié)