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

簡介

數(shù)據(jù)可視化可以改善用戶體驗(yàn)，因?yàn)閿?shù)據(jù)的圖形表示通常更容易理解?？梢暬瘞椭罱K用戶理解數(shù)據(jù)，而Charts.css可以幫助開發(fā)人員使用簡單的CSS類將其數(shù)據(jù)轉(zhuǎn)換為精美的圖形。

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

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

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

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

純前端，使用HTML和CSS構(gòu)建

簡單易用

個(gè)性化定制，可以按照自己的方式設(shè)置圖標(biāo)樣式

開源，可以修改代碼

響應(yīng)式

支持多種圖表類型

項(xiàng)目地址是：

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

安裝

使用jsdelivr CDN引入：

使用unpkg CDN引入：

使用npm安裝：

npminstallcharts.css

使用yarn安裝：

yarnaddcharts.css

源碼引入：

//從這里下載源碼壓縮包

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

// 把charts.min.css復(fù)制到自己的項(xiàng)目中并引入

《link rel=“stylesheet” href=“path/to/your/charts.min.css”》

簡單使用

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

數(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屬性中，并選擇一種圖表類型即可。

單一數(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》

每一種類型的圖表其實(shí)都是類似的代碼（也體現(xiàn)出了這個(gè)庫的易用性），這里不再重復(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)該是將圖表類型添加到選擇器，這樣一來CSS就只適用于該圖表類型，其他類型圖表不會(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)用戶將鼠標(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)畫效果：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 ）; }

}

編輯：jq