單頁上的更多谷歌圖表

Question

我需要在單個頁面上顯示多於1個圖表 - 這個圖表應該是單獨的，而不是一個塊。我在這裏找到了一些建議，但我不知道我的代碼有什麼問題。一切正常，直到我改變了行「google.charts.load（'43'，{packages：['corechart']}）;」我試圖改變函數名稱，但仍然無法正常工作。我很抱歉我的英語，我是代碼業餘愛好者。

圖1

<script type="text/javascript" 
 
     src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script type="text/javascript"> 
 
    google.charts.load('43', {packages: ['corechart']}); 
 
    google.charts.setOnLoadCallback(chart2); 
 
function chart2() { 
 
var wrapper = new google.visualization.ChartWrapper(
 
{"containerId":"2C2D","dataTable":{"cols":[{"id":"","label":"","pattern":"","type":"string","p":{}},{"id":"","label":"CZK","pattern":"","type":"number","p":{}},{"id":"","label":"zbývá CZK","pattern":"","type":"number"}],"rows":[{"c":[{"v":"březen","f":null},{"v":1844,"f":null},{"v":143739,"f":null}]}],"p":null},"options":{"isStacked":true,"animation":{"duration":2500,"startup":true},"bar":{"groupWidth": "25%"},"booleanRole":"certainty","hAxis":{"useFormatFromData":true,"viewWindow":{"max":150000,"min":null},"minValue":null,"maxValue":160000,"logScale":false,"gridlines":{"count":"4"}},"vAxes":[{"useFormatFromData":true,"minValue":null,"maxValue":null,"viewWindow":null,"viewWindowMode":null},{"useFormatFromData":true}],"legend":"bottom","series":{"1":{"color":"#b7b7b7"}},"fontName":"Georgia","title":"Náklady CZK"},"state":{},"view":{},"isDefaultVisualization":true,"chartType":"BarChart"} 
 
); 
 
wrapper.draw(); 
 
}; 
 
</script> 
 
<div style='border: 0px darkgray solid;width:500px;'> 
 
<div id='2C2D' style='width:500px; height:200px;'></div> 
 
</div>

圖2

<script type="text/javascript" 
 
     src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script type="text/javascript"> 
 
    google.charts.load('43', {packages: ['corechart']}); 
 
    google.charts.setOnLoadCallback(drawChart); 
 
function drawChart() { 
 
var wrapper = new google.visualization.ChartWrapper(
 
{"containerId":"visualizationDCA3","dataTable":{"cols":[{"id":"","label":"","pattern":"","type":"string","p":{}},{"id":"","label":"CZK","pattern":"","type":"number","p":{}},{"id":"","label":"zbývá CZK","pattern":"","type":"number"}],"rows":[{"c":[{"v":"březen","f":null},{"v":62036,"f":null},{"v":2213460,"f":null}]}],"p":null},"options":{"isStacked":true,"animation":{"duration":2500,"startup":true},"bar":{"groupWidth": "25%"},"booleanRole":"certainty","hAxis":{"useFormatFromData":true,"viewWindow":{"max":2500000,"min":null},"minValue":null,"maxValue":2500000,"logScale":false},"vAxes":[{"useFormatFromData":true,"minValue":null,"maxValue":null,"viewWindow":null,"viewWindowMode":null},{"useFormatFromData":true}],"legend":"bottom","fontName":"Georgia","title":"Celkový CZK","series":{"1":{"color":"#b7b7b7"}}},"state":{},"view":{},"isDefaultVisualization":true,"chartType":"BarChart"} 
 
); 
 
wrapper.draw(); 
 
}; 
 
</script> 
 
<div style='border: 0px darkgray solid;width:500px;'> 
 
<div id='visualizationDCA3' style='width:500px; height:200px;'></div> 
 
</div>

`

Answer 1

您可以添加一個init功能，然後調用來自有其他的圖表......

google.charts.load('43', {packages: ['corechart']}); 
 
google.charts.setOnLoadCallback(init); 
 

 
function init() { 
 
    drawChart(); 
 
    chart2(); 
 
} 
 

 
function drawChart() { 
 
    var wrapper = new google.visualization.ChartWrapper(
 
    {"containerId":"visualizationDCA3","dataTable":{"cols":[{"id":"","label":"","pattern":"","type":"string","p":{}},{"id":"","label":"CZK","pattern":"","type":"number","p":{}},{"id":"","label":"zbývá CZK","pattern":"","type":"number"}],"rows":[{"c":[{"v":"brezen","f":null},{"v":62036,"f":null},{"v":2213460,"f":null}]}],"p":null},"options":{"isStacked":true,"animation":{"duration":2500,"startup":true},"bar":{"groupWidth": "25%"},"booleanRole":"certainty","hAxis":{"useFormatFromData":true,"viewWindow":{"max":2500000,"min":null},"minValue":null,"maxValue":2500000,"logScale":false},"vAxes":[{"useFormatFromData":true,"minValue":null,"maxValue":null,"viewWindow":null,"viewWindowMode":null},{"useFormatFromData":true}],"legend":"bottom","fontName":"Georgia","title":"Celkový CZK","series":{"1":{"color":"#b7b7b7"}}},"state":{},"view":{},"isDefaultVisualization":true,"chartType":"BarChart"} 
 
); 
 
    wrapper.draw(); 
 
}; 
 

 
function chart2() { 
 
    var wrapper = new google.visualization.ChartWrapper(
 
    {"containerId":"2C2D","dataTable":{"cols":[{"id":"","label":"","pattern":"","type":"string","p":{}},{"id":"","label":"CZK","pattern":"","type":"number","p":{}},{"id":"","label":"zbývá CZK","pattern":"","type":"number"}],"rows":[{"c":[{"v":"brezen","f":null},{"v":1844,"f":null},{"v":143739,"f":null}]}],"p":null},"options":{"isStacked":true,"animation":{"duration":2500,"startup":true},"bar":{"groupWidth": "25%"},"booleanRole":"certainty","hAxis":{"useFormatFromData":true,"viewWindow":{"max":150000,"min":null},"minValue":null,"maxValue":160000,"logScale":false,"gridlines":{"count":"4"}},"vAxes":[{"useFormatFromData":true,"minValue":null,"maxValue":null,"viewWindow":null,"viewWindowMode":null},{"useFormatFromData":true}],"legend":"bottom","series":{"1":{"color":"#b7b7b7"}},"fontName":"Georgia","title":"Náklady CZK"},"state":{},"view":{},"isDefaultVisualization":true,"chartType":"BarChart"} 
 
); 
 
    wrapper.draw(); 
 
};

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div style='border: 0px darkgray solid;width:500px;'> 
 
<div id='visualizationDCA3' style='width:500px; height:200px;'></div> 
 

 
<div style='border: 0px darkgray solid;width:500px;'> 
 
<div id='2C2D' style='width:500px; height:200px;'></div>