グラフタイプを動的に渡す方法

選択リストからオプションを選択してグラフタイプを動的に渡そうとしています。以下は私のコードです：グラフタイプを動的に渡す方法

<html> 
    <head> 
    </head> 
    <body> 
    <select id="ChartType" name="ChartType" onchange="drawChart()"> 
     <option value = "0">Select Chart Type 
     <option value="PieChart">PieChart 
     <option value="Histogram">Histogram 
     <option value="LineChart">LineChart 
     <option value="BarChart">BarChart 
    </select> 
    <div id="chart_div" style="border: solid 2px #000000;" ></div> 
    <p id="demo"></p> 
    <p id="demo1"></p> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1.0', {'packages':['corechart']}); 
    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 
    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it.  
    function drawChart() { 
     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Topping');  
     data.addColumn('number', 'Slices'); 
     data.addRows([ 
      ['Mushrooms', 3], 
      ['Onions', 4], 
      ['Olives', 1], 
      ['Zucchini', 5], 
      ['Pepperoni', 2] 
     ]);   
     var a = document.getElementById("ChartType").value; 
     document.getElementById("demo1").innerHTML = "You selected: " + a; 
     // Set chart options 
     var options = { 
      'title':'How Much Pizza I Ate Last Night', 
      'width':400, 
      'height':300 
     };    
     // Instantiate and draw our chart, passing in some options. 
     //passing the value which I am reading after selecting the options from the select. 
     var chart = new google.visualization.document.getElementById("ChartType").value(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 
    </script> 
    </body> 
</html>

私はグラフを取得できません。私はヒストグラムとしてオプションを選択しようとしています。グラフをヒストグラムにしたいのですが、私が円グラフを選択している場合、グラフは同じ値の円グラフでなければなりません。

出典

2016-08-08 Anubhav Mishra

https://jsfiddle.net/Ltxmz9h8/1/私はあなたの問題がどこにあるかを正確に得ることはありません...あなたは、最小限の作業にそれを打破しようとすることができます例？ –

またはスクリプトでイベントリスナーを追加するのではなく、HTMLのonchange属性を使用する場合はhttps://jsfiddle.net/Ltxmz9h8/2/のようにします。 –

こんにちはSimon、私がここに必要なのは、選択リストから別のグラフタイプを選択すると、私のグラフが変わることです。例：オプションを線グラフとして選択した場合は、線グラフグラフが表示されます。 Pie-Chartを選択した場合、Pie-ChartグラフはLine-Chartでなく表示されます。 –

あなたは、この行にエラーがあります：それがあるべき

var chart = new google.visualization.document.getElementById("ChartType").value(document.getElementById('chart_div'));

：

var chart = new google.visualization[document.getElementById("ChartType").value](document.getElementById('chart_div'));

キーとして文字列を使用するには、[]を使用する必要があります。理由はここにあります：これは...働く

var a = "someProperty"; 
var myObject = { 
    someProperty: 3, 
    a: 4 
}; 

console.log(myObject.a); // 4 
console.log(myObject[a]); // 3 
console.log(myObject.someProperty); // 3 
console.log(myObject["someProperty"]); // 3

出典

2016-08-08 10:20:40 cdrini

ありがとう@cdrini。今私は自分の間違いが何であるか理解しています。 –

グラフタイプを動的に渡す方法

答えて

関連する問題