資料視覺化,BizCharts圖表庫入坑歷程
作為一個前端打字員,除了綠茶婊之外,最討厭的就是圖表:一個讓我傷心,一個讓我難過;比這更討厭的就是文件寫得不清不楚的圖表庫(大概率是九年義務教育期間沒有學好語文),讓我又愛又恨!所以本篇博文會比較枯燥,只簡單描述一下使用BizCharts的過程,當然,重要的是總結遇到的坑(遵從一個坑不踩兩次,一個女生不泡兩次原則)。
By the way,提到BizCharts,讓我們感謝一下阿里巴巴:其開源了這個好用的(雖然偶爾不那麼好用,還偶得挺經常的)的react圖表庫供大家使用,對使用react技術棧的前端打字員來說簡直就是福音。本文不會有過多的api解釋,具體的介面可以看官網文件鬼門關。
正經篇幅
剛開始,視覺設計師哄我說:“我的要求並不高,待我從前一樣好”,啊呸,說錯了,“我的要求是:只要能把資料用直方圖展現出來就好了”,so easy
// 引入相關的元件 import { Chart, Axis, Tooltip, Geom } from 'bizcharts'; // 隨便mock一下資料 const str = ['we', 'are', 'the', 'black', 'gold', 'team']; const mockData = () => { let result = []; for (let i = 0, len = 6; i < len; i++) { result.push({ xAxis: ticks[i], yAxis: Math.floor(Math.random() * 100) }); } return result; }; // 圖表元件 <Chart width={ 600 } height={ 400 } data={ mockData() } > {/* x軸,橫軸,以data資料的xAxis屬性值為柱子的值 */} <Axis name="xAxis" /> {/* y軸,縱軸,以data資料的yAxis屬性值為柱子的值 */} <Axis name="yAxis" /> {/* 滑鼠hover直方圖柱子的時候,tooltip顯示的值 */} <Tooltip /> {/* 幾何標記物件,主要用以描述你要畫的是什麼圖形(直方圖、折線圖、餅狀圖、區域圖):interval是直方圖 */} <Geom type="interval" position="xAxis*yAxis" /> </Chart> 複製程式碼
一波操作猛如狗,讓視覺設計師看看效果:
note:此直方圖每一根柱子都是單點的,也就是其反映了某個橫座標點的資料情況。加入我們需要一個連續區間柱子,那麼作為xAxis的資料欄位值應該為一個數組,包含兩個元素,表明區間的起始值。
const mockData = () => { let result = []; for (let i = 0, len = 6; i < len; i++) { result.push({ xAxis: [i + 0.01, i + 1 - 0.01], // 如果不加減0.01,那麼第一根柱子的終點跟第二根柱子的起點是同一個,會感覺兩個柱子粘在一起 yAxis: Math.floor(Math.random() * 100) }); } return result; }; 複製程式碼
視覺設計師:“emmmmmm,圖表長寬定死了會不會有點僵硬啊,高度可以寫死,寬度總得來個自適應吧?”
“毛悶臺”
<Chart height={ 400 } data={ mockData() } forceFit // 我媽說了(guanfang wendang shuode),加上這個屬性就可以使圖表寬度自適應了,隔壁echart同學要學習一下 > </Chart> 複製程式碼
效果秀一波
視覺(蜜汁微笑):“猿子,你這玩意有bug啊”
“胡說,你這傻*不會用吧”
(理直氣壯)“哼哼,放大視窗圖表寬度確實會自適應,但是縮小就掛掉了(並不自適應),ahhhhhh”
(諂媚)“討厭,再給我兩分鐘~~讓我把bug結成冰。。。”
note: 實驗表明,如果Chart元件的父元件Father採用flex佈局,即Father使用flex自適應寬度,那麼就會出現上述的問題;所以,如果有多個圖表同行並列佈局,請不要使用flex佈局,給Father元件的寬度設定為百分比吧,此時的forceFit就會起作用了。同時,BizCharts對重繪設定了防抖,只有當停止縮放的時候才會重繪。
(屌到飛起)“over,拿去用吧”
(一臉鄙視)“哇喔~好棒棒呀,敢不敢讓我調一點點小細節,我保證就一點點!”
“Come on baby!”
“
- 滑鼠hover柱子的時候,為什麼柱子後面有個很醜的方框,換個顏色吧!
- 滑鼠hover柱子的時候,出現的tooltip樣式醜爆了,待會我給你設計一個吧
- 滑鼠hover柱子的時候,柱子的顏色應該有所改變,對使用者比較友好!!!
- ...哎,你別拿刀啊~~~
”
把視覺殺了之後,需求還是要做的,先解決死者的第一個遺願。
Tooltip元件提供了一個屬性crosshairs,用以設定tooltip的輔助線和輔助框;預設情況下,此屬性會為’line’、‘area’、‘path’、‘areaStack’型別的Geom元件開啟垂直輔助線、為‘interval’型別的Geom元件展示矩形背景框。死者說的很醜的方框就是這個!
<Tooltip crosshairs={ false }/> 複製程式碼
好的,把框去掉了!咦,我們不是說要修改它的顏色嗎?好的,改一下
<Tooltip crosshairs={{ type: "rect" // 可選值:rect、x、y、cross,分別對應輔助狂、平行x軸輔助線、平行y軸輔助線,十字輔助線 style: { fill: 'red', // 輔助框顏色 shadowColor: 'red', // 輔助框周邊陰影的顏色 shadowBlur: 1, // 輔助框周邊陰影的透明度 opacity: 0 // 輔助框的透明度 } }} /> 複製程式碼
note:假如開啟的是輔助線,即type不是“rect”,那麼上述的樣式定義將不起作用。究其原因,看了此元件的原始碼之後才發現,描述輔助線樣式的屬性不是style物件,而是lineStyle物件,官方文件並未說明這一點。
<Tooltip crosshairs={{ type: "y" lineStyle: { stroke: 'red', // 輔助線顏色 lineWidth: 4, // 輔助線寬度,單位為px opacity: 1 // 輔助線透明度 } }} /> 複製程式碼
看起來還是很容易就實現了死者的第一個遺願,就這樣懟死了視覺,是不是太殘忍了點?事已至此,繼續實現他的遺願吧。
第二個遺願是給tooltip換個樣式。既然要修改tooltip的樣式,就應該繼續對Tooltip元件下手。通過閱讀文件,發現其還有一個itemTpl的屬性,也就是可以通過這個屬性定義tooltip的模板
// 定義一個模板 // name-value是相關柱子的key-value值 const tooltipsDisplayTpl = ` <p class="chart-tooptip"> <span class="chart-tooptip-right">{name}</span> <span>{value}</span> </p> `; /* // 重寫tooltip元素的樣式 // 因為視覺已死,樣式是隨便搞的,就弄點黑色背景當默哀一下吧 .g2-tooltip { background-color: rgba(44, 49, 68, 0.80) !important; } .chart-tooptip { margin: 0; color: white; } .chart-tooptip-right { margin-right: 12px; } */ <Tooltip crosshairs={ false } itemTpl={ tooltipsDisplayTpl } showTitle={ false } // 去頭(標題,即橫軸對應的刻度),往往影響我顏值的不是我的身材,而是我的臉,所以不要臉了 /> 複製程式碼
note:如果想自定義tooltip展示的內容,還需要設定Geom元件的tooltip屬性,即將資料對映到Tooltip物件上;所以此屬性值如果為false的話,就不會向Tooltip元件傳遞任何資料(此時Tooltip只會顯示title);還可設定為字串,展示字串對應的資料欄位;But, it's not the point,重點在於可自定義
// 定義資料返回的格式,name屬性對應的是itemTpl裡面的同名變數 const getTooltipData = (xAxis, yAxis) => { return { name: xAxis, value: yAxis }; } <Geom type="interval" position="xAxis*yAxis" tooltip={["xAxis*yAxis", getTooltipData]} /> 複製程式碼
第二個遺願也實現了,愧疚感也多了一點!最主要是寫程式碼的時候老是覺得後面有人站著盯著我看。
說不定實現所有遺願就不會有這種感覺了呢,那就繼續第三個遺願吧:“改變滑鼠hover柱子時候柱子的顏色”,翻遍了整個文件,發現沒有關於hover的介面啊!看來視覺是要死不瞑目了,阿門。
就在我感覺到後背越發的涼颼颼的時候,我發現Geom元件有一個屬性active
文件就真的描述了那麼兩句話,也沒例子。急病亂投醫的我只能嘗試一波,設定為true,得了,hover柱子的時候柱子顏色改變了!!!
<Geom type="interval" position="xAxis*yAxis" tooltip={["xAxis*yAxis", getTooltipData]} active={ true } /> 複製程式碼
那如果需要自定義滑鼠hover柱子的樣式呢?對照著Geom文件的select屬性,又嘗試了一遍
<Geom type="interval" position="xAxis*yAxis" tooltip={["xAxis*yAxis", getTooltipData]} style={{ cursor: 'pointer' }} //滑鼠hover上去的時候,顯示小手手,免費送的 active={[ true, { style: { fill: 'black',// 柱子顏色,繼續默哀 shadowColor: 'red',// 整體陰影顏色,包括邊緣 shadowBlur: 1,// 陰影的透明度 opacity: 0 // 柱子顏色透明度 } } ]} /> 複製程式碼
(神氣的)“狗子,別死了,老子搞定啦”
“靠,我都裝死兩天了,你敢不敢再慢一點”
“那官方文件就寫了一行字:只可意會不可言傳!我天分有限,意會了比較久”
“嘚瑟,看,又出bug了吧!你的表子一閃一閃的”
(掐著他脖子使勁晃)“那TM不是bug!!!”
不過話說回來,當資料更新時,從舊資料切換到新資料,會很突兀,沒有緩衝過程,看著特別不舒服。我尋思著,在資料更新的時候,加個動畫唄!但是初始動畫生效了,更新動畫就不生效了(如看官們知道解決辦法,請不吝賜教)。由於趕著下班,我決定使用DataSet:一個用於管理表格資料的神器,據說更新資料的時候,其會給我弄個動畫(除此以外有方便地匯入非json資料等等功能,下文有一些例子,具體細節我沒有詳細去研究,以後學習了再分享)。唔好理,總之好犀利!
// 安裝 // npm install @antv/data-set // 引入 import DataSet from '@antv/data-set'; // 生成一個View例項,作為類的屬性,故不要在render方法裡面生成這個例項 dv = new DataSet().createView(); render() { this.dv.source(data); <Chart height={ 400 } data={ this.dv } forceFit ></Chart> } 複製程式碼
“猿子,6啊!吃宵夜嗎?我的”
“雖然不怎麼餓,但是你請就不一樣了,go”
吃了一桶泡麵後......
“猿子,你看,宵夜也吃了·······”
“你又想幹嘛···············”
簡直就是飽飯思淫慾啊!!!
”我只是覺得柱子的顏色可以漸變會顯得我們公司的產品更屌一點“
”狗子,你扛揍不?“
(可憐兮兮)”揍完之後可以加個漸變嗎......“
”......“
”我就知道你對我最好了,我給你捶背捏大腿吧~“
”滾一邊去“
<Geom type="interval" position="xAxis*yAxis" tooltip={["xAxis*yAxis", getTooltipData]} color={['xAxis', '#3DA4FF-#FFFFFF']} /> 複製程式碼
(掐著我脖子使勁晃)”老子要的是從上往下漸變,不是從左往右漸變“
“別.....別.....掐.....我....改....改.....”
<Geom type="interval" position="xAxis*yAxis" tooltip={["xAxis*yAxis", getTooltipData]} color={['xAxis', 'l(90) 0:#3DA4FF 1:#FFFFFF']} /> 複製程式碼
note:l是指線性漸變,90是指旋轉九十度(即從上到下漸變,看官們可以多試試幾個姿勢,啊呸,多試試幾個角度)
0和1標定的色值標明初始色值和終止色值,注意一點,色值不可以使用顏色名字,如“red”、“blue”等
可新增多個漸變色值,如
color="l(90) 0:#000000 0.5:#FFFFFF 1:#000000" 複製程式碼
note:如果是area型別的Geom,那麼第一種漸變方式是不起作用的,只能選用第二種
“狗子,我真要下班了”
“那個,你看都搞著漸變了,要不搞一波顏色分類”
”沒得談,goodbye!“
”宵夜我的“
”頂你個肺,又想用泡麵忽悠我!!!“
”擼串,騙你我是狗“
”emmmmmm.....“
既然提到顏色分類,我們就接著提一下dv.transform 吧, dv.transform內建了一些基礎的函式:filter,map,pick,rename,reverse …… 具體可自行檢視文件
只需要新增 groupBy 欄位,並且在傳入的原始資料data中新增對應的欄位classify即可輕鬆搞定。
dv.transform({ groupBy: ['classify'],// 以classify欄位進行分組 }); 複製程式碼
”猿子,顏色還是要自定義的哦“
(白眼)
<Geom position={'xAxis*yAxis'} color={['classify', classify => { // 這裡根據不同欄位返回不同顏色 return classify === 'test' ? 'red' : 'yellow'; }]} style={{ cursor: 'pointer' }} /> 複製程式碼
作為一個有責任的前端打字員,有一點即使設計不要求的,我還是需要說明的,橫軸的刻度值是可以自定義的
<Axis name={xAxis} label={{ textStyle: { fill: 'red',// 顏色 textBaseline: 'top'// 對齊基線 }, formatter: (val) => { return `${ val }\n換行了` } }} /> 複製程式碼
”狗子,擼串去!!!“
”要不還是吃個泡麵????“
狗子,卒!