Gauge-Diagramm in Javascript oder jQuery Flot

Question

Ich versuche, ein Diagramm zu erhalten, das wie ein Messgerät aussieht.

Ich verwende bereits jQuery Flot für meine anderen Diagramme, also ist es möglich, Flot oder Javascript zu verwenden? Kann mir jemand helfen, damit anzufangen, das zu programmieren?

Answer 1

Dies ist vergleichbar mit Visualize energy efficiency level, außer dass es keine Möglichkeit gibt, dies mit den Basisoptionen von Flot zu tun.

Wie in meiner Antwort auf diese Frage vorgeschlagen, müssen Sie ein Plugin erstellen, das drawBackground, drawSeries überschreibt und möglicherweise zeichnet.

Answer 2

Hier wird nur mit Basis flot und ein Hintergrundbild:

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

Answer 3

Sie können jqChart der radialen Spur versuchen. Es hat die Funktionalität, die Sie brauchen: http://www.jqchart.com/jquery/gauges/RadialGauge/Scale

Haftungsausschluss: Ich arbeite für jqChart.