前段时间介绍过一个chart.xkcd 的手绘图表组件，roughViz 是另外一个，同时也提供了
比较多的图表类型，api 参考文档也比较全

支持的图表类型

  • Bar
  • Horizontal Bar
  • Donut
  • Line
  • Pie
  • Scatter

简单使用

直接使用html 页面

  • 引用组件
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
</head>
<body>
    <div style="display: inline;">
            <div id="vis0" style="display: inline;"></div>
            <div id="vis1" style="display: inline;"></div>
    </div>
​
    <script src="https://unpkg.com/rough-viz@1.0.2"></script>
    <script>
        // create donut chart from csv file, using default options
        new roughViz.Bar({
            element: '#vis0', // container selection
            data: 'https://raw.githubusercontent.com/jwilber/random_data/master/flavors.csv',
            labels: 'flavor',
            values: 'price'
        });
​
        // create Donut chart using defined data & customize plot options
        new roughViz.Donut(
            {
                element: '#vis1',
                data: {
                    labels: ['North', 'South', 'East', 'West'],
                    values: [10, 5, 8, 3]
                },
                title: "Regions",
                width: window.innerWidth / 4,
                roughness: 8,
                colors: ['red', 'orange', 'blue', 'skyblue'],
                stroke: 'black',
                strokeWidth: 3,
                fillStyle: 'cross-hatch',
                fillWeight: 3.5,
            }
        );
    </script>
</body>
</html>
 
  • 效果

参考资料

https://github.com/jwilber/roughViz

roughViz 一个可重用，功能强大的手绘图表组件的更多相关文章

  1. 功能强大的图片截取修剪神器：Android SimpleCropView及其实例代码重用简析（转）

    功能强大的图片截取修剪神器:Android SimpleCropView及其实例代码重用简析 SimpleCropView是github上第一个第三方开源的图片修剪截取利器,功能强大,设计良好.我个人 ...

  2. 整合了一个功能强大完善的OA系统源码，php全开源 界面漂亮美观

    整合了一个功能强大完善的OA系统源码,php全开源界面漂亮美观.需要的同学联系Q:930948049

  3. WebLech是一个功能强大的Web站点下载与镜像工具

    WebLech是一个功能强大的Web站点下载与镜像工具.它支持按功能需求来下载web站点并能够尽可能模仿标准Web浏览器的行为.WebLech有一个功能控制台并采用多线程操作. http://sour ...

  4. Postman 是一个非常棒的Chrome扩展，提供功能强大的API & HTTP 请求调试

    Postman 是一个非常棒的Chrome扩展,提供功能强大的API & HTTP 请求调试   需要FQ才能安装,使用时应该不用FQ了,除非使用postman的历史记录功能:   非常棒的C ...

  5. opentwebst一个ie自动化操作测试软件-功能强大

    opentwebst一个ie自动化操作测试软件-功能强大 一个ie自动化操作测试软件,自动根据操作记录脚本.生成vbs,js和其他脚本语言,用来运行 里面包含了两个东西: 1.脚本操作自动记录,记录下 ...

  6. cURL 是一个功能强大的PHP库。

    使用PHP的cURL库可以简单和有效地去抓网页.你只需要运行一个脚本,然后分析一下你所抓取的网页,然后就可以以程序的方式得到你想要的数据了.无论是你想从从一个链接上取部分数据,或是取一个XML文件并把 ...

  7. SuperSwipeRefreshLayout 一个功能强大的自己定义下拉刷新组件

    SuperSwipeRefreshLayout 一个功能强大的自己定义下拉刷新组件. Why? 下拉刷新这样的控件.想必大家用的太多了,比方使用非常多的XListView等. 近期.项目中非常多列表都 ...

  8. 简单使用Laravel-admin构建一个功能强大的后台管理

    Laravel-admin可以快速构建一个功能强大的后台,方便快速开发. 以下内容记录简单使用Laravel-admin,以及遇到小错误的解决方法. Laravel-admin 依赖以下环境 需要提前 ...

  9. 推荐一个高效，易用功能强大的可视化API管理平台

    项目管理 提供基本的项目分组,项目管理,接口管理功能 接口管理 友好的接口文档,基于websocket的多人协作接口编辑功能和类postman测试工具,让多人协作成倍提升开发效率 MockServer ...

随机推荐

  1. Logback获取SkyWalking的全局唯一标识 trace-id 记录到日志中

    为什么要获取trace-id 通过上文Docker-Compose搭建单体SkyWalking我们搭建了SkyWalking服务,我们需要在日志中记录下来每次请求的唯一标识(trace-id),这样就 ...

  2. 『2019Summer Algorithms』

    一个暑假两次集训,感觉学了好多好多的东西,也挖了好多好多的坑,于是就决定写一篇关于算法的总结,用于熟悉新算法,也留下一点对新算法的理解. AC自动机 简单的说就是在\(trie\)树上实现\(KMP\ ...

  3. FusionInsight大数据开发---Flume应用开发

    Flume应用开发 要求: 了解Flume应用开发适用场景 掌握Flume应用开发 Flume应用场景Flume的核心是把数据从数据源收集过来,在送到目的地.为了保证输送一定成功,发送到目的地之前,会 ...

  4. Java静态变量初始化的坑

    class SingleTon { private static SingleTon singleTon = new SingleTon(); public static int count1; pu ...

  5. C#汉字转为Unicode编码

    主要用于生成json格式时,将汉字转成Unicoude编码,防止页面乱码. protected string GetUnicode(string text) { string result = &qu ...

  6. 3DESC加密算法

    3DESC 请求参数和响应参数全采用3des加密规则,由于我是用.NET对接的,而第三方是Java开发的,所以两种程序之间采用的算法有一点差异,java的3des加密采用的是"DESede/ ...

  7. Java判断两个时间相差的天数

    1.实现目标 输入:两个日期 输出:两个日期相差的天数 2.代码实现 方法1: 通过Calendar类的日期比较.注意:这里需要考虑一下: 日期是跨年份的,如一个是2012年,一个是2015年的   ...

  8. java基础小练习,1-打印一百次(1~10)的随机数,2-固定一个随机数(1~100)，然后猜出他,3-定义以指定格式打印集合(ArrayList类型作为参数)，使用{}括起来，使用@代替,分隔每个元素

    推荐自己码一下,可以使用别的方法,面向对象,不需要注重过程 /* 题目:我需要打印一百次(1~10)的随机数 */ import java.util.Random; public class demo ...

  9. MongoDB常用数据库命令第一集

    1.查询操作(1)Help查看命令提示helpdb.help()db.test.help()db.test.find().help()(2)创建/切换数据库use music(3)查询数据库show ...

  10. C#使用SMTP协议发送验证码到QQ邮箱

    C#使用SMTP协议发送验证码到QQ邮箱 在程序设计中,发送验证码是常见的一个功能,用户在注册账号时或忘记密码后,通常需要发送验证码到手机短信或邮箱来验证身份,此篇博客介绍在C#中如何使用SMTP协议 ...