YUI3 샌드 박스 내 Google 시각화 API

약 90 % 완료된 내 애플리케이션의 자바 스크립트 프레임 워크로 YUI3을 사용하고 있습니다. 예쁜 차트를 보여줄 필요가 있지만 YUI3의 차트 기능은 많이 필요합니다.YUI3 샌드 박스 내 Google 시각화 API

Google의 시각화 API를 사용하여 YUI3 샌드 박스 내에 플롯을 생성하려고하지만 작동하지 않는 것 같습니다. 다음은 샘플 코드입니다.

<html> 
    <head> 
    <script type='text/javascript' src='https://www.google.com/jsapi'></script> 
    <script type='text/javascript' src = 'build/yui/yui-min.js'></script> 
</head> 
    <body> 
    <div id='chart_div'></div> 
    </body> 
</html> 

<script type='text/javascript'> 

var some_foo = function() {  
    google.load('visualization', '1', {packages:['gauge']}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Label', 'Value'], 
      ['Memory', 80], 
      ['CPU', 55], 
     ]); 

     var options = { 
      width: 400, height: 120, 
      redFrom: 90, redTo: 100, 
      yellowFrom:75, yellowTo: 90, 
      minorTicks: 5 
     }; 

     var chart = new google.visualization.Gauge(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
} 


YUI().use('node', function (Y) { 
    /* doing some super-awesome stuff */ 

    /* now trying to show charts with some data */ 
    some_foo(); 
}); 

</script>

YUI3 샌드 박스 외부에서 some_foo()를 호출하면 코드가 작동합니다. 그러나 YUI3에서 호출하려고하면 작동하지 않습니다.

나는 또한 YUI3 샌드 박스, YUI3 샌드 박스, YUI3 샌드 박스 및 YUI3 샌드 박스 이후에 some_foo()를 YUI3 샌드 박스 내에서 선언하려고 시도했습니다. FF14 + 및 Chrome20 +에서 코드를 시험해 보았습니다.

누락 된 것이 있습니까?

출처

2012-08-15 KingJulian

@ KingJulian, 아직 답을 얻지 못하셨습니까? 나는 "some_foo"함수에서 "script"태그로 google.load('visualization', '1', {packages:['gauge']});을 옮겼다.

다음 코드는 나를 위해 일한 :

<html> 
    <head> 
    <script type='text/javascript' src='https://www.google.com/jsapi'></script> 
    <script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script> 
</head> 
    <body> 
    <div id='chart_div'></div> 
    </body> 
</html> 

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

var some_foo = function() {  

     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Label', 'Value'], 
      ['Memory', 80], 
      ['CPU', 55], 
     ]); 

     var options = { 
      width: 400, height: 120, 
      redFrom: 90, redTo: 100, 
      yellowFrom:75, yellowTo: 90, 
      minorTicks: 5 
     }; 

     var chart = new google.visualization.Gauge(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
} 


YUI().use('node', function (Y) { 

    some_foo(); 
}); 

</script>

출처

2012-09-23 10:33:32 Sri

YUI3 샌드 박스 내 Google 시각화 API

답변

관련 문제