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

Loading Google Visualizations via AJAX in jQueryUI tabs

在jQueryUI选项卡中通过AJAX加载Google Visualizations

the link above is a similar doubt i have that is i need to use the google Visualization core charts with jqueryui tabs with ajax first it was not all working i had the same problem but with the solution provided in the link it worked partially it works perfectly for the Visualization chart provide in that example but not with the core charts that is column or pie charts is there some thing different i have to with those charts

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

the index page contains this script

索引页面包含此脚本

<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"]});

and the ajax page contains

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

1 个解决方案

#1

I had exactly the same problem. Changing the javascript in my ajax page to this cracked it:

我有完全相同的问题。将我的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>

i.e. remove the callback and take out the drawChart function

即删除回调并取出drawChart函数

#1