javascript - 如何从 JS 动态设置 GaugeMeter 的数据百分比值？

Question

我知道如何在 html5 中为 GaugeMeter 设置数据百分比值。链接在这里 http://www.jqueryscript.net/chart-graph/Customizable-Animated-jQuery-HTML5-Gauge-Meter-Plugin.html

html 分区:

<div class="GaugeMeter"id="test1" data-percent="60" data-label="Percent">
  </div>

初始化插件:

  $(".GaugeMeter").gaugeMeter();

但我想使用相同的插件从 javascript 动态地将此 data-percent='60' 值设置为 html。谁能帮帮我？

Answer 1

我下载了这个插件，但是文档不多，所以我找不到调整百分比然后刷新元素的方法。不管怎样，我们可以用 jQuery 或至少类似的东西来做。

做了一个这样的html:

<div class="GaugeMeter"id="test1" data-percent="60" data-label="Percent">
  </div>
  <button onclick="initialize()">Initialize gauge</button>
  <button onclick="changePercent()">Change percent to 35%</button>
</body>

和这样的 JS:

   function initialize()
  {
      $("#test1").gaugeMeter();
  }

  function changePercent()
  {
        $("#test1").data("percent",35);
        $("#test1").empty();
        $("#test1").gaugeMeter();
  }

因此，首先您要初始化仪表(您可以将 Initialize 添加到文档就绪事件中)。然后每次你想改变百分比时，你清空元素并模拟刷新。要更改 html 5“数据”属性，请使用 jQuery.data() 函数。