如何將2個谷歌圖表放在一頁上

我學習如何從https://developers.google.com/chart/interactive/docs/gallery/columnchart和 https://developers.google.com/chart/interactive/docs/gallery/piechart創建條形圖和餅圖。但我只是不能在同一page.My代碼得到兩個圖表是如下：如何將2個谷歌圖表放在一頁上

<html> 
<head> 
<!--pie chart--> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
    google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 

    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Work',  11], 
     ['Eat',  2], 
     ['Commute', 2], 
     ['Watch TV', 2], 
     ['Sleep', 7] 
    ]); 

    var options = { 
     title: 'My Daily Activities' 
    }; 

    var chart = new   
google.visualization.PieChart(document.getElementById('piechart')); 

    chart.draw(data, options); 
    } 
</script> 


<!--bar chart--> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
    google.charts.load('current', {'packages':['bar']}); 
    google.charts.setOnLoadCallback(drawBar); 

    function drawBar() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses', 'Profit'], 
     ['2014', 1000, 400, 200], 
     ['2015', 1170, 460, 250], 
     ['2016', 660, 1120, 300], 
     ['2017', 1030, 540, 350] 
    ]); 

    var options = { 
     chart: { 
     title: 'Company Performance', 
     subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
     } 
    }; 

var chart = new  
google.charts.Bar(document.getElementById('columnchart_material')); 

    chart.draw(data, options); 
    } 
</script> 
</head> 

<body> 
<div id="piechart" style="width: 900px; height: 500px;"></div> 
<br> 
<div id="columnchart_material" style="width: 900px; height: 500px;"></div> 

</body> 
</html>

有人可以給我一些建議嗎？非常感謝。

來源

2017-03-01 KenyKeny

第一，只需要引用loader.js一次

，只需要一個load聲明
它可以裝載多達'packages'需要

一旦callback火災，你就可以開始繪製

請參閱以下工作片段...

google.charts.load('current', { 
 
    callback: function() { 
 
    drawChart(); 
 
    drawBar(); 
 
    }, 
 
    packages: ['bar', 'corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Task', 'Hours per Day'], 
 
    ['Work',  11], 
 
    ['Eat',  2], 
 
    ['Commute', 2], 
 
    ['Watch TV', 2], 
 
    ['Sleep', 7] 
 
    ]); 
 

 
    var options = { 
 
    title: 'My Daily Activities' 
 
    }; 
 

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

 
function drawBar() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Year', 'Sales', 'Expenses', 'Profit'], 
 
    ['2014', 1000, 400, 200], 
 
    ['2015', 1170, 460, 250], 
 
    ['2016', 660, 1120, 300], 
 
    ['2017', 1030, 540, 350] 
 
    ]); 
 

 
    var options = { 
 
    chart: { 
 
     title: 'Company Performance', 
 
     subtitle: 'Sales, Expenses, and Profit: 2014-2017', 
 
    } 
 
    }; 
 

 
    var chart = new google.charts.Bar(document.getElementById('columnchart_material')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="piechart" style="width: 900px; height: 500px;"></div> 
 
<br> 
 
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>

來源

2017-03-01 12:26:10 WhiteHat

它的工作原理就像一個魅力。對於具有「回調」的代碼片段，這是什麼類型的知識？它只是JavaScript嗎？ – KenyKeny

歡呼！是的，'callback'是'load'語句的一個可用屬性並且替代了'setOnLoadCallback' ... – WhiteHat

如何將2個谷歌圖表放在一頁上

回答

相關問題