Google Gauge圖表未顯示

Question

我想為正在開發的遠程監控程序在網頁上創建並顯示Google軌距圖。 我正在使用eWON Flexy 201來執行此操作。 我只是無法讓儀表顯示在網頁上。

基本上，我要做的是在服務器上使用一種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%>

Answer 1

在您的情況下，我建議您進行以下重新排列，看看是否適合您。 google.setOnLoadCallback()設置了一個回調函數，以在加載Google Visualization API后執行。 但是您可以在此忽略它，因為您的結果取決於ajax調用的success 。

<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) { }) 。 Ajax成功的結果傳遞給drawChart()函數，該函數用作回調。 讓我知道結果是否無效。

有關回調函數的更多信息，請閱讀。

Answer 2

我發現了我的問題。 我不是特別確定@Rohit416給我的答案@Rohit416了什么問題，但是在網上進行更多搜索后，我遇到了一個解決方案並將其修改為我的需要。

這是最終為我工作的解決方案

<script type="text/javascript">

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Oil', 80],
        ]);

        var options = {
          width: 400, height: 140,
          redFrom: 275, redTo: 350,
          yellowFrom:200, yellowTo: 275,
          greenFrom: 100, greenTo: 150,
          minorTicks: 5,
          max: 350
        };

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

       function getData () {
        $.ajax({
            url: 'oil.shtm',
            success: function (response) {
                data.setValue(0, 1, response);
                chart.draw(data, options);
                setTimeout(getData, 1000);

            }
        });
    }
    getData();
}
google.load('visualization', '1', {packages: ['gauge'], callback: drawChart});

我的oil.shtm文件如下

這樣成功地每秒更新一次量規，並且我一次用多個量規測試了此方法，並且效果很好。