如何用下拉列表填充Google餅圖？

我有一個Google餅圖，我想根據下拉列表中的選項動態更改。我也希望它默認爲下拉的默認值。如果我將變量selText更改爲靜態值，則顯示正常。因爲它根本不顯示。我如何根據用戶的下拉？：選擇圖表變化如何用下拉列表填充Google餅圖？

<html> 
    <head> 
    <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 listbox = document.getElementById("chart"); 
    var selIndex = listbox.selectedIndex; 
    var selValue = listbox.options[selIndex].value; 
    var selText = listbox.options[selIndex].text; 
    console.log(selValue); 

      var data = google.visualization.arrayToDataTable([ 
      ['Category', 'Percentage'], 
      ['Base Pay',  selText], 
      ['Variable Pay',  2], 
      ['Benefits', 2], 
      ['Retirement', 2], 
      ['Other', 7] 
     ]); 

     var options = { 
      title: 'Chart Title', 
      is3D: true, 
     }; 

     var chart = new google.visualization.PieChart (
          document.getElementById('piechart_3d') 
        ); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div> 
     <th> 
    <select id="chart" name='select1' onchange="drawChart()"> 
    <option selected disabled>Choose Base Pay</option> 
    <option value="100">1</option> 
    <option value="200">3</option> 
</select></th> 

    </body> 
</html>

來源

2017-02-03 user7459948

究竟有什麼你proble米/問題？（請參閱http://stackoverflow.com/help/how-to-ask）？ – reporter

編輯，謝謝！ – user7459948

只需添加*1到selText變量，因爲selText值是一個字符串默認：

事情是這樣的：

<html> 
 

 
<head> 
 
    <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 listbox = document.getElementById("chart"); 
 
     var selIndex = listbox.selectedIndex; 
 
     var selValue = listbox.options[selIndex].value; 
 
     var selText = listbox.options[selIndex].text; 
 
     //console.log(selValue); 
 

 
     var data = google.visualization.arrayToDataTable([ 
 
     ['Category', 'Percentage'], 
 
     ['Base Pay', selText * 1], // Must be a number. Convert the string to number by using «*1». 
 
     ['Variable Pay', 2], 
 
     ['Benefits', 2], 
 
     ['Retirement', 2], 
 
     ['Other', 7] 
 
     ]); 
 

 
     var options = { 
 
     title: 'Chart Title', 
 
     is3D: true, 
 
     }; 
 

 
     var chart = new google.visualization.PieChart(
 
     document.getElementById('piechart_3d') 
 
    ); 
 
     chart.draw(data, options); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="piechart_3d" style="width: 900px; height: 200px;"></div> 
 
    <select id="chart" name='select1' onchange="drawChart()"> 
 
    <option disabled>Choose Base Pay</option> 
 
    <option selected value="100">1</option> 
 
    <option value="200">3</option> 
 
    </select> 
 
</body> 
 

 
</html>

來源

2017-02-03 16:51:13

不客氣，不要忘記接受這個答案，以幫助其他類似問題的用戶。謝謝。 –

如何用下拉列表填充Google餅圖？

回答

相關問題