Javascript 使用下拉菜单选择在不同的谷歌图表之间切换_Javascript_Html_Drop Down Menu_Charts_Google Visualization

Javascript 使用下拉菜单选择在不同的谷歌图表之间切换

javascript html drop-down-menu charts google-visualization

Javascript 使用下拉菜单选择在不同的谷歌图表之间切换,javascript,html,drop-down-menu,charts,google-visualization,Javascript,Html,Drop Down Menu,Charts,Google Visualization,我需要帮助编码我的HTML页面，以便当您从下拉菜单中选择选项C152时，谷歌图表下面的代码将更改为C152图表，当您从下拉菜单中选择C172时，图表将更改为C172图表。基本上，图表将根据下拉菜单中的选择进行更改。每个图表都有一组不同的数据点和选项。我已经做了一些研究有一段时间了，还没有找到我要找的使这项工作。我希望有人能给我指出正确的方向。这是我的代码示例。提前谢谢选择 C152 C172 google.charts.loadcurrent，{packages:[corechart]}；

我需要帮助编码我的HTML页面，以便当您从下拉菜单中选择选项C152时，谷歌图表下面的代码将更改为C152图表，当您从下拉菜单中选择C172时，图表将更改为C172图表。基本上，图表将根据下拉菜单中的选择进行更改。每个图表都有一组不同的数据点和选项。我已经做了一些研究有一段时间了，还没有找到我要找的使这项工作。我希望有人能给我指出正确的方向。这是我的代码示例。提前谢谢

选择 C152 C172 google.charts.loadcurrent，{packages:[corechart]}； google.charts.setOnLoadCallbackdrawChart；功能图{ 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] ]; 变量选项C152={ 图例：“无”，哈克斯：{标题：'重心英寸'，最小值：30，最大值：38}， vAxis:{标题：总重磅}，轴线：{ y:{ 全部：{ 范围：{ 最高：1800，最低：1000 } } } }, 颜色：['009933']，点大小：0，标题：“塞斯纳152荷载极限”，背景色：“eeeeee”，点形状：“圆” }; 变量选项C172={ 图例：“无”，哈克斯：{标题：'重心英寸'，最小值：34，最大值：48}， vAxis:{标题：总重磅}，轴线：{ y:{ 全部：{ 范围：{ 最高：2300，最低：1500 } } } }, 颜色：['009933']，点大小：0，标题：“塞斯纳172荷载极限”，背景色：“eeeeee”，点形状：“圆” }; var chart=new google.visualization.AreaChartdocument.getElementById'chart_div'； chart.drawdatac152，选项C152； }

在选择标记上使用onchange，而不是onclick-on-options。获取所选值并将其传递给chart.draw

HTML:

代码笔-

在选择标记上使用onchange，而不是onclick on选项。获取所选值并将其传递给chart.draw

HTML:

Codepen-

非常感谢，这非常有效！另外，感谢您的快速回复！！非常感谢，这工作做得很好！另外，感谢您的快速回复！！

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

  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);
    }

  }