1

jQueryUI タブで AJAX を介して Google ビジュアライゼーションをロードする

上記のリンクは、私が持っている同様の疑問です。最初にajaxを使用したjqueryuiタブでGoogle Visualizationコアチャートを使用する必要があるということです。すべてが機能していたわけではありません。同じ問題がありましたが、リンクで提供されているソリューションでは部分的に機能し、完全に機能しましたその例で提供される視覚化チャートについては、縦棒グラフまたは円グラフであるコアチャートでは提供されませんが、これらのチャートで私がしなければならないことがいくつかあります

インデックスページにはこのスクリプトが含まれています

<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-ui.js"></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></script> 
    $(function() {
    $("#switch").tabs({
        beforeLoad: function( event, ui ) {
            ui.jqXHR.error(function() {
                ui.panel.html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo."
                );
            });
        }
    });
}); //for swicthes  
google.load("visualization", "1", {packages:["corechart"]});

そしてajaxページには

<script type='text/javascript'>
 google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
    };

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


 <div id='chart_div' style='width: 700px; height: 240px;'></div>
4

1 に答える 1

0

私はまったく同じ問題を抱えていました。私のajaxページのjavascriptをこれに変更すると、次のようになりました：

<script type='text/javascript'>
var data = google.visualization.arrayToDataTable([
  ['Year', 'Sales', 'Expenses'],
  ['2004',  1000,      400],
  ['2005',  1170,      460],
  ['2006',  660,       1120],
  ['2007',  1030,      540]
]);

var options = {
  title: 'Company Performance',
  hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
</script>

つまり、コールバックを削除して drawChart 関数を取り出します

于 2013-06-17T11:39:26.600 に答える