Question

我在这里使用Canvas-gauge canvas-gauges.com

我在循环中动态创建多个仪表，如下所示（循环未显示）;

<canvas id="canvas_<?php echo $device_pk; ?>"></canvas>

<script type="text/javascript">
    var gg = "gauge_" + "<?php echo $device_pk; ?>";
    this[gg] = new RadialGauge({
        renderTo: 'canvas_<?php echo $device_pk; ?>',
        height: 200,
        .....other properties here.....
    }).draw();
</script>

正确显示仪表。

然后我想使用javascript / ajax更新仪表值。在ajax中，我发布每个/所有$ device_pk值，返回的结果是格式为{"gauge_8":"22.3","gauge_12":"0","gauge_15":"-5"}的json字符串，然后我做

success : function(result) {
    var data = $.parseJSON(result);
    $.each(data, function (k,v) {
         console.log(k + ' is ' + v);
         //k.value = v;
         //k.value = Number(v);
         k['value']= Number(v);
     });
 },

它向我展示了正确的＆＃39; k＆＃39;和控制台日志中的＆＃39; v＆＃39;信息。我能解决的问题是如何更新名为＆＃39; k＆＃39;数据值＆＃39; v＆＃39;。这通常是使用gauge_23.value = 10.2;完成的，条件是创建的量表被调用＆＃39; gauge_23＆＃39;当然。

为了测试，我确定了正在显示的仪表的正确仪表名称，并在gauge_23.value = 10.2;中暂时硬编码以通过按钮点击发生，它可以正常工作并更新仪表。

我确定问题在于我试图更新动态创建的仪表对象（它们是对象吗？）或我创建它们的方式，但我只是放弃了。

Answer 1

如果没有你的所有代码，有点难以知道答案，所以我会猜到答案。

您的设置代码

<script type="text/javascript">
    var gg = "gauge_" + "<?php echo $device_pk; ?>";
    this[gg] = new RadialGauge({
        renderTo: 'canvas_<?php echo $device_pk; ?>',
        height: 200,
        .....other properties here.....
    }).draw();
</script>

您正在为对象gauge_23的属性this分配对量规对象的引用。按原样读，这将引用全局范围，即窗口

因此你正在这样做

    window["gauge_" + "<?php echo $device_pk; ?>"] = new RadialGauge({
        renderTo: 'canvas_<?php echo $device_pk; ?>',
        height: 200,
        .....other properties here.....
    }).draw();

如果窗口不是正确的范围，则使用答案底部的任何对象this

然后，当您从下载的数据中设置仪表时，

success : function(result) {
    var data = $.parseJSON(result);
    $.each(data, function (k,v) {
         console.log(k + ' is ' + v);
         k['value']= Number(v);
     });
 },

如果解析的json对象为{guage_23 : "10"}，则表示控制台日志输出“gauge_23为10”，这意味着k是一个字符串。您要将属性value添加到字符串k，并为其分配10。

假设您的设置代码在glbal范围内运行，并且仪表是窗口的属性，您可以将代码更改为

    $.each(data, function (k,v) {
         window[k].value = Number(v); // window or whatever the this was
     });

我认为你需要在设定值后更新仪表，但我把它留给你。

帆布规动态对象更新值

1 个答案: