如何在點擊<select>下拉菜單上的選項時繪製Google圖表？

假設我有一個<select>下拉菜單位置：如何在點擊<select>下拉菜單上的選項時繪製Google圖表？

<select id="menu"> 
    <option>livejournal</option> 
    <option>librarybooks</option> 
    <option>sunspots</option> 
</select>

我試圖將其鏈接到谷歌圖API，所以當我點擊選項菜單中，將繪製相應的圖表（以取代現有的一個）在頁面上。

我使用object.onchange來實現這一點，但似乎chart.draw不會能畫一個圖表，還有什麼我錯過了？

//Dropdown Menu Selection 
document.getElementById("menu").onchange = function() { 
    //livejournal 
    if(this.selectedIndex == 0){ 
     alert("Default"); 
    } 
    //librarybooks 
    if(this.selectedIndex == 1){ 
     alert("librarybooks"); 
     var data = google.visualization.arrayToDataTable([ 
      ['Digit', 'Benford', 'Librarybooks'], 
      ['1', 1000, 200], 
      ['2', 1170, 760], 
      ['3', 660, 100], 
      ['4', 1030, 300], 
      ['5', 1030, 140], 
      ['6', 1030, 640], 
      ['7', 1030, 240], 
      ['8', 1030, 440], 
      ['9', 1030, 840] 
     ]);; 
     chart.draw(data, google.charts.Bar.convertOptions(options)); 
    } 
    //sunspots 
    if(this.selectedIndex == 2){ 
     alert("Sunspots"); 
    } 
}

這是我使用原來的API：

 google.charts.load('current', {'packages':['bar']}); 
 
     google.charts.setOnLoadCallback(drawChart); 
 

 
     function drawChart() { 
 
     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, google.charts.Bar.convertOptions(options)); 
 
     }

<html> 
 
    <head> 
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <script type="text/javascript"></script> 
 
    </head> 
 
    <body> 
 
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div> 
 
    </body> 
 
</html>

Link to the Google Charts API

來源

2017-10-13 Travis Su

看不出chart創建 - >var chart = new google.charts.Bar...

或options定義 - >var options = {...

建議使用switch語句以確定菜單的值

看下面的工作片段...

google.charts.load('current', { 
 
    packages: ['bar'] 
 
}).then(function() { 
 
    var dataDefault = google.visualization.arrayToDataTable([ 
 
     ['Year', 'Sales', 'Expenses', 'Profit'], 
 
     ['2014', 1000, 400, 200], 
 
     ['2015', 1170, 460, 250], 
 
     ['2016', 660, 1120, 300], 
 
     ['2017', 1030, 540, 350] 
 
    ]); 
 

 
    var dataLibraryBooks = google.visualization.arrayToDataTable([ 
 
     ['Digit', 'Benford', 'Librarybooks'], 
 
     ['1', 1000, 200], 
 
     ['2', 1170, 760], 
 
     ['3', 660, 100], 
 
     ['4', 1030, 300], 
 
     ['5', 1030, 140], 
 
     ['6', 1030, 640], 
 
     ['7', 1030, 240], 
 
     ['8', 1030, 440], 
 
     ['9', 1030, 840] 
 
    ]);; 
 

 
    var dataSunspots = google.visualization.arrayToDataTable([ 
 
     ['x', 'y'], 
 
     ['A', 10], 
 
     ['B', 30], 
 
     ['C', 50], 
 
     ['D', 70], 
 
     ['E', 90] 
 
    ]); 
 

 
    var options = { 
 
     chart: { 
 
      title: 'Bar Chart' 
 
     } 
 
    }; 
 

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

 
    var menu = document.getElementById('menu'); 
 
    menu.addEventListener('change', drawChart, false); 
 

 
    drawChart(); 
 
    function drawChart() { 
 
     switch (menu.selectedIndex) { 
 
     case 1: 
 
      console.log('librarybooks'); 
 
      chart.draw(dataLibraryBooks, google.charts.Bar.convertOptions(options)); 
 
      break; 
 

 
     case 2: 
 
      console.log('Sunspots'); 
 
      chart.draw(dataSunspots, google.charts.Bar.convertOptions(options)); 
 
      break; 
 

 
     default: 
 
      console.log('default'); 
 
      chart.draw(dataDefault, google.charts.Bar.convertOptions(options)); 
 
     } 
 
    } 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<select id="menu"> 
 
    <option selected>livejournal</option> 
 
    <option>librarybooks</option> 
 
    <option>sunspots</option> 
 
</select> 
 

 
<div id="chart_div"></div>

來源

2017-10-13 11:28:03 WhiteHat

您還沒有叫：google.charts.setOnLoadCallback(drawChart);。

<html> 
 
    <head> 
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <script type="text/javascript"> 
 
     google.charts.load('current', {'packages':['bar']}); 
 
    
 
     function drawgraph(index){ 
 
if(index==0){ 
 
    document.getElementById('livejournal'); 
 
google.charts.setOnLoadCallback(drawChart('livejournal')); 
 
} 
 
if(index==1){ 
 
    google.charts.setOnLoadCallback(drawChart('librarybooks')); 
 
} 
 
if(index==2){ 
 
    google.charts.setOnLoadCallback(drawChart('sunspots')); 
 
} 
 
     } 
 
     function drawChart(divId) { 
 
     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', 
 
      }, 
 
      bars: 'horizontal' // Required for Material Bar Charts. 
 
     }; 
 

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

 
     chart.draw(data, google.charts.Bar.convertOptions(options)); 
 
     } 
 
    </script> 
 
    </head> 
 
    <body> 
 
    <select id="menu" onchange=drawgraph(this.selectedIndex)> 
 
    <option>livejournal</option> 
 
    <option>librarybooks</option> 
 
    <option>sunspots</option> 
 
</select> 
 
    
 
    <div id="livejournal" style="width: 900px; height: 500px;"></div> 
 
    <div id="librarybooks" style="width: 900px; height: 500px;"></div> 
 
    <div id="sunspots" style="width: 900px; height: 500px;"></div> 
 
    </body> 
 
</html>

來源

2017-10-13 04:34:59

如何在點擊<select>下拉菜單上的選項時繪製Google圖表？

回答

相關問題