2016-06-15 14 views
1

Mein aktueller Code ändert nur dynamisch die Summe. Ich möchte auch den Max-Wert dynamisch ändern, da sich der Maximalwert abhängig von dem angewendeten Filter ändert.Javascript: Wie man den maximalen Wert eines Maßdiagramms aktualisiert?

Der Code ist der folgende

resource1=[ 
"//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js", 
"//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js" 
] 

//add scripts to head 
$.getScript(resource1[0],function(){ 
$.getScript(resource1[1],init1) 
}) 

init1 = function(){ 
    var h = new JustGage({ 
    id: "gaugeHoras", 
    value: parseInt($("TOTAL").text()), 
    min: 0, 
    max: 30, 
    title: "Horas" 
    }); 


    $("LISTBOX").click(function(){ 
    h.refresh(parseInt($("TOTAL").text())) 

    }) 

} 
+0

a Haben Schau dir die Echtzeit-Guages ​​bei [fusioncharts] (ht tp: //www.fusioncharts.com/charts/gauges/) Beispiele. Sind diese Realzeitangaben, die Sie hier beziehen? Ich denke, es könnte dir helfen. FusionCharts ist absolut frei für nicht-kommerzielle Zwecke. Probieren Sie es aus und lassen Sie mich wissen, ob es etwas gibt, Bruder! – Ayan

Antwort

0

Die neueste Version der Bibliothek implementiert refresh(val, max, config) so h.refresh(value,maxValue);max-maxValue (Quelle: https://github.com/toorshia/justgage) gesetzt wird

resource1 = [ 
 
    "//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js", 
 
"https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.min.js" 
 
]; 
 

 
//add scripts to head 
 
$.getScript(resource1[0], function() { 
 
    $.getScript(resource1[1], init1) 
 
}); 
 

 
init1 = function() { 
 
    var h = new JustGage({ 
 
    id: "gaugeHoras", 
 
    value: parseInt($("TOTAL").text()), 
 
    min: 0, 
 
    max: 30, 
 
    title: "Horas" 
 
    }); 
 

 

 
    $("#LISTBOX").click(function() { 
 
    var value = Math.floor(Math.random() * 31); 
 
    var maxValue = Math.floor(Math.random() * 40 +30); 
 
    h.refresh(value,maxValue); 
 
    }) 
 

 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script> 
 

 
<div class="container"> 
 
    <div id="gaugeHoras" class="gauge"></div> 
 
    <button id="LISTBOX">click</button> 
 
</div>