用代碼創建谷歌圖表

我正在加載一些谷歌圖表，具體取決於從我的數據庫中選擇的數據。（圖表的數量將取決於選擇不同）用代碼創建谷歌圖表

我可以加載用下面的代碼單個圖表，但我掙扎經由通過列表

我的目的是循環加載多個圖表直到做出選擇並將數據傳遞給我的列表中的每個項目的代碼時，才繪製圖表。可能有超過20個圖表！

幫助非常感謝，我用C#但只是剛開php和html

<html> 
      <head> 
        <!--Load the AJAX API--> 
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
        <script type="text/javascript"> 
        
        google.charts.load('current', {'packages':['corechart']});   
        google.charts.setOnLoadCallback(drawChart); 
          
        function drawChart() { 
          var jsonData = $.ajax({ 
              url: "getJSONdata.php", 
              dataType: "json", 
              async: false 
              }).responseText; 

          var data = new google.visualization.DataTable(jsonData); 

      var options = { 
        title: 'BMU', 
        width: 500, 
        height: 300, 
        series: { 
         0: { lineWidth: 1, pointSize: 1.1 }, 
         1: { lineWidth: 1, pointSize: 1.1}, 
         2: { lineWidth: 1, pointSize: 1.1}}, 
        hAxis: { 
         textStyle:{fontSize: 10}, 
         format: 'HH:mm', 
         }, 
        vAxis: { 
         textStyle:{fontSize: 10}, 
        }, 
        chartArea: {backgroundColor: '#fffff0'}, 


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

        </script> 
      </head> 

      <body> 
        <div id="chart_div" style="float: left; width: 500px; height: 300px;"></div> 
    </body> 
    </html>

來源

2017-09-07 NigeH

看上去像一箇舊例子，'異步： false'已被棄用 - 您需要循環的列表在哪裏？ – WhiteHat

在這個階段，我正在尋找使用php查詢數據庫以獲取ID列表並將它們傳遞給getJSONdata.php，其中數據庫調用用於圖表數據。 getJSONdata.php目前硬編碼爲一個ID，並且在生成一個圖表時工作正常。我正在考慮從身體部位循環。我嘗試用按鈕生成同一圖表的多個圖表，但無處可去！ – NigeH

你可以設置類似於以下...

// load google charts 
google.charts.load('current', { 
    callback: getList, 
    packages: ['corechart'] 
}); 

// load id list 
function getList() { 
    $.ajax({ 
    url: 'getList.php', 
    dataType: 'json' 
    }).done(function (listData) { 

    // draw chart for each id 
    listData.forEach(function (itemId) { 
     drawChart(itemId); 
    }); 

    }).fail(function (jq, text, errMsg) { 
    console.log(text + ': ' + errMsg); 
    }); 
} 

// draw id chart 
function drawChart(itemId) { 
    $.ajax({ 
    url: 'getJSONdata.php', 
    dataType: 'json', 
    data: { 
     id: itemId 
    } 
    }).done(function (jsonData) { 

    var data = new google.visualization.DataTable(jsonData); 

    var options = { 
     title: 'BMU', 
     width: 500, 
     height: 300, 
     series: { 
     0: { lineWidth: 1, pointSize: 1.1 }, 
     1: { lineWidth: 1, pointSize: 1.1}, 
     2: { lineWidth: 1, pointSize: 1.1}}, 
     hAxis: { 
     textStyle:{fontSize: 10}, 
     format: 'HH:mm', 
     }, 
     vAxis: { 
     textStyle:{fontSize: 10}, 
     }, 
     chartArea: {backgroundColor: '#fffff0'}, 
    }; 

    // create new div for chart 
    var container = document.getElementById('charts').appendChild(document.createElement('div')); 
    var chart = new google.visualization.ScatterChart(container); 
    chart.draw(data, options); 

    }).fail(function (jq, text, errMsg) { 
    console.log(text + ': ' + errMsg); 
    }); 
}

來源

2017-09-07 17:54:28 WhiteHat

現在工作正常。只需要在以下呼叫 – NigeH

中爲parms添加值，現在工作正常。只需要在按鈕點擊 – NigeH

之後將煤炭價值添加到以下通話「url ='getList.php？fuel = coal'後運行代碼，該url應該可以工作，但它也是'data'鍵的用途，而不是添加到網址，你可以設置數據 - >'數據：{燃料：'煤炭'}' – WhiteHat

用代碼創建谷歌圖表

回答

相關問題