0

約 90% 完成したアプリケーションの JavaScript フレームワークとして YUI3 を使用しています。きれいなグラフをいくつか表示する必要がありますが、YUI3 のグラフ作成機能には多くの要望が残されています。

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+ でコードを試しました。

足りないものはありますか？

4

1 に答える 1

0

@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>
于 2012-09-23T10:33:32.557 に答える