卡卡網(wǎng)

與 JS 制作 Charts 圖相比，使用純 CSS 制作 Charts 圖，不需要渲染，所以性能得到了提升。本文就介紹利用一個(gè)CSS框架，制作各種Charts圖的方法。

純CSS制作Charts圖

demodownload

簡介

首先要引用CSS框架文件charts.min.css（在本文源碼下載壓縮包里），注意路徑要寫正確。

<link rel="stylesheet" href="css/charts.min.css">

什么時(shí)候應(yīng)該考慮使用 CSS Charts 圖？如果你只需要一個(gè)簡單的圖表來顯示你的數(shù)據(jù)，在這些情況下，加載繁重的 JS 庫來制作Charts圖是沒有意義的。

條形圖（bar）

demodownload

柱形圖（column）

demodownload

折線圖（line）

demodownload

面積圖（area）

demodownload

更多例子及使用介紹

此前在另一篇文章詳細(xì)介紹過用CSS創(chuàng)建面積chart圖【實(shí)例】，如果符合你的需求，可以去看看。

你還可以到官網(wǎng)獲得更多例子，還有使用詳細(xì)介紹。

相關(guān)文章

• 用CSS創(chuàng)建面積chart圖【實(shí)例】

標(biāo)簽: chart圖  css  css3