关于css:Chartscss-一个新的数据可视化框架底层使用纯-CSS-实现

前言

提到数据可视化框架，那可真的多的去了 Echarts、AntV、D3 等等。然而，这些数据可视化框架都有一个共性 😶，即它们的应用都脱离不开 JavaScript。

相同地是，Charts.css 是一个用纯 CSS 实现的数据可视化框架，它的外围是把 table 标签的体现为柱形图、折线图、饼图等等。

而 Charts.css 的应用非常简单，反对以下 2 种应用形式：

• 在原生的网页我的项目中应用 link 标签引入 Charts.css 的文件，能够是 CDN 上的地址或者在 GitHub 上将 Released 的代码下载到本地
• 在有包治理的我的项目中应用，即通过 npm i charts.css 或 yarn add charts.css 增加到我的项目中

那么，接下来，就让咱们一起从如何应用 Charts.css 来实现柱形图登程，认识一下小而美的它 😎～

应用 Charts.css 实现柱形图

个别状况下，咱们对柱形图的需要比较简单，只须要展现数据大小、数据名称即可。通过应用 Charts.css，咱们这样实现：

<table class="charts-css column show-labels data-spacing-5">
  <tbody>
    <tr>
      <th>Jan</th>
      <td style="--size: calc(40 / 100)"> 
        40 
        <span class="tooltip"> 
          Charts.css is so 
          <br> easy for me. 
        </span>
      </td>
    </tr>
    <tr>
      <th>Feb</th>
      <td style="--size: calc(60 / 100)"> 
        60
      </td>
    </tr>
    <tr>
      <th>Mar</th>
      <td style="--size: calc(75 / 100)"> 
        75 
      </td>
    </tr>
    <tr>
      <th>Mar</th>
      <td style="--size: calc(35 / 100)"> 
        35 
      </td>
    </tr>
  </tbody>
</table>

相应地，渲染到页面上会是这样：

能够看到，咱们不须要 写一行 JavaScript 代码 😚，就实现了一个繁难的柱状图。

上面，咱们来别离认识一下下面这段 HTML 代码各自都做了什么：

.charts-css

在文章的开始，介绍了 Charts.css 是将 table 标签体现为各种图表。

所以，须要在 table 标签上增加 .charts-css 类选择器，来将一般的数据表格转为图表：

<table class="charts-css"></table>

.column 图表类型

在将一般数据表格转为图表后，须要抉择图表的类型，当初曾经公布（Released）的图表类型有：bar、column、area、line。

而在下面这个例子，申明的图表的是 .column，即竖状的柱形图：

<table class="charts-css column">
</table>

.show-lables 展现标签

每个 tr 标签中的 th 标签会作为 以后这条数据的标签，即在下面这个例子是柱形图横轴。

然而，在默认状况下，它是不显示的。所以，须要在 table 标签上增加 .show-lables 选择器来展现该标签：

<table class="charts-css column show-labels">
</table>

.data-spacing-5 数据间距

默认状况下，Charts.css 体现的柱形图中每条柱形之间是紧贴在一起的。

能够在 table 上增加 .data-spacing-5 选择器来让每条柱形之间放弃间距，这样看起来会柔美些，其中最初的数值代表你须要的间距的大小：

<table class="charts-css column show-labels data-spacing-5">
</table>

.–size 数据大小

在图表中，每条 数据在页面展现的大小 是由 --size 属性值决定，例如在下面这个例子，指的是每条数据对应的柱形的高度。

在 Charts.css 中，一对 tr 标签代表一条数据。相应地，--size 属性也须要利用在 tr 标签中 td 标签的 style 上。

例如，须要数据展现的长度为基准的 60% 时，能够这样写：

<td style="--size: calc(60 / 100)"> 
  60 
</td>

.tooltip 展现额定的信息

如果，只是将数据展现为图表，有时候可能不能满足咱们的需要。

在下面这个例子，咱们在第一条的柱形上增加了一个 hover 展现额定的信息（Charts.css is so easy for me.）的成果。

而这个成果是通过在 td 标签中增加 span 标签，并为 span 标签增加 .tooltip 选择器实现：

<tr>
  <th>Jan</th>
  <td style="--size: calc(40 / 100)"> 
    40 
    <span class="tooltip"> 
      Charts.css is so 
      <br> easy for me. 
    </span>
  </td>
</tr>

结语

尽管，目前 Charts.css 仅反对 3 种图表，还有 4 种图表正在开发中。然而，不可否认的是 Charts.css 用起来 没有任何心智累赘。

等 Charts.css 之后更加欠缺了，我想在一些简略的图表场景下，Charts.css 也是一个十分值得举荐的抉择！

点赞 👍

通过浏览本篇文章，如果有播种的话，能够 点个赞，这将会成为我继续分享的能源，感激～

我是五柳，喜爱翻新、捣鼓源码，专一于源码（Vue 3、Vite）、前端工程化、跨端等技术学习和分享，欢送关注我的 微信公众号：Code center。