gauge.js的应用

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