cssplot - CSS 绘制图表

cssplot是一个无依赖、纯CSS,响应式设计的可绘制图表元素的CSS.

使用

  • 在HTML中引入cssplot.css文件
  • 在需要绘制图表的标签中使用data-cp-size属性

demo

<div class="bar-chart">
    <ul class="container">
        <li data-cp-size="99">99%</li>
        <li data-cp-size="50">50%</li>
        <li data-cp-size="30">30%</li>
        <li data-cp-size="90">90%</li>
        <li data-cp-size="10">10%</li>
        <li data-cp-size="70">70%</li>
        <li data-cp-size="30">30%</li>
        <li data-cp-size="90">90%</li>
    </ul>
</div>

效果

目前cssplot支持绘制柱状图、和散点图。相比较其他图表库(如Chart.js),cssplot轻量很多,就是支持的图表元素目前较少。

Github

asciimoo/cssplot

时间: 2024-10-12 21:37:04

cssplot - CSS 绘制图表的相关文章

使用kibana和elasticsearch日志实时绘制图表

前言: 此文接的是上篇,上次的内容是,用python操作elasticsearch存储,实现数据的插入和查询.  估计有些人一看我的标题,以为肯定是 logstash kibana elasticsearch的组合.这三个家伙也确实总是勾搭在一块. 其实logstash是可以被别的替换,比如常见的fluented .剩下的那两个,kibana和elasticsearch是一伙的,不好做分离. 这次用的不是那种开源的.cs模式日志收集应用,还真不是.而是自己直接从程序里面把日志打到elastics

iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)

1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 滑动两个中间点,贝塞尔曲线的形状会发生变化. UIBezierPath :对象是CGPathRef数据类型的封装,可以方便的让我们画出 矩形 . 椭圆 或者 直线和曲线的组合形状 初始化方法: + (instancetype)bezierPath; /

matplotlib:使用matplotlib绘制图表

matplotlib下载及API手册地址:http://sourceforge.net/projects/matplotlib/files/matplotlib/ 数学库numpy下载及API手册地址:http://www.scipy.org/Download 几个绘图的例子[来自API手册] 1.最简单的图: 代码: #!/usr/bin/env python import matplotlib.pyplot as plt plt.plot([10, 20, 30]) plt.xlabel('

使用D3绘制图表(7)--饼状图

这次是绘制饼状图,也是这一次使用D3绘制图表的最后一篇,大家可以从其他地方深入学习D3绘制图表,也可以直接查看D3的API进行学习,本次绘制饼状图的数据跟之前的卸载数组里面的不一样,这一次是使用d3的csv(url)函数读取的一个data.csv文件,在此声明,如果网页的编辑器不是使用自带的服务器打开网页的那就会读取不了csv文件报错,我这里使用的HBuilder,一款还不错的编辑器. 1.data.csv文件,以键值对的形式书写 education,population 大专及以上,11964

网页绘制图表 Google Charts with JavaScript #1....好强、好简单啊!

此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript....好强.好简单啊!#1 http://www.dotblogs.com.tw/mis2000lab/archive/2014/01/23/google_charts-javascript.aspx 今天看见 g+一篇文章 http://inspiredtoeducate.net/inspiredtoeducate/?p=1319 因而发觉这个东西. 我先连到 Google原厂网站,看

网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)

此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法) http://www.dotblogs.com.tw/mis2000lab/archive/2014/05/10/google_charts-with-asp.net-clientscriptmanager.registerstartupscript.as

用CSS绘制最常见的40种形状和图形

今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方形) #square { width: 100px; height: 100px; background: red;} Rectangle(矩形) #rectangle { width: 200px; height: 100px; background: red;} Circle(圆形) #circ

纯CSS绘制三角形

使用CSS绘制三角形 正三角形的绘制: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>正三角形</title> 6 <style type="text/css"> 7 #triangle-up { 8 width: 0; 9 height: 0; 10

史上最强大的40多个纯CSS绘制的图形

今天在国外的网站上看到了很多看似简单却又非常强大的纯 CSS 绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square (正方形) #square { width: 100px; height: 100px; background: red; } Rectangle (矩形) #rectangle { width: 200px; height: 100px; background: red; } Circle (圆形