YUI3沙盒中的Google Visualization API

我使用YUI3作为我的应用程序的JavaScript框架，大约90％完成。我需要展示一些漂亮的图表，但YUI3的图表功能还有很多不足之处。YUI3沙盒中的Google Visualization API

我正在尝试使用Google的Visualization 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>

当我把电话给some_foo（）的YUI3沙箱外，代码工作。但是，当我尝试从YUI3中调用它时，它不起作用。

我也尝试在YUI3沙箱，YUI3沙箱之外，YUI3沙箱之前以及YUI3沙箱之后声明some_foo（）。我试过了FF14 +和Chrome20 +上的代码。

有什么我失踪？

来源

2012-08-15 KingJulian

@KingJulian，不知道你现在是否已经有了答案。我将google.load('visualization', '1', {packages:['gauge']});从“some_foo”函数移到了“脚本”标签，它工作。

下面的代码为我工作：

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

回答

相关问题