最近项目要做个手机端的仪表盘，但是画风太给力，echarts、highcharts、D3等等都不能满足业务的需求，你懂的！开找，找到个gauge.js


下面简单介绍下这个插件官网http://bernii.github.io/gauge.js/?utm_source=tuicool&utm_medium=referral

具体需要实现的效果：如图

指针会跟随数的改变而改变，并且会拖动下面的投影移动

主要是注意一下父级div和子集cavas就可以。

具体讲代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="width:400px; type="gauge">  　　　　　　　　　　<!--这里要加type="gauge";不加你懂的什么都没有-->
          <canvas width=200 height=150 id="foo"></canvas>    <!--设置ID、长、宽-->
    </div>
</body>
<script src="../dist/jquery.min.js"></script>
<script src="../dist/gauge.min.js"></script>
<script>
    var opts = {
        lines: 12, // The number of lines to draw
        angle: 0, // The length of each line
        lineWidth: 0.44, // The line thickness
        pointer: {
            length: 0.93, // The radius of the inner circle
            strokeWidth: 0.053, // The rotation offset
            color: '#000000' // Fill color
        },
        limitMax: 'false',   // If true, the pointer will not go past the end of the gauge
        colorStart: '#6FADCF',   // Colors
        colorStop: '#8FC0DA',    // just experiment with them
        strokeColor: '#E0E0E0',   // to see which ones work best for you
        generateGradient: true
    };
    var target = document.getElementById('foo'); // your canvas element
    var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
    gauge.maxValue = 3000; // set max gauge value
    gauge.animationSpeed = 25; // set animation speed (32 is default value)
    gauge.set(650); // set actual value
</script>
<script>
    $.fn.gauge = function(opts) {
        this.each(function() {
            var $this = $(this),
                    data = $this.data();

            if (data.gauge) {
                data.gauge.stop();
                delete data.gauge;
            }
            if (opts !== false) {
                data.gauge = new Gauge(this).setOptions(opts);
            }
        });
        return this;
    };
</script>
</html>

gauge.js的应用的更多相关文章

  1. Ext.js高级组件

    第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...

  2. 时隔两个月再写的Echarts（Enterprise Charts，商业级数据图表）一文

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

  3. 20款 JavaScript 开发框架推荐给前端开发者

    下面,我们给大家提供了一个用于 HTML5 开发的各种用途的 JavaScript 库列表.这些框架能够给前端开发人员提供更好的功能实现的解决方案.如果你有收藏优秀的框架,也可以在后面的评论中分享给我 ...

  4. Echars详解

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /1 ...

  5. 推荐25款很棒的 HTML5 开发框架和开发工具【上篇】

    HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站 ...

  6. Web 仪表盘

    /*********************************************************************** * Web 仪表盘 * 说明: * 之前很久,都想知道 ...

  7. Frontend Development

    原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...

  8. [置顶] 推荐12款很棒的HTML5开发框架和开发工具

    HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站 ...

  9. 【收藏】Web前端开发第三方插件大全

    收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...

随机推荐

  1. [CSAPP笔记][第一章计算机系统漫游]

    计算机系统漫游 我们通过追踪hello程序的生命周期来开始对系统的学习—–从它被程序员创建,到系统上运行,输出简单的消息,然后终止.我们沿着这个程序的生命周期,简要介绍一些逐步出现的概念,专业术语和组 ...

  2. 装Oracle12C时遇到没有权限访问临时位置的解决方法

    今天在装oracle12c是遇到了一个很奇怪的问题,显示是没有权限访问临时位置,可是我明明是用管理员的账号登陆的啊,最后在包姐的帮助下解决了,知其然,而我却不知其所以然.但还是把方法写下,希望能帮到一 ...

  3. Adnroid Studio使用技巧

    官方第一条提示:所有的使用技巧都可以通过Help→Tips of the Day查看. 下面摘抄一些比较有用的技巧: 1.Esc把活动窗口从工具窗口指向编辑窗口.F12把编辑窗口指向上一次活动的工具窗 ...

  4. iOS 面试题 1

    1.    简述OC中内存管理机制.与retain配对使用的方法是dealloc还是release,为什么?需要与alloc配对使用的方法是dealloc还是release,为什么?readwrite ...

  5. POJ 2289 Jamie's Contact Groups (二分+最大流)

    题目大意: 有n个人,可以分成m个组,现在给出你每个人可以去的组的编号,求分成的m组中人数最多的组最少可以有多少人. 算法讨论: 首先喷一下这题的输入,太恶心了. 然后说算法:最多的最少,二分的字眼. ...

  6. php函数、类和对象以及类的封装、继承、类的静态方法、静态属性

    1.函数     php内置函数可以直接使用,如果没有安装php扩展即可     自定义函数 //函数function 函数名 function dump($var = null){ //支出默认参数 ...

  7. sublime快捷键收藏

    快速查找(ctrl + P)输入@+函数名可以快速找到函数.输入#+文本可以快速进行文件内文本匹配.3. 多行游标功能(ctrl + D,非常实用)如何将文件中的某个单词更改为另一个?方法一:利用查找 ...

  8. ruby更换为淘宝的源

    我们在使用gem更新的时候,经常会为速度抓狂,其实gem默认的源是https://rubygems.org,比较慢众所周至的原因了. 可以将源更换到国内的taobao源 查看当前有的源 gem sou ...

  9. php连接postgresql

    在ubuntu下用php连接postgresql需要下个模块php5-pgsql 连接数据库并显示一张表的内容: <?php #连接数据库 $conn = pg_connect("ho ...

  10. 用lsb_release -a 查看linux版本

    1.要通过yum 安装上这个命令的软件包 yum -y install redhat-lsb 2.lsb_release -a 查看linux版本信息