변수를 Google Piechart에 전달

Google에서 변수를 전달하려고하는데 차트가 나타나지 않으면 내 입력란에 다른 숫자를 입력 할 때마다 차트가 변경됩니다. 그러나 나는 지금 막 어디에서 다만 얻고있다. 이것이 내가 가진 것입니다. 누군가 내가 뭘 잘못하고 있는지에 대한 지침을 제공해 줄 수 있습니까?변수를 Google Piechart에 전달

는 자바 스크립트

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

어떤 도움이 크게 감사합니다, 감사합니다

나는 또한 JS 바이올린에 추가하지만 한 자원 여기에 차트를 추가 할 때 doesnt는 그것을 발견하는 것처럼 보인다. http://jsfiddle.net/pkCCa/

출처

2012-04-12 user874185

알려 :이 완벽 밖으로 일

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

출처

2012-04-12 01:47:39

감사합니다! – user874185

BTW, 나는 그 애니메이션이 PieCharts에서 작동하지 않는다는 것을 알아 냈습니다 :-( –

그래, 그게 싫어. – user874185

이 시도 :

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

주을 : 그것은 당신이 사용하는 키를 자신의 도메인에 대해 설정되어 있지 않기 때문에 jsfiddler에 거 작업이 아니다. 환경에 시도하고 날이 나를 위해 일

출처

2012-04-12 01:38:02 MilkyWayJoe

변수를 Google Piechart에 전달

답변

관련 문제