Wie wir den Diagrammtyp passieren können dynamisch

Ich versuche, den Diagrammtyp dynamisch weitergeben, indem Sie die Optionen aus der Auswahlliste auswählen. Unten ist mein Code:Wie wir den Diagrammtyp passieren können dynamisch

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

Ich bin jedoch nicht in der Lage, das Diagramm zu erhalten. Ich versuche, die Option als Histogramm auszuwählen, und ich möchte, dass der Graph Histogramm ist, und wenn ich Kreisdiagramm auswähle, sollte das Diagramm ein Kreisdiagramm mit dem gleichen Wert sein.

Quelle

2016-08-08 Anubhav Mishra

Dies funktioniert ... https://jsfiddle.net/Ltxmz9h8/1/ ich nicht, wo genau Ihr Problem ist ... können Sie versuchen, es zu brechen auf einen minimalen Arbeits Beispiel? –

oder ähnlicher https://jsfiddle.net/Ltxmz9h8/2/, wenn Sie das 'onchange' Attribut in Ihrem HTML anstatt den von Skript-Ereignis-Listener hinzuzufügen. –

Hallo Simon, was ich hier brauche ist, dass sich mein Graph ändert, wenn ich einen anderen Graphentyp aus der Auswahlliste auswähle. Beispiel: Wenn ich die Option als Liniendiagramm ausgewählt habe, sollte ein Liniendiagramm angezeigt werden. Wenn ich Pie-Chart ausgewählt habe, sollte ein Pie-Chart-Graph nicht das Liniendiagramm erscheinen. –

Sie haben einen Fehler auf dieser Linie:

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

es sein sollte:

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

Um einen String als Schlüssel zu verwenden, müssen Sie [] verwenden. Hier ist der Grund:

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

Quelle

2016-08-08 10:20:40 cdrini

Danke @cdrini. Jetzt verstehe ich, was mein Fehler ist. –

Wie wir den Diagrammtyp passieren können dynamisch

Antwort

Verwandte Themen