Charts.css：一個(gè)數(shù)據(jù)可視化開(kāi)源神器

↓推薦關(guān)注↓

【導(dǎo)語(yǔ)】：Charts.css 是用于數(shù)據(jù)可視化的開(kāi)源 CSS 框架，幫助用戶(hù)理解數(shù)據(jù)，幫助開(kāi)發(fā)人員使用簡(jiǎn)單的 CSS 類(lèi)將數(shù)據(jù)轉(zhuǎn)換為漂亮的圖表。

簡(jiǎn)介

數(shù)據(jù)可視化可以改善用戶(hù)體驗(yàn)，因?yàn)閿?shù)據(jù)的圖形表示通常更容易理解。可視化幫助最終用戶(hù)理解數(shù)據(jù)，而Charts.css可以幫助開(kāi)發(fā)人員使用簡(jiǎn)單的CSS類(lèi)將其數(shù)據(jù)轉(zhuǎn)換為精美的圖形。

Charts.css是用于數(shù)據(jù)可視化的新的開(kāi)源框架。它用CSS框架代替了傳統(tǒng)的JS圖表庫(kù)。

傳統(tǒng)的圖表庫(kù)往往使用JS渲染數(shù)據(jù)，嚴(yán)重依賴(lài)JS，大型的JS庫(kù)通常會(huì)影響網(wǎng)站性能，搜索引擎也無(wú)法讀取存儲(chǔ)在JS對(duì)象中的數(shù)據(jù)。而Charts.css是現(xiàn)代的CSS框架，原始數(shù)據(jù)是HTML的一部分，使其對(duì)搜索引擎和可見(jiàn)；使用CSS不需要渲染，可以提高性能。

它支持多種數(shù)據(jù)展示形式，包括面形圖、條形圖、柱形圖、折線圖、多數(shù)據(jù)集面形圖、多數(shù)據(jù)集條形圖、多數(shù)據(jù)集及柱形圖、多數(shù)據(jù)集折線圖、百分比柱形圖、堆積柱形圖、3D條形效果、3D傾斜效果等。

Charts.css具有以下特點(diǎn)：

• 純前端，使用HTML和CSS構(gòu)建
• 簡(jiǎn)單易用
• 個(gè)性化定制，可以按照自己的方式設(shè)置圖標(biāo)樣式
• 開(kāi)源，可以修改代碼
• 響應(yīng)式
• 支持多種圖表類(lèi)型

項(xiàng)目地址是：

https://github.com/ChartsCSS/charts.css

安裝

• 使用jsdelivr CDN引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">

• 使用unpkg CDN引入：

<link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">

• 使用npm安裝：

npm install charts.css

• 使用yarn安裝：

yarn add charts.css

• 源碼引入：

// 從這里下載源碼壓縮包
https://github.com/ChartsCSS/charts.css/releases

// 把charts.min.css復(fù)制到自己的項(xiàng)目中并引入
<link rel="stylesheet" href="path/to/your/charts.min.css">

簡(jiǎn)單使用

Charts.css將原始數(shù)據(jù)放在HTML的table元素中，從而使其對(duì)搜索引擎可見(jiàn)。

數(shù)據(jù)表示例：

<table>

  <caption> 2016 Summer Olympics Medal Table </caption>

  <thead>
    <tr>
      <th scope="col"> Country </th>
      <th scope="col"> Gold </th>
      <th scope="col"> Silver </th>
      <th scope="col"> Bronze </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row"> USA </th>
      <td> 46 </td>
      <td> 37 </td>
      <td> 38 </td>
    </tr>
    <tr>
      <th scope="row"> GBR </th>
      <td> 27 </td>
      <td> 23 </td>
      <td> 17 </td>
    </tr>
    <tr>
      <th scope="row"> CHN </th>
      <td> 26 </td>
      <td> 18 </td>
      <td> 26 </td>
    </tr>
  </tbody>

</table>

將數(shù)據(jù)顯示為圖表，只需要將.charts-css添加到table元素的class屬性中，并選擇一種圖表類(lèi)型即可。

單一數(shù)據(jù)集，是指table中的每個(gè)tr元素只有一個(gè)td子元素：

<tr>
  <td> Data </td>
</tr>

多數(shù)據(jù)集，是指table中的每個(gè)tr元素有多個(gè)td子元素：

<tr>
  <td> Data </td>
  <td> Data </td>
  <td> Data </td>
</tr>

• 條形圖：

// 單數(shù)據(jù)集條形圖
<table class="charts-css bar">
  ...
</table>

// 多數(shù)據(jù)集條形圖
<table class="charts-css bar multiple">
  ...
</table>

• 柱形圖：

// 單數(shù)據(jù)集柱形圖
<table class="charts-css column">
  ...
</table>

// 多數(shù)據(jù)集柱形圖
<table class="charts-css column multiple">
  ...
</table>

每一種類(lèi)型的圖表其實(shí)都是類(lèi)似的代碼（也體現(xiàn)出了這個(gè)庫(kù)的易用性），這里不再重復(fù)，詳細(xì)參考官網(wǎng)。

個(gè)性化

要添加自定義CSS，只需在table標(biāo)簽中添加id或class即可：

// html
<table class="charts-css ..." id="my-chart">
  ...
</table>

// css
#my-chart {
  ...
}

最佳實(shí)踐應(yīng)該是將圖表類(lèi)型添加到選擇器，這樣一來(lái)CSS就只適用于該圖表類(lèi)型，其他類(lèi)型圖表不會(huì)受影響：

/* Custom style applies only on bar charts */
#my-chart.bar {
  ...
}

/* Other style applies only on pie charts */
#my-chart.pie {
  ...
}

• 3D效果：可以使用CSSbox-shadow屬性

#custom-effect tbody td {
  margin-inline-start: 10px;
  margin-inline-end: 20px;
  box-shadow:
    1px -1px 1px lightgrey,
    2px -2px 1px lightgrey,
    3px -3px 1px lightgrey,
    4px -4px 1px lightgrey,
    5px -5px 1px lightgrey,
    6px -6px 1px lightgrey,
    7px -7px 1px lightgrey,
    8px -8px 1px lightgrey,
    9px -9px 1px lightgrey,
    10px -10px 1px lightgrey;
}

• 運(yùn)動(dòng)效果：當(dāng)用戶(hù)將鼠標(biāo)懸停在數(shù)據(jù)項(xiàng)上時(shí)，背景顏色將發(fā)生變化

#motion-effect tr {
  transition-duration: 0.3s;
}
#motion-effect tr:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
#motion-effect tr:hover th {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
}

• 動(dòng)畫(huà)效果：th元素每3秒旋轉(zhuǎn)一次

#animations-example-2 th {
  animation: spin-labels 3s linear infinite;
}
@keyframes spin-labels {
  0%   { transform: rotateX(   0deg ); }
  40%  { transform: rotateX( 360deg ); }
  100% { transform: rotateX( 360deg ); }
}