日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
Charts.css：一個(gè)數(shù)據(jù)可視化開源神器

 簡(jiǎn)介

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

創(chuàng)新互聯(lián)建站主營(yíng)米林網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,App定制開發(fā),米林h5微信平臺(tái)小程序開發(fā)搭建,米林網(wǎng)站營(yíng)銷推廣歡迎米林等地區(qū)企業(yè)咨詢

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

傳統(tǒng)的圖表庫(kù)往往使用JS渲染數(shù)據(jù)，嚴(yán)重依賴JS，大型的JS庫(kù)通常會(huì)影響網(wǎng)站性能，搜索引擎也無(wú)法讀取存儲(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)建
  •  簡(jiǎn)單易用
  •  個(gè)性化定制，可以按照自己的方式設(shè)置圖標(biāo)樣式
  •  開源，可以修改代碼
  •  響應(yīng)式
  •  支持多種圖表類型

項(xiàng)目地址是：

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

安裝

  •  使用jsdelivr CDN引入：
 
 
 
 
    
  
  
  
  
    2.
  •  使用unpkg CDN引入：
 
 
 
 
    
  
  
  
  
    2.
  •  使用npm安裝：
 
 
 
 
    
  
  
  
  
  1. npm install charts.css
    2.
  •  使用yarn安裝：
 
 
 
 
    
  
  
  
  
  1. yarn add charts.css
    2.
  •  源碼引入：
 
 
 
 
    
  
  
  
  
  1. // 從這里下載源碼壓縮包 
    2. 
  
  
  
  
  2. https://github.com/ChartsCSS/charts.css/releases 
    3. 
  
  
  
  
  3. // 把charts.min.css復(fù)制到自己的項(xiàng)目中并引入 
    4. 
  
  
  
  
    5.

簡(jiǎn)單使用

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

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

 
 
 
 
    
  
  
  
  
  1.  
  2.   
    3.  
  3.   
    4.  
  4.     
    5.  
  5.        Country  
  6.        Gold  
  7.        Silver  
  8.        Bronze  
  9.     
    10.  
  10.   
    11.  
  11.   
    12.  
  12.     
    13.  
  13.        USA  
  14.       
    15.  
  15.       
    16.  
  16.       
    17.  
  17.     
    18.  
  18.     
    19.  
  19.        GBR  
  20.       
    21.  
  21.       
    22.  
  22.       
    23.  
  23.     
    24.  
  24.     
    25.  
  25.        CHN  
  26.       
    27.  
  27.       
    28.  
  28.       
    29.  
  29.     
    30.  
  30.   
    31.  
  31. 
  
  
  
   2016 Summer Olympics Medal Table 
  
  
  
  
  
  
  
  
    
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    
  
  
  
      
  
  
  
  
  
  
  
  
    
  
  
  
  
  
  
  
   46 
  
  
  
   37 
  
  
  
   38 
  
  
  
  
    
  
  
  
  
    
  
  
  
  
  
  
  
   27 
  
  
  
   23 
  
  
  
   17 
  
  
  
  
    
  
  
  
  
    
  
  
  
  
  
  
  
   26 
  
  
  
   18 
  
  
  
   26 
  
  
  
  
    
  
  
  
      
  
  
  
  
    32.

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    Data  
    3. 
  
  
  
  
  3.

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    Data  
    3. 
  
  
  
  
  3.    Data  
    4. 
  
  
  
  
  4.    Data  
    5. 
  
  
  
  
  5.
  •  條形圖：
 
 
 
 
    
  
  
  
  
  1. // 單數(shù)據(jù)集條形圖 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   ... 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. // 多數(shù)據(jù)集條形圖 
    6. 
  
  
  
  
    7. 
  
  
  
  
  7.   ... 
    8. 
  
  
  
  
  8.

  •  柱形圖：
 
 
 
 
    
  
  
  
  
  1. // 單數(shù)據(jù)集柱形圖 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   ... 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. // 多數(shù)據(jù)集柱形圖 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.   ... 
    8. 
  
  
  
  
  8.

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

個(gè)性化

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

 
 
 
 
    
  
  
  
  
  1. // html 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   ... 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. // css 
    6. 
  
  
  
  
  6. #my-chart { 
    7. 
  
  
  
  
  7.   ... 
    8. 
  
  
  
  
  8. }
    9.

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

 
 
 
 
    
  
  
  
  
  1. /* Custom style applies only on bar charts */ 
    2. 
  
  
  
  
  2. #my-chart.bar { 
    3. 
  
  
  
  
  3.   ... 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. /* Other style applies only on pie charts */ 
    6. 
  
  
  
  
  6. #my-chart.pie { 
    7. 
  
  
  
  
  7.   ... 
    8. 
  
  
  
  
  8. }
    9.
  •  3D效果：可以使用CSSbox-shadow屬性
 
 
 
 
    
  
  
  
  
  1. #custom-effect tbody td { 
    2. 
  
  
  
  
  2.   margin-inline-start: 10px; 
    3. 
  
  
  
  
  3.   margin-inline-end: 20px; 
    4. 
  
  
  
  
  4.   box-shadow: 
    5. 
  
  
  
  
  5.     1px -1px 1px lightgrey, 
    6. 
  
  
  
  
  6.     2px -2px 1px lightgrey, 
    7. 
  
  
  
  
  7.     3px -3px 1px lightgrey, 
    8. 
  
  
  
  
  8.     4px -4px 1px lightgrey, 
    9. 
  
  
  
  
  9.     5px -5px 1px lightgrey, 
    10. 
  
  
  
  
  10.     6px -6px 1px lightgrey, 
    11. 
  
  
  
  
  11.     7px -7px 1px lightgrey, 
    12. 
  
  
  
  
  12.     8px -8px 1px lightgrey, 
    13. 
  
  
  
  
  13.     9px -9px 1px lightgrey, 
    14. 
  
  
  
  
  14.     10px -10px 1px lightgrey; 
    15. 
  
  
  
  
  15. }
    16.

  •  運(yùn)動(dòng)效果：當(dāng)用戶將鼠標(biāo)懸停在數(shù)據(jù)項(xiàng)上時(shí)，背景顏色將發(fā)生變化
 
 
 
 
    
  
  
  
  
  1. #motion-effect tr { 
    2. 
  
  
  
  
  2.   transition-duration: 0.3s; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. #motion-effect tr:hover { 
    5. 
  
  
  
  
  5.   background-color: rgba(0, 0, 0, 0.2); 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7. #motion-effect tr:hover th { 
    8. 
  
  
  
  
  8.   background-color: rgba(0, 0, 0, 0.4); 
    9. 
  
  
  
  
  9.   color: #fff; 
    10. 
  
  
  
  
  10. }
    11.
  •  動(dòng)畫效果：th元素每3秒旋轉(zhuǎn)一次
 
 
 
 
    
  
  
  
  
  1. #animations-example-2 th { 
    2. 
  
  
  
  
  2.   animation: spin-labels 3s linear infinite; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. @keyframes spin-labels { 
    5. 
  
  
  
  
  5.   0%   { transform: rotateX(   0deg ); } 
    6. 
  
  
  
  
  6.   40%  { transform: rotateX( 360deg ); } 
    7. 
  
  
  
  
  7.   100% { transform: rotateX( 360deg ); }
    8. 
  
  
  
  
  8.  }
    9.

分享標(biāo)題：Charts.css：一個(gè)數(shù)據(jù)可視化開源神器
網(wǎng)頁(yè)路徑：http://www.5511xx.com/article/ccohhih.html