如何在同一個Google電子表格的網頁上添加多個谷歌圖表

我有一個代碼片段可以正常工作，其中一個谷歌圖表可以從谷歌電子表格中抓取數據。但是，無論何時我嘗試在同一電子表格中添加來自不同範圍的其他圖表，它都會覆蓋原始div。如何在同一個Google電子表格的網頁上添加多個谷歌圖表

有人能指出我正確的方向嗎？非常感謝。

<html> 
 

 
<head> 
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
 
    <script type="text/javascript"> 
 
    google.charts.load("visualization", "1.1", { 
 
     packages: ["bar"] 
 
    }); 
 
    //google.charts.load('upcoming', {'packages': ['geochart']}); 
 
    google.charts.setOnLoadCallback(drawtotalChart); 
 
    google.charts.setOnLoadCallback(drawkpiChart); 
 
    //google.charts.setOnLoadCallback(drawKpiChart); 
 
    //google.charts.setOnLoadCallback(drawMarkersMap); 
 
    //google.charts.setOnLoadCallback(drawOrdersChart); 
 
    </script> 
 
    <script type="text/javascript"> 
 
    var totalChart; 
 

 
    function drawtotalChart() { 
 

 
     var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BvV9UHgppTBvZKtbvndZTM2qrvgE4Qeozfbzby5W5AQ/gviz/tq?range=G23:I32'); 
 

 

 
     // Send the query with a callback function. 
 
     query.send(handleQueryResponse); 
 
    } 
 

 
    function handleQueryResponse(response) { 
 
     if (response.isError()) { 
 
     alert('Error in query: ' + response.getMessage() + ' ' + 
 
      response.getDetailedMessage()); 
 
     return; 
 
     } 
 

 
     var data = response.getDataTable(); 
 
     totalChart = new google.charts.Bar(document.getElementById('columnchart_material')); 
 
     totalChart.draw(data, null); 
 
    } 
 
    google.setOnLoadCallback(drawtotalChart); 
 
    </script> 
 
    <script type="text/javascript"> 
 
    var kpiChart; 
 

 
    function drawkpiChart() { 
 

 
     var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BvV9UHgppTBvZKtbvndZTM2qrvgE4Qeozfbzby5W5AQ/gviz/tq?range=G36:K44'); 
 

 

 
     // Send the query with a callback function. 
 
     query.send(handleQueryResponse); 
 
    } 
 

 
    function handleQueryResponse(response) { 
 
     if (response.isError()) { 
 
     alert('Error in query: ' + response.getMessage() + ' ' + 
 
      response.getDetailedMessage()); 
 
     return; 
 
     } 
 

 
     var kpi = response.getDataTable(); 
 
     kpiChart = new google.charts.Bar(document.getElementById('chart_div')); 
 
     kpiChart.draw(kpi, null); 
 
    } 
 
    google.setOnLoadCallback(drawkpiChart); 
 
    </script> 
 

 
</head> 
 

 
<body> 
 
    <!--Table and divs that hold the charts--> 
 
    <table class="columns"> 
 
    <tr> 
 
     <td> 
 
     <div id="columnchart_material" style="width: 900px; height: 500px;"></div> 
 
     </td> 
 
     <td> 
 
     <div id="chart_div" style="width: 900px; height: 500px;"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div id="Geochart_div" style="width: 00px; height: 500px;"></div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
</body> 
 

 
</html>

來源

2017-02-28 caa304

你重用handleQueryResponse兩個圖表，並加載首先一個被調用來處理兩個圖表的查詢。只是因爲他們在不同<script>塊不會將它們拆分出相同的範圍，所以您遇到了衝突。如果你重新組織你的JavaScript，它應該有效：

// Load the bar chart package 
google.charts.load("visualization", "1.1", { 
    packages: ["bar"] 
    }); 

// Set the chart callbacks 
google.charts.setOnLoadCallback(drawtotalChart); 
google.charts.setOnLoadCallback(drawkpiChart); 

var totalChart; 

function drawtotalChart() { 

    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BvV9UHgppTBvZKtbvndZTM2qrvgE4Qeozfbzby5W5AQ/gviz/tq?range=G23:I32'); 


    // Send the query with a callback function. 
    query.send(handleTotalQueryResponse); 
} 

// Callback specific to the total chart 
function handleTotalQueryResponse(response) { 
    if (response.isError()) { 
    alert('Error in query: ' + response.getMessage() + ' ' + 
     response.getDetailedMessage()); 
    return; 
    } 

    var data = response.getDataTable(); 
    totalChart = new google.charts.Bar(document.getElementById('columnchart_material')); 
    totalChart.draw(data, null); 
} 

var kpiChart; 

function drawkpiChart() { 

    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BvV9UHgppTBvZKtbvndZTM2qrvgE4Qeozfbzby5W5AQ/gviz/tq?range=G36:K44'); 


    // Send the query with a callback function. 
    query.send(handleKpiQueryResponse); 
} 

// Callback specific to the KPI chart 
function handleKpiQueryResponse(response) { 
    if (response.isError()) { 
    alert('Error in query: ' + response.getMessage() + ' ' + 
     response.getDetailedMessage()); 
    return; 
    } 

    var kpi = response.getDataTable(); 
    kpiChart = new google.charts.Bar(document.getElementById('chart_div')); 
    kpiChart.draw(kpi, null); 
}

來源

2017-02-28 20:14:10

謝謝！我不知道你必須給他們打電話。 – caa304

這不僅僅是因爲只有一個重複方法（總計圖表中的一個）被用作這兩個查詢的回調函數，所以它們只能被唯一調用。唯一命名它們是解決問題的一種方法 –

另外，如果這有助於您解決問題，請務必將其標記爲答案，以便面臨類似問題的其他人可以更輕鬆地找到此問題/答案 –

如何在同一個Google電子表格的網頁上添加多個谷歌圖表

回答

相關問題