在同一頁中製作兩張谷歌圖表

Question

我正在試圖放置兩張相同樣式的谷歌圖表，但是當我嘗試它時，一張是可見的，一張沒有出現。

所以，這是代碼。

 google.charts.load('current', {'packages':['bar']}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales'], 
     ['2014', 1000], 
     ['2015', 1170], 
     ['2016', 660], 
     ['2017', 1030] 
    ]); 

    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); 
    } 

我需要改變什麼變量來使其他圖表像這樣？

Answer 1

腳本正在尋找id選擇，在HTML中的ID是唯一的

所以添加一個新的div與antoher ID，並在你的腳本的末尾做

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

chart.draw(data, options); 
chartOther.draw(data, options); 

，如果你想使用一個類名，你可以繪製相同的圖表所有元素與類一些像這樣：

var charts = document.getElementsByClassName("yourclass"); 
for (var i = 0; i < charts; i++) { 
    var chart = new google.charts.Bar(charts[i]); 
    chart.draw(data, options); 

};