Gauge chart in Javascript or jQuery Flot [closed]

问题:

I'm trying to get a graph that looks like a gauge.

I am already using jQuery Flot for my other charts, so is it possible using Flot or plain Javascript? Can someone help me getting started coding this?

回答1:

Here it is only using base flot and a background image:

// 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();
});

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

<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>

Fiddle here.

回答2:

This is similar to Visualize energy efficiency level, except that there is no way to do it using Flot's base options.

As suggested in my answer to that question, you will need to create a plugin that overrides drawBackground, drawSeries, and possibly draw.

回答3:

You can try jqChart's radial gauge. It has the functionality you need: http://www.jqchart.com/jquery/gauges/RadialGauge/Scale

Disclaimer: I work for jqChart.