完美世界小说txt下载,小说阅读网站

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

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

簡(jiǎn)介

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

創(chuàng)新互聯(lián)建站主營(yíng)米林網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,App定制開(kāi)發(fā),米林h5微信平臺(tái)小程序開(kāi)發(fā)搭建,米林網(wǎng)站營(yíng)銷(xiāo)推廣歡迎米林等地區(qū)企業(yè)咨詢(xú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ù)展示形式，包括面形圖、條形圖、柱形圖、折線(xiàn)圖、多數(shù)據(jù)集面形圖、多數(shù)據(jù)集條形圖、多數(shù)據(jù)集及柱形圖、多數(shù)據(jù)集折線(xiàn)圖、百分比柱形圖、堆積柱形圖、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引入：

使用unpkg CDN引入：

使用npm安裝：

 
 
 
 
  
  
  
  npm install charts.css

使用yarn安裝：

 
 
 
 
  
  
  
  yarn add charts.css

源碼引入：

 
 
 
 
  
  
  
  // 從這里下載源碼壓縮包 
  
  
  
  https://github.com/ChartsCSS/charts.css/releases 
  
  
  
  // 把charts.min.css復(fù)制到自己的項(xiàng)目中并引入

簡(jiǎn)單使用

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

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

 
 
 
 
  
  
  
     
   
     
        Country  
       Gold  
       Silver  
       Bronze  
    
   
   
     
        USA  
      
       
       
     
     
        GBR  
      
       
       
     
     
        CHN  
      
       
       
     
   
 

  
  
  
   2016 Summer Olympics Medal Table 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
   46 
  
  
  
   37 
  
  
  
   38 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
   27 
  
  
  
   23 
  
  
  
   17 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
   26 
  
  
  
   18 
  
  
  
   26

2016 Summer Olympics Medal Table

46	37	38
27	23	17
26	18	26

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

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

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

條形圖：

 
 
 
 
  
  
  
  // 單數(shù)據(jù)集條形圖 
  
  
  
   
  
  
  
    ... 
  
  
  
   
  
  
  
  // 多數(shù)據(jù)集條形圖 
  
  
  
  
  
  
  
    ...

柱形圖：

 
 
 
 
  
  
  
  // 單數(shù)據(jù)集柱形圖 
  
  
  
   
  
  
  
    ... 
  
  
  
   
  
  
  
  // 多數(shù)據(jù)集柱形圖 
  
  
  
   
  
  
  
    ...

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

個(gè)性化

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

 
 
 
 
  
  
  
  // html 
  
  
  
   
  
  
  
    ... 
  
  
  
   
  
  
  
  // 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 ); }
  
  
  
   }

分享題目：Charts.css：一個(gè)數(shù)據(jù)可視化開(kāi)源神器
標(biāo)題URL：http://m.fisionsoft.com.cn/article/ccohhih.html

新聞中心

簡(jiǎn)介

安裝

簡(jiǎn)單使用

個(gè)性化

其他資訊