最近项目要做个手机端的仪表盘，但是画风太给力，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. cookie丢失、登陆自动退出问题解决

    cookie保存在客户端或者内存中,不易丢失.但是在某些情况下会被忽略.在项目过程中遇到过跨域丢失的情况.在VS里面运行的程序,产生的cookie默认是没有domain值的,但是给它设定domain值 ...

  2. asp.net 追加文本（追加写入记事本）

    代码: string path = Server.MapPath("/Log/Log.txt"); if (File.Exists(path)) { using (StreamWr ...

  3. 关于IIS7.5下的web.config 404 配置的一些问题

    本文介绍一个关于IIS环境下web.config配置的经验问题.在IIS7.5中添加配置404页面时遇到了一些问题,记录如下: 一开始在<customError>下的<error&g ...

  4. C#使用seleium实现一个自动登录器

    1.http://docs.seleniumhq.org/ 下载seleium包 2.新建一个C#项目,比如控制台,引用seleium包中的dll using System; using System ...

  5. hdu120118岁生日

    Problem Description Gardon的18岁生日就要到了,他当然很开心,可是他突然想到一个问题,是不是每个人从出生开始,到达18岁生日时所经过的天数都是一样的呢?似乎并不全都是这样,所 ...

  6. BZOJ 2882 工艺 （字符串最小循环同构）

    题目大意: 给一个长度小于等于30W的数列,求其最小循环同构. 算法讨论: 在自动机长倍长走S后即可.注意这里面是数字,要用map存储. 今天才知道要开四倍长. Codes: #include < ...

  7. poj1088 经典DP

    滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 88296   Accepted: 33100 Description ...

  8. WordPress设置固定链接和邮件提醒遇到的问题

    固定链接1.WordPress根目录下有一个.h...文件,记录文章链接类型对应的配置,要保证该文件的可写全权限:2.设置Apache2的rewrite模块启动,/etc/apache2/modle- ...

  9. select操作

    // 1.判断select选项中 是否存在Value="paraValue"的Item         function jsSelectIsExitItem(objSelect, ...

  10. 开源C/C++网络库比较

    在开源的C/C++网络库中, 常用的就那么几个, 在业界知名度最高的, 应该是ACE了, 不过是个重量级的大家伙, 轻量级的有libevent, libev, 还有 Boost的ASIO. ACE是一 ...