Charts.css

Charts.css 是一个用于数据可视化的开源 CSS 框架。

可视化帮助最终用户理解数据。Charts.css帮助前端开发人员使用简单的**CSS 类**将数据转换为漂亮的图表和图形。

没有依赖关系。72kb 文件大小。小于 6kb 的 gzip 文件大小！

文档

查看ChartsCSS.org上的完整文档。

• 开始使用
• 成分
• 图表
• 定制
• 发展
• 例子

安装

内容分发网络

使用jsdelivr CDN：

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

或解压缩CDN：

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

包管理器

使用npm安装：

npm install charts.css

或使用Yarn：

yarn add charts.css

用法

数据使用语义 HTML 标记进行结构化，并使用 CSS 类设置样式，这些类更改显示给最终用户的视觉表示。

<table class="charts-css [ column ] [ show-primary-axis show-4-secondary-axes ] [ data-spacing-4 reverse-data ]">

  <caption> Front End Developer Salary </caption>

  <thead>
    <tr>
      <th scope="col"> Year </th>
      <th scope="col"> Income </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row"> 2016 </th>
      <td style="--size: calc( 40 / 100 );"> $ 40K </td>
    </tr>
    <tr>
      <th scope="row"> 2017 </th>
      <td style="--size: calc( 60 / 100 );"> $ 60K </td>
    </tr>
    <tr>
      <th scope="row"> 2018 </th>
      <td style="--size: calc( 75 / 100 );"> $ 75K </td>
    </tr>
    <tr>
      <th scope="row"> 2019 </th>
      <td style="--size: calc( 90 / 100 );"> $ 90K </td>
    </tr>
    <tr>
      <th scope="row"> 2020 </th>
      <td style="--size: calc( 100 / 100 );"> $ 100K <br> 👑 </td>
    </tr>
  </tbody>

</table>

该框架为开发人员提供了灵活性。您可以选择要显示的组件以及如何设置它们的样式。每个组件都提供了几个 CSS 类和 CSS 变量来自定义您的样式。

关键特性是能够使用基本 CSS 自定义所有内容。前端开发人员可以定位任何 HTML 元素并对其进行自定义。这个哲学指导方针使框架如此灵活、易用和有趣。

问题

如有问题和支持，请使用 GitHub 上的官方论坛。

喜欢 Charts.css？

如果您喜欢该项目， 请考虑在 GitHub 上为 repo 加注星标 。

执照

Charts.css 在MIT license下获得许可。