Variable an Google Piechart übergeben

Ich versuche, eine Variable in das Google-Diagramm zu übertragen, aber wenn ich es tue, wird das Diagramm nicht mehr angezeigt. Mein Ziel ist, dass sich das Diagramm jedes Mal ändert, wenn ich eine andere Zahl in das Eingabefeld einfüge aber ich komme gerade nicht wo gerade jetzt. Das ist was ich habe, kann jemand bitte eine Anleitung geben was ich falsch mache?Variable an Google Piechart übergeben

Javascript

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

    <script type="text/javascript"> 
     google.load('visualization', '1', {packages: ['corechart']}); 
    </script> 

    <script type="text/javascript"> 
     function numbers(){ 
      var work_field = document.forms['work_form']['work_n_field'].value; 
      var work_div = document.getElementById('number-work'); 
      var numberschart = work_div.innerHTML = work_field; 
      return false; 
     }; 

     function drawVisualization() { 
      // Create and populate the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Task'); 
     data.addColumn('number', 'Hours per Day'); 
     data.addRows(5); 
     data.setValue(0, 0, 'Work'); 
//Right here is where I pass my variable into the chart 
     data.setValue(0, 1, numberschart); 
//And I leave the rest here until I define more input field. 
     data.setValue(1, 0, 'Eat'); 
     data.setValue(1, 1, 2); 
     data.setValue(2, 0, 'Commute'); 
     data.setValue(2, 1, 2); 

     // Create and draw the visualization. 
     new google.visualization.PieChart(document.getElementById('visualization')). 
      draw(data, { 
      title:"Mortgage Rates", 
      colors: ['#a4b12d', '#818e0a', '#5c6601', '#f0fd79', '#dbe864'], 
      }); 
     }  
     google.setOnLoadCallback(drawVisualization); 
    </script>

Html

<div id="visualization" style="width: 400px; height: 300px;"></div> 
    <form name="work_form" onsubmit="return numbers()"> 
    <label id="n-work-label">Work</label><input name="work_n_field"/> 
    <button name="submit" id="submit" value="submit" onclick="numbers()">Submit</button> 
    </form> 
    <div id="number-work"></div> 
    </div>

Jede Hilfe wird sehr geschätzt, Danke

Ich habe es auch zu js Geige hinzugefügt, aber beim Hinzufügen des Diagramms auf eine Ressource es scheint es nicht zu erkennen. http://jsfiddle.net/pkCCa/

Quelle

2012-04-12 user874185

Das ist für mich gearbeitet:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Example</title> 
     <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
       var numberschart = 10; //<- Initial value 
       google.load('visualization', '1', {packages: ['corechart']}); 

       function numbers(){ 
         var work_field = document.forms['work_form']['work_n_field'].value; 
         var work_div = document.getElementById('number-work'); 
         numberschart = work_div.innerHTML = work_field; 
         drawVisualization(); 
         return false; 
       }; 

       function drawVisualization() { 
        // Create and populate the data table. 
        var data = new google.visualization.DataTable(); 
        data.addColumn('string', 'Task'); 
        data.addColumn('number', 'Hours per Day'); 
        data.addRows(5); 
        data.setValue(0, 0, 'Work'); 
        //data.setValue(0, 1, 11); 
        data.setValue(0, 1, parseInt(numberschart));//<- The value you get from input field is a string, Google API will throw an error 
        data.setValue(1, 0, 'Eat'); 
        data.setValue(1, 1, 2); 
        data.setValue(2, 0, 'Commute'); 
        data.setValue(2, 1, 2); 

        // Create and draw the visualization. 
        new google.visualization.PieChart(document.getElementById('visualization')). 
         draw(data, { 
          title:"Mortgage Rates", 
          colors: ['#a4b12d', '#818e0a', '#5c6601', '#f0fd79', '#dbe864'], 
          animation:{ 
           duration:1000, 
           easing: 'out', 
          }, 
          vAxis: { 
           minValue:0, 
           maxValue:1000 
          }, 
         }); 
        }  
       google.setOnLoadCallback(drawVisualization); 
     </script> 
    </head> 
    <body> 
     <div id="visualization" style="width: 400px; height: 300px;"></div> 
     <form name="work_form" onsubmit="return false"> 
      <label id="n-work-label">Work</label><input name="work_n_field"/> 
      <button name="submit" id="submit" value="submit" onclick="numbers();return false;">Submit</button> 
     </form> 
     <div id="number-work"></div> 
    </body> 
</html>

Quelle

2012-04-12 01:47:39

Dank dieser wunderbar geklappt! – user874185

BTW, ich habe gerade herausgefunden, dass die Animation für PieCharts nicht funktioniert :-( –

Ja, ich weiß, dass es nicht saugt – user874185

Versuchen Sie folgendes:

http://jsfiddle.net/schawaska/pkCCa/2/

Hinweis: Es wird nicht funktionieren auf jsfiddler, weil der Schlüssel, den Sie verwenden, ist nicht für ihre Domain einrichten. Versuchen Sie, auf Ihre Umgebung und lassen Sie mich wissen

Quelle

2012-04-12 01:38:02 MilkyWayJoe

Variable an Google Piechart übergeben

Antwort

Verwandte Themen