Charts YUI3沙盒中的谷歌可视化API_Charts_Google Visualization_Yui3

Charts YUI3沙盒中的谷歌可视化API

charts google-visualization

Charts YUI3沙盒中的谷歌可视化API,charts,google-visualization,yui3,Charts,Google Visualization,Yui3,我正在使用YUI3作为我的应用程序的javascript框架，它大约完成了90%。我需要显示一些漂亮的图表，但是YUI3的图表功能还有很多需要改进的地方我试图使用谷歌的可视化API在YUI3沙盒中生成绘图，但它似乎不起作用。以下是示例代码： <html> <head> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <

我正在使用YUI3作为我的应用程序的javascript框架，它大约完成了90%。我需要显示一些漂亮的图表，但是YUI3的图表功能还有很多需要改进的地方

我试图使用谷歌的可视化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>


var some_foo=函数（）{
load（'visualization'，'1'，{packages:['gauge']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Label'，'Value']，
[Memory'，80]，
[CPU'，55]，
]);
变量选项={
宽度：400，高度：120，
红色从：90，红色到：100，
黄色从：75，黄色到：90，
米诺蒂克斯：5
};
var chart=new google.visualization.Gauge（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}
}
YUI（）。使用（'node'，函数（Y）{
/*做一些超级棒的事情*/
/*现在尝试显示包含一些数据的图表*/
一些食物；
});

当我将调用放在YUI3沙箱外部的某个_foo（）时，代码会正常工作。然而，当我试图从YUI3内部调用它时，它不起作用

我还尝试在YUI3沙盒内、YUI3沙盒外、YUI3沙盒之前以及YUI3沙盒之后声明一些_foo（）。我已经在FF14+和Chrome20+上尝试了该代码

我有什么遗漏吗？

@KingJulian，不确定你现在是否已经有了答案。我移动了

google.load（'visualization'，'1'，{packages:['gauge']}）从“some_foo”函数到“script”标记，它成功了
以下代码适用于我：
<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>


load（'visualization'，'1'，{packages:['gauge']}）；
var some_foo=函数（）{
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Label'，'Value']，
[Memory'，80]，
[CPU'，55]，
]);
变量选项={
宽度：400，高度：120，
红色从：90，红色到：100，
黄色从：75，黄色到：90，
米诺蒂克斯：5
};
var chart=new google.visualization.Gauge（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}
}
YUI（）。使用（'node'，函数（Y）{
一些食物；
});