google-charts-load

<!--這次示範加兩張圖-->
<!--這行要加在最上面，加一次就好-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 
<script type="text/javascript">
<!--以下是第一張圖的程式碼，要用<script>包住-->
 google.charts.load('current', {'packages':['corechart']});
 google.charts.setOnLoadCallback(drawChart);
 function drawChart() {
 
 var data = google.visualization.arrayToDataTable([
 ['Task', 'Hours per Day'],
 ['工作', 15],
 ['吃飯', 2],
 ['通勤', 2],
 ['上網', 2],
 ['睡覺', 7]
 ]);
 
 var options = {
 title: '我的日常生活'
 };
 
 var chart = new google.visualization.PieChart(document.getElementById('piechart-daily'));
 
 chart.draw(data, options);
 }
 
 <!--以下是範例-->
 </script>
 <script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawAxisTickColors);
 
function drawAxisTickColors() {
 var data = google.visualization.arrayToDataTable([
 ['City', '2010年 人口', '2000年 人口'],
 ['紐約, NY', 8175000, 8008000],
 ['洛杉磯, CA', 3792000, 3694000],
 ['芝加哥, IL', 2695000, 2896000],
 ['休士頓, TX', 2099000, 1953000],
 ['費城, PA', 1526000, 1517000]
 ]);
 
 var options = {
 title: '美國大城市人口數量',
 chartArea: {width: '50%'},
 hAxis: {
 title: '總人口',
 minValue: 0,
 textStyle: {
 bold: true,
 fontSize: 12,
 color: '#4d4d4d'
 },
 titleTextStyle: {
 bold: true,
 fontSize: 18,
 color: '#4d4d4d'
 }
 },
 vAxis: {
 title: '城市',
 textStyle: {
 fontSize: 14,
 bold: true,
 color: '#848484'
 },
 titleTextStyle: {
 fontSize: 14,
 bold: true,
 color: '#848484'
 }
 }
 };
 var chart = new google.visualization.BarChart(document.getElementById('chart_div_cities'));
 chart.draw(data, options);
 }
 </script>