मेरे पास एक 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>
1
user7459948 3 फरवरी 2017, 18:51
और आपकी समस्या/प्रश्न वास्तव में क्या है? (देखें stackoverflow.com/help/how-to-ask )?
 – 
Reporter
3 फरवरी 2017, 18:54

1 उत्तर

सबसे बढ़िया उत्तर

बस *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>
1
Danny Fardy Jhonston Bermúdez 3 फरवरी 2017, 19:51
1
आपका स्वागत है, इसी तरह के मुद्दों वाले अन्य उपयोगकर्ताओं की सहायता के लिए इस उत्तर को स्वीकार करना न भूलें। धन्यवाद।
 – 
Danny Fardy Jhonston Bermúdez
3 फरवरी 2017, 20:37