canvas 测量动态对象更新值

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 中，我 post each/all $device_pk 值和返回的结果是 json 格式为 {"gauge_8":"22.3","gauge_12":"0","gauge_15":"-5"} 的字符串，然后我执行

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; 中以通过单击按钮发生，它可以工作并更新仪表。

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

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

因此你正在这样做

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

你说控制台日志输出 "gauge_23 is 10" 如果解析的 json 对象是 {guage_23 : "10"} 这意味着 k 是一个字符串。您正在将属性 value 添加到字符串 k 广告中，并为其分配 10。

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

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

我假设您需要在设置值后更新仪表，但我将其留给您。

canvas 测量动态对象更新值

canvas gauge dynamic object update value

javascript

php

ajax

canvas

gauge