如何使用Charts.css工具

本篇內(nèi)容介紹了“如何使用Charts.css工具”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

 簡介

數(shù)據(jù)可視化可以改善用戶體驗，因為數(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庫通常會影響網(wǎng)站性能，搜索引擎也無法讀取存儲在JS對象中的數(shù)據(jù)。而Charts.css是現(xiàn)代的CSS框架，原始數(shù)據(jù)是HTML的一部分，使其對搜索引擎和可見；使用CSS不需要渲染，可以提高性能。

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

Charts.css具有以下特點：

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

•  簡單易用

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

•  開源，可以修改代碼

•  響應(yīng)式

•  支持多種圖表類型

安裝

•  使用jsdelivr CDN引入： 

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

•  使用unpkg CDN引入： 

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

•  使用npm安裝： 

npm install charts.css

•  使用yarn安裝： 

yarn add charts.css

•  源碼引入： 

// 從這里下載源碼壓縮包  https://github.com/ChartsCSS/charts.css/releases  // 把charts.min.css復(fù)制到自己的項目中并引入  <link rel="stylesheet" href="path/to/your/charts.min.css">

簡單使用

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

數(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中的每個tr元素只有一個td子元素：

<tr>    <td> Data </td>  </tr>

多數(shù)據(jù)集，是指table中的每個tr元素有多個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>

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

個性化

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

// html  <table class="charts-css ..." id="my-chart">    ...  </table>  // css  #my-chart {    ...  }

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

/* 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;  }

•  運動效果：當(dāng)用戶將鼠標(biāo)懸停在數(shù)據(jù)項上時，背景顏色將發(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;  }

•  動畫效果：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工具”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！