從 CSS 開始學習數據可視化

時間 2021-05-08

標籤 css html 前端 git github 編程 api 瀏覽器 echarts 框架欄目 CSS 简体版

原文原文鏈接

一圖勝千言

可視化領域是目前（泛）前端中最火熱的分支之一。不管是面向普通用戶的可視化大屏展現數據信息，仍是企業服務中數據統計概覽或者調度服務，乃至於國家大力推進的智慧建設（智慧大腦，智慧城市）等項目，都重度使用了數據可視化技術。css

如下圖片來自於 前端搞可視化 菜鳥體驗體驗技術其歌的分享《如何融合數據可視化與物理世界》。咱們能夠看到：可視化結合硬件也有很大的用武之地。html

可視化是什麼

固然，我曾經一度認爲可視化就是繪製各類圖表，學習可視化就是學習 echarts, D3 等庫，而後利用這些工具繪製餅圖、折線圖、柱狀圖這類圖表。然而，大部分狀況下，咱們是能夠藉助這些庫來進行可視化項目的開發。但這些庫是通用的解決方案。特定條件下，如在短期內同時渲染大量元素，通用的解決方案就沒法使用，此時咱們就須要選擇更加底層的方案（如利用 WebGL 自行控制 GPU 渲染圖像）。前端

可視化的源頭是數據。咱們須要拿到有用的數據，而後經過轉化以及整合數據生成用戶所須要的結構，最終以圖形的方式展示出來。可視化必定是與當前業務高度結合的。可視化工程師須要根據當前的業務以及產品需求，選擇合適當前業務的技術棧並生成對用戶有用的圖像。git

可視化的目的是提高用戶對數據的認知能力，解放用戶的大腦，從而讓數據更有價值。github

用 css 作數據可視化

一般來講，SVG 易於交互，Canvas2D 性能更好。基本上會根據當前交互和計算量來肯定使用 SVG 或者 Canvas 。若是遇到大量像素計算，甚至還須要經過 WebGL 深刻 GPU 編程(自行控制 CPU 並行計算) 。編程

但若是咱們作官網首頁的圖表呢？若是當前的圖表很簡單，不須要變化呢？咱們還須要引入 ECharts 這種庫？或者說手動寫一個圖表。api

實際上，隨着瀏覽器的發展，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 實現折線圖。echarts

固然，用 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 一下。

博客地址

參考資料

《如何融合數據可視化與物理世界》

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。