个人中心
gpt4 book ai didi

javascript - 使用下拉菜单选择在不同的 Google 图表之间进行更改

转载 作者：行者123 更新时间：2023-11-28 05:47:53 25 4
gpt4 key购买 nike

我需要帮助编码我的 HTML 页面，以便当您从下拉菜单中选择选项“C152”时(请参阅下面的代码)，Google 图表将更改为 C152 图表，并且当您从下拉菜单中选择“C172”时，Google 图表将更改为 C152 图表。下拉菜单中，图表将更改为 C172 图表。基本上，图表将根据下拉菜单中的选择而变化。 (每个图表都有一组不同的数据点和选项。)我已经做了一些研究一段时间了，但还没有找到我想要的东西来完成这项工作。我希望有人能指出我正确的方向。这是我的代码示例。提前致谢

<!DOCTYPE html>
<html>
<head>

<th>
<select name='select1' >
  <option selected disabled>Choose</option> 
  <option onclick="c152()" value="c152">C152</option>
  <option onclick="c172()" value="c172">C172</option>
</select></th>

<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 datac152 = google.visualization.arrayToDataTable
            ([['X', 'Y'],
              [31, 1000],
              [31, 1350],
              [32.65, 1670],
              [36.5, 1670],
              [36.5, 1000]
        ]);
        var datac172 = google.visualization.arrayToDataTable
            ([['X', 'Y'],
              [35, 1500],
              [35, 1950],
              [38.65, 2300],
              [47.3, 2300],
              [47.3, 1500]
        ]);


        var optionsc152 = {
          legend: 'none',
          hAxis: {title: 'Center of Gravity (inches)', minValue: 30, maxValue: 38 },
          vAxis: {title: "Total Weight (lbs)"},
          axes: {
            y: {
                all: {
                    range: {
                        max: 1800,
                        min: 1000
                    }
                }
            }
        },

          colors: ['#009933'],
          pointSize: 0,
          title: 'Cessna 152 Load Limits',
          backgroundColor: '#eeeeee',
          pointShape: 'circle'
       };

        var optionsc172 = {
          legend: 'none',
          hAxis: {title: 'Center of Gravity (inches)', minValue: 34, maxValue: 48 },
          vAxis: {title: "Total Weight (lbs)"},
          axes: {
            y: {
                all: {
                    range: {
                        max: 2300,
                        min: 1500
                    }
                }
            }
        },

          colors: ['#009933'],
          pointSize: 0,
          title: 'Cessna 172 Load Limits',
          backgroundColor: '#eeeeee',
          pointShape: 'circle'
       };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(datac152, optionsc152);
    }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 963px; height: 500px;"></div>
  </body>
</body>

</html>

最佳答案

不要在选项上使用 onclick，而是在选择标签上使用 onchange。
获取选定的值并将其传递给chart.draw()

HTML:

<html>

<head>

  <th>
    <select id="chart" name='select1' onchange="change()">
  <option selected disabled>Choose</option> 
  <option value="c152">C152</option>
  <option value="c172">C172</option>
</select></th>

  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  </head>

  <body>
    <div id="chart_div" style="width: 963px; height: 500px;"></div>
  </body>
  </body>

</html>

JS:

  google.charts.load("current", {
    packages: ["corechart"]
  });

  function change() {
    var listbox = document.getElementById("chart");
    var selIndex = listbox.selectedIndex;
    var selValue = listbox.options[selIndex].value;
    var selText = listbox.options[selIndex].text;
    console.log(selValue);

    google.charts.setOnLoadCallback(drawChart);

    function drawChart(x, y) {
      var datac152 = google.visualization.arrayToDataTable([
        ['X', 'Y'],
        [31, 1000],
        [31, 1350],
        [32.65, 1670],
        [36.5, 1670],
        [36.5, 1000]
      ]);
      var datac172 = google.visualization.arrayToDataTable([
        ['X', 'Y'],
        [35, 1500],
        [35, 1950],
        [38.65, 2300],
        [47.3, 2300],
        [47.3, 1500]
      ]);

      var optionsc152 = {
        legend: 'none',
        hAxis: {
          title: 'Center of Gravity (inches)',
          minValue: 30,
          maxValue: 38
        },
        vAxis: {
          title: "Total Weight (lbs)"
        },
        axes: {
          y: {
            all: {
              range: {
                max: 1800,
                min: 1000
              }
            }
          }
        },

        colors: ['#009933'],
        pointSize: 0,
        title: 'Cessna 152 Load Limits',
        backgroundColor: '#eeeeee',
        pointShape: 'circle'
      };

      var optionsc172 = {
        legend: 'none',
        hAxis: {
          title: 'Center of Gravity (inches)',
          minValue: 34,
          maxValue: 48
        },
        vAxis: {
          title: "Total Weight (lbs)"
        },
        axes: {
          y: {
            all: {
              range: {
                max: 2300,
                min: 1500
              }
            }
          }
        },

        colors: ['#009933'],
        pointSize: 0,
        title: 'Cessna 172 Load Limits',
        backgroundColor: '#eeeeee',
        pointShape: 'circle'
      };

      var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
      if (selValue == 'c152') {
        x = datac152;
        y = optionsc152;
      }
      if (selValue == 'c172') {
        x = datac172;
        y = optionsc172;
      }
      chart.draw(x, y);
    }

  }

Codepen-http://codepen.io/nagasai/pen/RRjLxL

关于javascript - 使用下拉菜单选择在不同的 Google 图表之间进行更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38336909/

25 4 0
文章推荐： javascript - 如何在 ionic View 中显示加载或在缓存/内存中一次加载所有应用程序？
文章推荐： c++ - 针对 Windows 7 桌面 : identifier "SHGetKnownFolderPath" is undefined
文章推荐： javascript - 将数据传递给其他组件
文章推荐： c++ - gstreamer 和 Qt 与 ARM 上的 nvidia