2017-03-15 9 views
0

私はここからキャンバスゲージを使用していcanvas-gauges.com(ループが示されていない)は、以下のようにIは、ループ内で動的に複数のゲージを作成キャンバスゲージ動的オブジェクトの更新値

<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を使用して、ゲージの値を更新します。アヤックスでは、私は、各/すべての$ device_pk値を掲示し、返された結果は、私のコンソールで正しい「K」と」v'infoを示し、私はその後、

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

を行う{"gauge_8":"22.3","gauge_12":"0","gauge_15":"-5"}としてフォーマットJSON文字列でありますログ。 私がうまくいかないのは、 'k'というゲージをデータ値 'v'で更新する方法です。 これは、通常、作成されたゲージがもちろん 'ゲージ_23'という条件でgauge_23.value = 10.2;を使用して行われます。

テストするだけで、表示されているゲージの正しいゲージ名が識別され、gauge_23.value = 10.2;に一時的にハードコードされ、ボタンクリックから発生し、ゲージを更新して更新します。

私は問題は(彼らはオブジェクトですか?)私は、動的に作成されたゲージのオブジェクトを更新しようとしているように横たわっていた特定のか、私はそれらを作成しています方法ですが、私はちょうど約あきらめました。私は答えを推測しますので、答えを知っているために、その少し難しいすべてのコードがなければ

答えて

0

あなたのセットアップコード

<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(); 

を行っているウィンドウが正しいスコープでない場合、thisが答え

の一番下にあるものは何でもオブジェクトを使用

あなたは

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

を行うダウンロードしたデータから、ゲージを設定するとき、あなたは、コンソールログ出力「gauge_23が10である」と言うがパーであればsed jsonオブジェクトはkが文字列であることを意味する{guage_23 : "10"}です。プロパティvalueを文字列kに追加し、10に割り当てます。セットアップコードを使用すると、

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

にコードを変更することができますゲージがウィンドウのプロパティであることをglbalスコープANで実行されていたと仮定すると

私はあなたが値を設定した後、ゲージを更新する必要があると仮定しますが、私なりそれをあなたに任せてください。

+0

こんにちは@ Blindman67、あなたの '推測'のためにありがとう、それは完全に動作します。ゲージを更新する実際のコマンドは 'gauge_name.value = number'です。優れた! – gjt211

関連する問題