Charts-css：一個數據可視化開源神器

【導語】：Charts.css 是用於數據可視化的開源 CSS 框架，幫助用戶理解數據，幫助開發人員使用簡單的 CSS 類將數據轉換爲漂亮的圖表。

簡介

數據可視化可以改善用戶體驗，因爲數據的圖形表示通常更容易理解。可視化幫助最終用戶理解數據，而 Charts.css 可以幫助開發人員使用簡單的 CSS 類將其數據轉換爲精美的圖形。

Charts.css 是用於數據可視化的新的開源框架。它用 CSS 框架代替了傳統的 JS 圖表庫。

傳統的圖表庫往往使用 JS 渲染數據，嚴重依賴 JS，大型的 JS 庫通常會影響網站性能，搜索引擎也無法讀取存儲在 JS 對象中的數據。而 Charts.css 是現代的 CSS 框架，原始數據是 HTML 的一部分，使其對搜索引擎和可見；使用 CSS 不需要渲染，可以提高性能。

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

Charts.css 具有以下特點：

項目地址是：

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

安裝

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

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

1npm install charts.css
2
3

1yarn add charts.css
2
3

1// 從這裏下載源碼壓縮包
2https://github.com/ChartsCSS/charts.css/releases
3
4// 把charts.min.css複製到自己的項目中並引入
5<link rel="stylesheet" href="path/to/your/charts.min.css">
6

簡單使用

Charts.css 將原始數據放在 HTML 的 table 元素中，從而使其對搜索引擎可見。

數據表示例：

 1<table>
 2
 3  <caption> 2016 Summer Olympics Medal Table </caption>
 4
 5  <thead>
 6    <tr>
 7      <th scope="col"> Country </th>
 8      <th scope="col"> Gold </th>
 9      <th scope="col"> Silver </th>
10      <th scope="col"> Bronze </th>
11    </tr>
12  </thead>
13
14  <tbody>
15    <tr>
16      <th scope="row"> USA </th>
17      <td> 46 </td>
18      <td> 37 </td>
19      <td> 38 </td>
20    </tr>
21    <tr>
22      <th scope="row"> GBR </th>
23      <td> 27 </td>
24      <td> 23 </td>
25      <td> 17 </td>
26    </tr>
27    <tr>
28      <th scope="row"> CHN </th>
29      <td> 26 </td>
30      <td> 18 </td>
31      <td> 26 </td>
32    </tr>
33  </tbody>
34
35</table>
36

將數據顯示爲圖表，只需要將. charts-css 添加到 table 元素的 class 屬性中，並選擇一種圖表類型即可。

單一數據集，是指 table 中的每個 tr 元素只有一個 td 子元素：

1<tr>
2  <td> Data </td>
3</tr>
4
5

多數據集，是指 table 中的每個 tr 元素有多個 td 子元素：

1<tr>
2  <td> Data </td>
3  <td> Data </td>
4  <td> Data </td>
5</tr>
6
7

 1// 單數據集條形圖
 2<table class="charts-css bar">
 3  ...
 4</table>
 5
 6// 多數據集條形圖
 7<table class="charts-css bar multiple">
 8  ...
 9</table>
10


 1// 單數據集柱形圖
 2<table class="charts-css column">
 3  ...
 4</table>
 5
 6// 多數據集柱形圖
 7<table class="charts-css column multiple">
 8  ...
 9</table>
10

每一種類型的圖表其實都是類似的代碼（也體現出了這個庫的易用性），這裏不再重複，詳細參考官網。

個性化

要添加自定義 CSS，只需在 table 標籤中添加 id 或 class 即可：

 1// html
 2<table class="charts-css ..." id="my-chart">
 3  ...
 4</table>
 5
 6// css
 7#my-chart {
 8  ...
 9}
10

最佳實踐應該是將圖表類型添加到選擇器，這樣一來 CSS 就只適用於該圖表類型，其他類型圖表不會受影響：

 1/* Custom style applies only on bar charts */
 2#my-chart.bar {
 3  ...
 4}
 5
 6/* Other style applies only on pie charts */
 7#my-chart.pie {
 8  ...
 9}
10

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


 1#motion-effect tr {
 2  transition-duration: 0.3s;
 3}
 4#motion-effect tr:hover {
 5  background-color: rgba(0, 0, 0, 0.2);
 6}
 7#motion-effect tr:hover th {
 8  background-color: rgba(0, 0, 0, 0.4);
 9  color: #fff;
10}
11

1#animations-example-2 th {
2  animation: spin-labels 3s linear infinite;
3}
4@keyframes spin-labels {
5  0%   { transform: rotateX(   0deg ); }
6  40%  { transform: rotateX( 360deg ); }
7  100% { transform: rotateX( 360deg ); }
8}
9
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/cY99gQzmfuFwpMYVcpLpPA

猜你喜歡