关于ide:Chartscss一个数据可视化开源神器

26次阅读

共计 3306 个字符，预计需要花费 9 分钟才能阅读完成。

【导语】：Charts.css 是用于数据可视化的开源 CSS 框架，帮忙用户了解数据，帮忙开发人员应用简略的 CSS 类将数据转换为丑陋的图表。

数据可视化能够改善用户体验，因为数据的图形示意通常更容易了解。可视化帮忙最终用户了解数据，而 Charts.css 能够帮忙开发人员应用简略的 CSS 类将其数据转换为精美的图形。

Charts.css 是用于数据可视化的新的开源框架。它用 CSS 框架代替了传统的 JS 图表库。

传统的图表库往往应用 JS 渲染数据，重大依赖 JS，大型的 JS 库通常会影响网站性能，搜索引擎也无奈读取存储在 JS 对象中的数据。而 Charts.css 是古代的 CSS 框架，原始数据是 HTML 的一部分，使其对搜索引擎和可见；应用 CSS 不须要渲染，能够进步性能。

它反对多种数据展现模式，包含面形图、条形图、柱形图、折线图、多数据集面形图、多数据集条形图、多数据集及柱形图、多数据集折线图、百分比柱形图、沉积柱形图、3D 条形成果、3D 歪斜成果等。

Charts.css 具备以下特点：

纯前端，应用 HTML 和 CSS 构建
简略易用
个性化定制，能够依照本人的形式设置图标款式
开源，能够批改代码
响应式
反对多种图表类型

我的项目地址是：

https://github.com/ChartsCSS/…

应用 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 复制到本人的我的项目中并引入  
<link rel="stylesheet" href="path/to/your/charts.min.css">

Charts.css 将原始数据放在 HTML 的 table 元素中，从而使其对搜索引擎可见。

数据表示例：

<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>

将数据显示为图表，只须要将.charts-css 增加到 table 元素的 class 属性中，并抉择一种图表类型即可。

繁多数据集，是指 table 中的每个 tr 元素只有一个 td 子元素：

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

多数据集，是指 table 中的每个 tr 元素有多个 td 子元素：

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

条形图：

// 单数据集条形图  
<table class="charts-css bar">  
  ...  
</table>  
  
// 多数据集条形图  
<table class="charts-css bar multiple">  
  ...  
</table>

柱形图：

// 单数据集柱形图  
<table class="charts-css column">  
  ...  
</table>  
  
// 多数据集柱形图  
<table class="charts-css column multiple">  
  ...  
</table>

每一种类型的图表其实都是相似的代码（也体现出了这个库的易用性），这里不再反复，具体参考官网。

要增加自定义 CSS，只需在 table 标签中增加 id 或 class 即可：

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

最佳实际应该是将图表类型增加到选择器，这样一来 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;  
}

静止成果：当用户将鼠标悬停在数据项上时，背景色彩将发生变化

#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 秒旋转一次


#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); }  
}