Question

我正在尝试动态更新仪表。在以下网站中，我找到了创建标尺http://bl.ocks.org/NPashaP/59c2c7483fb61070486835d15c807941的代码。我使用AJAX来更新仪表但针没有移动。我使用龙卷风网框来为屏幕上的仪表提供服务。在AJAX代码中，我已经硬编码将针设置为零。但针保持在50.如何动态更新值。我是AJAX的新手，很抱歉，如果我的代码结构不好。

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .label{
    font-size:22.5px;
    fill:#ffffff;
    text-anchor:middle;
    alignment-baseline:middle;
}
    .face{
    stroke:#c8c8c8;
    stroke-width:2;
}
    .minorTicks{
    stroke-width:2;
    stroke:white;
}
    .majorTicks{
    stroke:white;
    stroke-width:3;
}

</style>
<body>
<svg width="900" height="700"></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://vizjs.org/viz.v1.0.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="static/assets/js/gauge.js"></script>
</body>
</html>

AJAX

$(document).ready(function() {
  function updategauge() {
    var myurl = "http://localhost:5500/gauge";
    $.ajax({
      type: "GET",
      url: myurl,
      //data: {"macID": $("#macid input").val()},
      crossDomain: true,
      dataType: "json",

      success: function(data) {
        console.log(data.ip);
        console.log(JSON.stringify(data));
        gg.setNeedle(0); //sets the needle to zero
      }
    });
  }
  var svg = d3.select("svg");
  var g = svg.append("g").attr("transform", "translate(450,350)");
  var domain = [0, 100];

  var gg = viz
    .gg()
    .domain(domain)
    .outerRadius(300)
    .innerRadius(30)
    .value(0.5 * (domain[1] + domain[0]))
    .duration(1000);

  gg.defs(svg);
  g.call(gg);

  d3.select(self.frameElement).style("height", "700px");

  setInterval(updategauge(), 2000);
});

使用AJAX更新仪表

0 个答案: