在 jQueryUI 选项卡中通过 AJAX 为核心图表加载 Google 可视化答案

【问题标题】：Loading Google Visualizations for core charts via AJAX in jQueryUI tabs在 jQueryUI 选项卡中通过 AJAX 为核心图表加载 Google 可视化
【发布时间】：2013-03-12 12:43:55
【问题描述】：

Loading Google Visualizations via AJAX in jQueryUI tabs

上面的链接是我有类似的疑问，我需要首先使用带有 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>

【问题讨论】：

标签： jquery html ajax jquery-ui google-visualization

【解决方案1】：

我遇到了完全相同的问题。将我的 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函数

【讨论】：