如何从JS动态设置仪表仪的数据度量值

Question

我知道如何在HTML5中设置仪表值的数据度值。链接在这里http://www.jqueryscript.net/chart-graph/customizable-animated-jquery-html5-gauge-meter-plugin.html

htmldiv：

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

初始化插件：

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

，但我想将此数据系列= '60'值设置为使用同一插件从JavaScript动态地将HTML设置为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();
  }

因此，首先您初始化量规（您可以将初始化添加到文档就绪事件中）。然后，每次要更改百分比时，您都会清空元素并模拟刷新。要更改HTML 5"数据"属性，请使用jquery.data（）函数。