画布仪表动态对象更新值

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中，我发布了每个/所有的json值，返回的结果是一个格式为{"gauge_8":"22.3","gauge_12":"0","gauge_15":"-5"}的$device_pk字符串，然后我就这样做了

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);
     });
 },

它在控制台日志中显示了正确的'k‘和'v’信息，但我不能解决的是如何用数据值‘v’更新名为'k‘的仪表。这通常是使用gauge_23.value = 10.2;完成的，当然，条件是创建的仪表名为“gauge_23”。

只是为了测试，我确定了一个正在显示的仪表盘的正确仪表盘名称，并在gauge_23.value = 10.2;中临时硬编码，以便在单击按钮时发生，它可以工作并更新仪表盘。

我确信问题出在我试图更新动态创建的gauge对象的方式上(它们是对象吗？)或者我创建它们的方式，但我几乎要放弃了。

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>

您正在为对象this的属性gauge_23分配一个对仪表对象的引用。按原样阅读这将引用全局作用域，即窗口

因此你正在做这件事

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

如果window不是正确的作用域，则使用答案底部的任何对象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 is 10“，这意味着k是一个字符串。您正在将属性value添加到字符串k中，并为其分配10。

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

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

我假设您需要在设置值后更新仪表，但这由您决定。