一圖勝千言
可視化領域是目前（泛）前端中最火熱的分支之一。無論是面向普通用戶的可視化大屏展示數據信息，還是企業服務中數據統計概覽或者調度服務，乃至於國家大力推動的智慧建設（智慧大腦，智慧城市）等項目，都重度使用了數據可視化技術。
以下圖片來自於 前端搞可視化 菜鳥體驗體驗技術 其歌 的分享 《如何融合數據可視化與物理世界》。我們可以看到：可視化結合硬件也有很大的用武之地。
可視化是什麼
當然，我曾經一度認爲可視化就是繪製各種圖表，學習可視化就是學習 echarts, D3 等庫，然後利用這些工具繪製餅圖、折線圖、柱狀圖這類圖表。然而，大部分情況下，我們是可以藉助這些庫來進行可視化項目的開發。但這些庫是通用的解決方案。特定條件下，如在短時間內同時渲染大量元素，通用的解決方案就無法使用，此時我們就需要選擇更加底層的方案（如利用 WebGL 自行控制 GPU 渲染圖像）。
可視化的源頭是數據。我們需要拿到有用的數據，然後通過轉化以及整合數據生成用戶所需要的結構，最終以圖形的方式展現出來。可視化一定是與當前業務高度結合的。可視化工程師需要根據當前的業務以及產品需求，選擇合適當前業務的技術棧並生成對用戶有用的圖像。
可視化的目的是提升用戶對數據的認知能力，解放用戶的大腦，從而讓數據更有價值。
用 css 做數據可視化
通常來說，SVG 易於交互，Canvas2D 性能更好。基本上會根據當前交互和計算量來確定使用 SVG 或者 Canvas 。 如果遇到大量像素計算，甚至還需要通過 WebGL 深入 GPU 編程(自行控制 CPU 並行計算) 。
但如果我們做官網首頁的圖表呢？如果當前的圖表很簡單，不需要變化呢？我們還需要引入 ECharts 這種庫？或者說手動寫一個圖表。
實際上，隨着瀏覽器的發展，CSS 的表現能力愈發強大，完全可以實現常規的圖表。如柱狀圖和餅圖等。使用網格佈局（Grid Layout）加上線性漸變（Linear-gradient）可以直接生成柱狀圖。
<style>
.bargraph {
margin: 0 auto;
display: grid;
width: 250px;
height: 200px;
padding: 10px;
transform: scaleY(3);
grid-template-columns: repeat(5, 20%);
}
.bargraph div {
margin: 0 5px;
}
.bargraph div:nth-child(1) {
/** 從上到下(to bottom 默認，可不寫)，75% 全透明， 25% 紅色， **/
background: linear-gradient(to bottom, transparent 75%, red 0);
}
.bargraph div:nth-child(2) {
background: linear-gradient(transparent 74%, yellow 0);
}
.bargraph div:nth-child(3) {
background: linear-gradient(transparent 60%, blue 0);
}
.bargraph div:nth-child(4) {
background: linear-gradient(transparent 55%, green 0);
}
.bargraph div:nth-child(5) {
/** 也可以多種顏色漸變 **/
background: linear-gradient(transparent 32%, #37c 0, #37c 63%, #3c7 0);
}
</style>
<body>
<div class="bargraph">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
我們還可以使用圓錐漸變 conic-gradient 實現餅圖，以及使用 div + transform 實現折線圖。
當然，用 CSS 進行圖表繪製優點在於不需要學習額外的庫和 api。但缺點也很明顯：
-
對應關係複雜，無法直觀的修改當前代碼以快速替換當前圖標樣式（換算往往需要 JavaScript ）
-
屬於 DOM 樹的一員，性能往往難以把控（作爲穩定的的首頁圖表，不會由太大問題）
圖表庫 Chart.css
在沒有遇到 Charts.css 之前, 我認爲圖表是離不開 JavaScript 計算的。但看到該庫時候，我也是非常的欣喜。Charts.css 是一個 CSS 框架。它使用 CSS3 將 HTML 元素設置爲圖表樣式，同時該庫其中一個設計原則就是不會使用 JavaScript 代碼（如果無法使用CSS完成，則不會成爲框架的一部分 ）。當然，用戶可以自行決定是否使用 JavaScript 。
拿出最簡單的表格爲例：
<table border="1">
<caption> Front End Developer Salary </caption>
<tbody>
<tr>
<td> $40K </td>
</tr>
<tr>
<td> $60K </td>
</tr>
<tr>
<td> $75K </td>
</tr>
<tr>
<td> $90K </td>
</tr>
<tr>
<td> $100K </td>
</tr>
</tbody>
</table>
如圖所顯：
使用 Chart.css 之後:
<table style="width: 400px;height: 400px" class="charts-css column">
<caption> Front End Developer Salary </caption>
<tbody>
<tr>
<td style="--size: calc( 40 / 100 )"> $40K </td>
</tr>
<tr>
<td style="--size: calc( 60 / 100 )"> $60K </td>
</tr>
<tr>
<td style="--size: calc( 75 / 100 )"> $75K </td>
</tr>
<tr>
<td style="--size: calc( 90 / 100 )"> $90K </td>
</tr>
<tr>
<td style="--size: calc( 100 / 100 )"> $100K </td>
</tr>
</tbody>
</table>
非常棒！
我們可以看到其中最重要的修改是使用了 CSS 變量，CSS 雖然不像 JavaScript 是通用編程語言，但 CSS 變量卻是一個橋樑，讓其擁有了與其他元素溝通的能力（HTML， JavaScript），其次藉助 CSS 中的計算屬性 calc 。同時也可以參考我之前寫的的博客 玩轉 CSS 變量 和 CSS 掃雷遊戲 。
/** 圖表 css 中會有很多這種計算代碼 **/
height: calc(100% * var(--end, var(--size, 1)));
當然，該庫目前可以描述水平條形圖（bar）、柱狀圖（column）、面積圖 (area)、折線圖（line）。餅圖，雷達圖等還在開發中。當然該庫也可以實現混合圖表：
Charts.css 同時支持用戶使用 CSS3 爲當前圖表添加各種效果，詳情見 定製化 。
鼓勵一下
如果你覺得這篇文章不錯，希望可以給與我一些鼓勵，在我的 github 博客下幫忙 star 一下。
參考資料
《如何融合數據可視化與物理世界》