0

私が開発しているリモート監視プログラムの Web ページに Google ゲージ チャートを作成して表示したいと考えています。これには eWON Flexy 201 を使用しています。ゲージを Web ページに表示するのに問題があります。

基本的に私がしなければならないことは、サーバー上で VBScript の形式を使用して油温を取得し、その値をゲージに返して温度を表示することです。その値をさまざまな方法でページに正しく返すことができましたが、ゲージを毎秒表示して更新するのに苦労しています。

現在のスクリプトでは、コンソールにエラーは表示されませんが、何もレンダリングされません。ゲージが表示されるはずの空白スペースだけが得られます。

<script type='text/javascript'>
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
function drawChart() {

var x = '<%#TagSSI,Target_Pressure_Setting%>';


var data = new google.visualization.DataTable([
  ['Label', 'Value'],
  ['Oil Temp', x],
]);
var options = {
  width: 450, height: 240,
  greenFrom: 100, greenTo: 150,
  redFrom: 275, redTo: 325,
  yellowFrom:225, yellowTo: 275,
  minorTicks: 5,
  max: 350
};

var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

function refreshData () {
    var json = $.ajax({
        url: 'gauge.shtm', // make this url point to the data file
        dataType: 'number',
        async: true 
    }).responseText;
    //alert(json)

    data = new google.visualization.DataTable(json);

    chart.draw(data, options);
}

refreshData();
setInterval(refreshData, 1000);
}

</script>

そしてここにgauge.shtmファイルがあります

<%#TagSSI,Oil_Temp%>
4

2 に答える 2

0

あなたのシナリオでは、次の再配置を行い、それがうまくいくかどうかを確認することをお勧めします。Google Visualization API がロードされたgoogle.setOnLoadCallback()ときに実行するコールバック関数を設定します。successただし、結果は呼び出しの に依存するため、ここでは省略できますajax。

<script type='text/javascript'>
    google.load('visualization', '1', {packages:['gauge']});
</script>

<script type='text/javascript'>

    function drawChart(result) {

        var x = '<%#TagSSI,Target_Pressure_Setting%>';

        // this may not required here because it anyway get replaced down the line..
        var data = new google.visualization.DataTable([
          ['Label', 'Value'],
          ['Oil Temp', x],
        ]);

        var options = {
          width: 450, height: 240,
          greenFrom: 100, greenTo: 150,
          redFrom: 275, redTo: 325,
          yellowFrom:225, yellowTo: 275,
          minorTicks: 5,
          max: 350
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        data = new google.visualization.DataTable(result);
        chart.draw(data, options);
    }

    function refreshData(callBack) {
        $.ajax({
            url: 'gauge.shtm',
            dataType: 'number',
            async: true 
        }).done(function(result) {
            callBack(result);           
        });
    }

    refreshData(drawChart);

</script>

少し変更に気付いた場合は、私が呼び出しrefreshData()ておりdrawChart()、成功時にコールバック関数として実行されますdone(function(result) { })。drawChart()コールバックとして使用される関数に渡された ajax 成功の結果。うまくいかなかった場合は結果を教えてください。

コールバック関数についてさらに読む。

于 2015-11-10T17:20:09.627 に答える