最近项目要做个手机端的仪表盘，但是画风太给力，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. ArcEngine 添加字段

    private void AddField(IFeatureClass pFeatureClass, string name, string aliasName, esriFieldType Fiel ...

  2. ajax局部刷新分页

    //请求数据加载绑定页面 function DindAjax(pageIndex) {//获取参数 var colors = $("#colorsVal").val(); $.aj ...

  3. Android SQLite的使用2（非原创）

    1.数据库的增.删.改.查:execSQL方法 public void insertAction() {//添加信息 db.execSQL("insert into Emp(name,sal ...

  4. zoj3231 Apple Transportation(最大流)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Apple Transportation Time Limit: 1 Second ...

  5. Qss样式（二）

    Qss 其实就是一段文本,当然得按一定格式来写.下面请看Qss的语法格式: 选择器 { 属性1:值:属性2:值:--属性n:值:} 对应上篇文章的Qss样式: 现在我们可以来解释这段话的意思了: 对应 ...

  6. http://python3-cookbook.readthedocs.io/zh_CN/latest/c14/p01_testing_output_sent_to_stdout.html

    http://python3-cookbook.readthedocs.io/zh_CN/latest/c14/p01_testing_output_sent_to_stdout.html draw. ...

  7. ANDROID 开机启动VNC SERVER

    ANDROID 开机启动VNC SERVER 背景信息: 最近在做一个项目,在项目需求中有这么一项“要把VNC SERVER 添加到android里并让其开机自启动”.其实做这个项目也挺缚手缚脚的,因 ...

  8. SQL触发器学习

      简介 触发器是一种特殊类型的存储过程.触发器分为: DML( 数据操纵语言 Data Manipulation Language)触发器:数据库中表或视图的数据更改时触发,包括insert,upd ...

  9. Effective Java2读书笔记-创建和销毁对象（四）

    第7条:避免使用终结方法 这一条讲的简直是不知所云.先简单记下来其中说出的几条: ①显式终止方法的典型例子有InputStream.OutputStream和java.sql.Connection上的 ...

  10. Linux下的摄影后期处理软件

    由于喜欢摄影,在LInux上折腾,想找一款能代替lightroom的软件.发现darktable这款软件专业.于是就安装了. 以下是在Linux上安装darktable的instruction,需要添 ...