最近项目要做个手机端的仪表盘，但是画风太给力，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. 大到可以小说的Y组合子（零）

    问:啊!我想要一个匿名的递归… 答:Y(音同Why)… … … 问:作为一位命令式语言的使用者,为什么会突然折腾起Y组合子呢? 答:的确,这事儿要从很久以前的几次搁浅开始说起…上学的时候,从来没有接触 ...

  2. 【RequireJS--API学习笔记】

    原文:http://blog.csdn.net/pigpigpig4587/article/details/23427573 目录 RequireJS 加载javascript文件 定义模块 简单的值 ...

  3. php 二维码生成类

    <?php /** * BarcodeQR - Code QR Barcode Image Generator (PNG) * @package BarcodeQR * @category Ba ...

  4. 整合 新浪 腾讯 人人 qq空间 分享地址

    function snsShare(snsId, title, content, image, url) { var snsUrl; // 新浪 腾讯 要申请appkey switch (snsId) ...

  5. 浅析Struts1和Struts2的Action线程安全问题

    tomcat容器对servlet的实现采用的是单例模式,对于一个servlet类,永远只有一个servlet对象存在. 下面我们来解释为什么Struts1是线程不安全的. 1.Struts1 Stru ...

  6. Niagara AX之BajaScript资料哪里找

    四个步骤:(开篇:多谢陈工!) 1.Services下添加box->boxService: 2.在Apps下添加BajaScriptTutorialsApp: 3.登录用户的Web Profil ...

  7. 面试题：Java静态/非静态方法重写

    1.非静态方法重写 public class Test { public static void main(String[] args) throws Exception { Tree pine = ...

  8. javascript:自定义事件初探

    javascript:自定义事件初探   http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html

  9. Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容

    1,引言 在Python网络爬虫内容提取器一文我们详细讲解了核心部件:可插拔的内容提取器类gsExtractor.本文记录了确定gsExtractor的技术路线过程中所做的编程实验.这是第二部分,第一 ...

  10. jQuery中$符号冲突问题 （转载）

    Jquery的$命名冲突: 在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多 ...