Question

我有一个Google饼图，我希望根据下拉列表中的选择进行动态更改。我也希望它默认为下拉列表的默认值。如果我将变量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],
          ['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>

Answer 1

只需将*1添加到selText变量，因为selText值默认为字符串：

这样的事情：

＆＃13;

<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>

＆＃13;

如何使用下拉列表填充Google饼图？

1 个答案: