当前位置: 首页 > 软件库 > Web应用开发 > CSS框架 >

Charts.css

数据可视化 CSS 框架
授权协议 MIT
开发语言 HTML/CSS
所属分类 Web应用开发、 CSS框架
软件类型 开源软件
地区 不详
投 递 者 钱志
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Charts.css 是一个将 HTML 元素样式转化为数据可视化图表的开源 CSS 框架,用简单的CSS 类即可将数据转换为漂亮的图表和图形。

 

特性

  • 语义结构:使用 HTML 标签显示数据
  • 可定制:使用 CSS 自定义样式
  • 响应式:使用媒体查询进行缩放
  • 无障碍:标记内的原始数据
  • 种类繁多:支持多种图表类型
  • 无依赖:零外部开销
  • 小型库:文件大小 72kb,压缩后 6kb
  • 更好的性能:没有 JS = 没有渲染
  • 开源:可以自行修改代码

支持的图表类型

用法

数据使用语义 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>
  • <!DOCTYPE html> <html lang="en">          <head>         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">         <!-- Meta, title, CSS, favicons, etc. -->         <meta charset="ut

  • //蓝色的 Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search onli

 相关资料
  • 数据可视化工具 JS 库: d3 sigmajs **部件 & 组件:</h5> Chart.js C3.js Google Charts chartist-jsj amCharts [$] Highcharts [Non-commercial free to $] FusionCharts [$] ZingChart [free to $] Epoch 服务: Datawrapper infog

  • 在侧边导航栏点击 Visualize 开始视化您的数据。 Visualize 工具能让您通过多种方式浏览您的数据。例如:我们使用饼图这个重要的可视化控件来查看银行账户样本数据中的账户余额。点击屏幕中间的 Create a visualization 蓝色按钮开始。 有很多种可视化控件可供选择。我们点击其中一个名为 Pie 的。 您可以为已保存的搜索建立可视化效果,或者输入新的搜索条件。使用后者时,

  • 数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。 热力图 散点图 动画要素图 高效率点图层 ECharts Mapv OSM Buildings

  • 在我们开始的我们的可视化的之旅之前,需要简单的介绍一些数据分析工具,我们的数据可视化的任务也是建立在数据分析的基础之上。Python 的主要数据分析工具如下所示: Numpy:这个是数据计算的工具,主要用来进行矩阵的运算,矢量运算等等。 Scipy:科学计算函数库,主要用在学术领域,主要包含线性代数模块,信号与图像处理模块,统计学模块等等。 Sympy:数学符号计算库 Pandas:包含了 num

  • 数据可视化在数据科学中起着非常重要的作用。 我们可以将数据可视化视为数据科学的一个模块。 数据科学不仅包括构建预测模型。 它包括对模型的解释,并使用它们来理解数据和做出决策。 数据可视化是以最令人信服的方式呈现数据的不可或缺的一部分。 从数据科学的角度来看,数据可视化是一个突出的特征,它显示了变化和趋势。 考虑以下有效数据可视化指南 - 按常规比例定位数据。 与圆形和正方形相比,使用条形更有效。

  • 原文地址:https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/ 这篇教程教你如何使用Cesium的Entity API去绘制空间数据,如点,图标,文字标注,折线,模型,图形和立体图形。虽然这章不需要什么前提,但是如果你对Cesium一无所知,最好从第一个教程开始。 Entity API是什么? Cesium丰富的空间数据可视化API分为两