1つのページに2つのGoogleグラフを入れる方法

棒グラフと円グラフを作成する方法をhttps://developers.google.com/chart/interactive/docs/gallery/columnchartと https://developers.google.com/chart/interactive/docs/gallery/piechartから学びます。しかし、私はちょうど同じpage.Myコードに2つのチャートを得ることができませんでしたが、次の通りである：1つのページに2つのGoogleグラフを入れる方法

<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 1時間

のみcallback火災後に必要な

限り多くの'packages'を読み込むことができます1つのloadの文
を必要とするを参照する必要がある、あなたは

を描き始めることができます

次の作業スニペットを参照してください...

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

1つのページに2つのGoogleグラフを入れる方法

答えて

関連する問題