Question

Loading Google Visualizations via AJAX in jQueryUI tabs

上面的链接是一个类似的疑问我有这是我需要使用谷歌可视化核心图表与jqueryui选项卡与ajax首先它不是所有工作我有相同的问题，但在链接提供的解决方案它部分工作它适用于该示例中提供的可视化图表，但不是核心图表是列或饼图是否有一些不同我必须与这些图表

索引页面包含此脚本

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

Answer 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函数

在jQueryUI选项卡中通过AJAX加载核心图表的Google Visualizations

1 个答案: