Javascript或jQuery Flot中的Gauge图表

Question

我正在尝试获得一个看起来像规格的图表。

我已经在我的其他图表中使用jQuery Flot，所以可以使用Flot或普通的Javascript吗？有人可以帮我开始编码吗？

Answer 1

此处仅使用基础flot和背景图片：

＆＃13;

＆＃13;

// consts
var minCord = {x: -60, y: -57};
var maxCord = {x: 60, y: -60};
var radius = 90;

$(function() { 
    
    // some calculations
    var startAngle = (6.2831 + Math.atan2(minCord.y, minCord.x));
    var endAngle = Math.atan2(maxCord.y, maxCord.x);
    var degreesSweep = (-endAngle) + startAngle;
        
    var positionOnArc = function(magnitude){
        var numDegrees = degreesSweep * (magnitude/100.0);
        var angle = (startAngle - numDegrees);
        var posX = radius * Math.cos(angle);
        var posY = radius * Math.sin(angle);
        return [posX, posY];
    }  
       
    var options = {
      xaxis: {
          min: -100,
          max: 100,
          show: false
      },
      yaxis: {
          min: -100,
          max: 100,
          show: false
      },
      grid: {
          show: false
      }
    };

    updatePlot = function(){        
        var data = [[0,0],positionOnArc(Math.random() * 100)];
        $('#placeholder').plot([data], options);
        setTimeout(updatePlot, 1000);
    }
    
    updatePlot();
});

＆＃13;

#placeholder
{
    background-image:url('http://www.clker.com/cliparts/6/Z/q/9/9/D/gauge-md.png');
    width: 300px;
    height: 300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.min.js"></script>
<div id="placeholder"></div>

＆＃13;

＆＃13;

＆＃13;

小提琴here。

Answer 2

这类似于Visualize energy efficiency level，除了使用Flot的基本选项无法做到这一点。

正如我对该问题的回答所建议的那样，你需要创建一个覆盖drawBackground，drawSeries和可能绘制的插件。

Answer 3

你可以试试jqChart的径向规。它具有您需要的功能： http://www.jqchart.com/jquery/gauges/RadialGauge/Scale

免责声明：我为jqChart工作。