ドロップダウンメニューを使用して異なるGoogle Chart間で変更する

ドロップダウンメニューからオプション "C152"を選択すると（下記のコードを参照）、Google ChartがC152に変更されるようにHTMLページをコーディングする必要がありますドロップダウンメニューから "C172"を選択すると、チャートはC172チャートに変わります。基本的には、ドロップダウンメニューからその選択に基づいてチャートが変更されます。（それぞれのチャートにはデータポイントとオプションのセットがあります）私はしばらくの間研究をしてきましたが、私がこの仕事をするために探していたものは見つかりませんでした。誰かが私に正しい方向を向けることを望んでいました。ここに私のコードのサンプルがあります。事前ドロップダウンメニューを使用して異なるGoogle Chart間で変更する

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

出典

2016-07-12 Pyle

代わりのオプションのonclickののおかげでは、selectタグでの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-

出典

2016-07-12 19:38:16

http://codepen.io/nagasai/pen/RRjLxLはどうもありがとうございました、これは働いていました完全に！また、迅速な対応に感謝します！ – Pyle

ドロップダウンメニューを使用して異なるGoogle Chart間で変更する

答えて

関連する問題