Javascript:如何更新仪表图表的最大值?

时间:2016-06-15 14:47:02

标签: javascript html gauge jsgauge

我当前的代码只会动态更改总数。我想动态更改Max值,因为最大值将根据您应用的过滤器而改变。

代码如下

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

  })

}

1 个答案:

答案 0 :(得分:0)

最新版本的库实现了refresh(val, max, config),因此h.refresh(value,maxValue);会将max设置为maxValue(来源:https://github.com/toorshia/justgage

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>