1

在 jQueryUI 选项卡中通过 AJAX 加载 Google 可视化

上面的链接是一个类似的疑问，我有一个类似的疑问，我需要首先使用带有 ajax 的 jqueryui 选项卡的谷歌可视化核心图表它不是所有的工作我有同样的问题，但是链接中提供的解决方案它部分工作它完美地工作对于该示例中提供的可视化图表，但不是柱形图或饼图的核心图表，我对这些图表有什么不同吗

索引页包含此脚本

<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 回答