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

Question

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

代码如下

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

  })

}

Answer 1

该库的最新版本实现了 refresh(val, max, config)，因此 h.refresh(value,maxValue); 将设置 max code> 到 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>