點(diǎn)擊上方前端瓶子君，關(guān)注公眾號(hào)

回復(fù)算法，加入前端編程面試算法每日一題群

來源：jump_jump

https://juejin.cn/post/6959575512637243405

一圖勝千言

可視化領(lǐng)域是目前（泛）前端中最火熱的分支之一。無論是面向普通用戶的可視化大屏展示數(shù)據(jù)信息，還是企業(yè)服務(wù)中數(shù)據(jù)統(tǒng)計(jì)概覽或者調(diào)度服務(wù)，乃至于國家大力推動(dòng)的智慧建設(shè)（智慧大腦，智慧城市）等項(xiàng)目，都重度使用了數(shù)據(jù)可視化技術(shù)。

以下圖片來自于 前端搞可視化 菜鳥體驗(yàn)體驗(yàn)技術(shù) 其歌的分享《如何融合數(shù)據(jù)可視化與物理世界》。我們可以看到：可視化結(jié)合硬件也有很大的用武之地。

可視化是什么

當(dāng)然，我曾經(jīng)一度認(rèn)為可視化就是繪制各種圖表，學(xué)習(xí)可視化就是學(xué)習(xí) echarts, D3 等庫，然后利用這些工具繪制餅圖、折線圖、柱狀圖這類圖表。然而，大部分情況下，我們是可以借助這些庫來進(jìn)行可視化項(xiàng)目的開發(fā)。但這些庫是通用的解決方案。特定條件下，如在短時(shí)間內(nèi)同時(shí)渲染大量元素，通用的解決方案就無法使用，此時(shí)我們就需要選擇更加底層的方案（如利用 WebGL 自行控制 GPU 渲染圖像）。

可視化的源頭是數(shù)據(jù)。我們需要拿到有用的數(shù)據(jù)，然后通過轉(zhuǎn)化以及整合數(shù)據(jù)生成用戶所需要的結(jié)構(gòu)，最終以圖形的方式展現(xiàn)出來?？梢暬欢ㄊ桥c當(dāng)前業(yè)務(wù)高度結(jié)合的?？梢暬こ處熜枰鶕?jù)當(dāng)前的業(yè)務(wù)以及產(chǎn)品需求，選擇合適當(dāng)前業(yè)務(wù)的技術(shù)棧并生成對(duì)用戶有用的圖像。

可視化的目的是提升用戶對(duì)數(shù)據(jù)的認(rèn)知能力，解放用戶的大腦，從而讓數(shù)據(jù)更有價(jià)值。

用 css 做數(shù)據(jù)可視化

通常來說，SVG 易于交互，Canvas2D 性能更好?；旧蠒?huì)根據(jù)當(dāng)前交互和計(jì)算量來確定使用 SVG 或者 Canvas 。如果遇到大量像素計(jì)算，甚至還需要通過 WebGL 深入 GPU 編程(自行控制 CPU 并行計(jì)算) 。

但如果我們做官網(wǎng)首頁的圖表呢？如果當(dāng)前的圖表很簡單，不需要變化呢？我們還需要引入 ECharts 這種庫？或者說手動(dòng)寫一個(gè)圖表。

實(shí)際上，隨著瀏覽器的發(fā)展，CSS 的表現(xiàn)能力愈發(fā)強(qiáng)大，完全可以實(shí)現(xiàn)常規(guī)的圖表。如柱狀圖和餅圖等。使用網(wǎng)格布局（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 默認(rèn)，可不寫)，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 實(shí)現(xiàn)餅圖，以及使用 div + transform 實(shí)現(xiàn)折線圖。

當(dāng)然，用 CSS 進(jìn)行圖表繪制優(yōu)點(diǎn)在于不需要學(xué)習(xí)額外的庫和 api。但缺點(diǎn)也很明顯：

對(duì)應(yīng)關(guān)系復(fù)雜，無法直觀的修改當(dāng)前代碼以快速替換當(dāng)前圖標(biāo)樣式（換算往往需要 JavaScript ）
屬于 DOM 樹的一員，性能往往難以把控（作為穩(wěn)定的的首頁圖表，不會(huì)由太大問題）

圖表庫 Chart.css

在沒有遇到 Charts.css 之前, 我認(rèn)為圖表是離不開 JavaScript 計(jì)算的。但看到該庫時(shí)候，我也是非常的欣喜。Charts.css 是一個(gè) CSS 框架。它使用 CSS3 將 HTML 元素設(shè)置為圖表樣式，同時(shí)該庫其中一個(gè)設(shè)計(jì)原則就是不會(huì)使用 JavaScript 代碼（如果無法使用CSS完成，則不會(huì)成為框架的一部分）。當(dāng)然，用戶可以自行決定是否使用 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 變量卻是一個(gè)橋梁，讓其擁有了與其他元素溝通的能力（HTML， JavaScript），其次借助 CSS 中的計(jì)算屬性 calc 。同時(shí)也可以參考我之前寫的的博客玩轉(zhuǎn) CSS 變量和 CSS 掃雷游戲。

/** 圖表 css 中會(huì)有很多這種計(jì)算代碼 **/ 
height: calc(100% * var(--end, var(--size, 1)));

當(dāng)然，該庫目前可以描述水平條形圖（bar）、柱狀圖（column）、面積圖 (area)、折線圖（line）。餅圖，雷達(dá)圖等還在開發(fā)中。當(dāng)然該庫也可以實(shí)現(xiàn)混合圖表：

Charts.css 同時(shí)支持用戶使用 CSS3 為當(dāng)前圖表添加各種效果，詳情見定制化。

鼓勵(lì)一下

如果你覺得這篇文章不錯(cuò)，希望可以給與我一些鼓勵(lì)，在我的 github 博客下幫忙 star 一下。

博客地址：https://github.com/wsafight/personBlog

參考資料

《如何融合數(shù)據(jù)可視化與物理世界》

跟月影學(xué)可視化

Charts.css

最后

歡迎關(guān)注【前端瓶子君】??ヽ(°▽°)ノ?

回復(fù)「算法」，加入前端編程源碼算法群，每日一道面試題（工作日），第二天瓶子君都會(huì)很認(rèn)真的解答喲！

回復(fù)「交流」，吹吹水、聊聊技術(shù)、吐吐槽！

回復(fù)「閱讀」，每日刷刷高質(zhì)量好文！

如果這篇文章對(duì)你有幫助，「在看」是最大的支持

》》面試官也在看的算法資料《《

“在看和轉(zhuǎn)發(fā)”就是最大的支持

從 CSS 開始學(xué)習(xí)數(shù)據(jù)可視化