爲什麼谷歌圖表函數在函數內不被調用？

Question

我試圖讓我的谷歌圖表顯示一旦他們點擊一個標籤鏈接，但谷歌圖表不顯示。

我在ChartlyDaily裏面加入了google圖表代碼。當它在ChartDaily功能之外時，它可以工作，但在其內部則不行。

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
       <script type="text/javascript"> 
       google.load("visualization", "1", {packages:["corechart"]}); 
       function ChartDaily(){ 
        google.setOnLoadCallback(drawChartDaily); 
        function drawChartDaily() { 
        var chart_data = ['3',7]; 
        alert(chart_data); 
        var data = google.visualization.arrayToDataTable([ 
        ['Scoring Activity', 'Points given'], chart_data]); 

        var options = { 
        title: 'Semis overall scoring activity' 
        }; 

        var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
        chart.draw(data, options); 
       } 
       } 
       jQuery(document).ready(function() { 
       $('#tabs > div').hide(); 
       $('#tabs div:first').fadeIn('slow'); 
       $('#tabs ul li:first').addClass('active'); 
       $('#tabs ul li a').click(function(){ 
        $('#tabs ul li.active').removeClass('active'); // <== Only what you need 
        $(this).parent().addClass('active'); 
        var selectedTab=$(this).attr('href'); 
        $('#tabs > div').fadeOut('slow', function() {  // <== Use a callback 
         $(selectedTab).delay(10).fadeIn('fast');   // <== add a delay 
         });   
        return false; 
        }); 
       $('#menu_tab1').click(function(){ 
        ChartDaily(); // supposed to show the chart 
       }); 

       $('#menu_tab2').click(function(){ 
       alert('tab-2 got clicked!!'); 

       }); 

       $('#menu_tab3').click(function(){ 
       alert('tab-3 got clicked!!'); 

       }); 

       $('#menu_tab4').click(function(){ 
       alert('tab-4 got clicked!!'); 

       }); 

       }); 

</script> 

    <div id="chart_div" style=" margin-left:-280px;width: 800px; height: 500px;"></div> 

Answer 1

這裏有一些重新開始。

function GoogleChart() { 
    this.chart_data = ['3',7]; 
    this.data_table = google.visualization.arrayToDataTable([['Scoring Activity', 'Points given'], chart_data]); 
    this.options = { 
     title: 'Semis overall scoring activity' 
    }; 

    this.chart = new google.visualization.PieChart(document.getElementById('chart_div'));  
} 

GoogleChart.prototype.drawChartDaily = function() { 
    this.chart.draw(this.data_table, this.options); 
}; 

$(function() { 
    function myOnLoadCallback() { 
     var googleChart = new GoogleChart(); 

     $('#menu_tab1').click(function(){ 
      googleChart.drawChartDaily(); 
     }); 
    } 

    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(myOnLoadCallback); 
}); 

編輯：更改爲未經測試的示例。

Answer 2

Google加載程序有問題從其他函數中調用，所以最好讓它自己運行。嘗試這樣的：

function ChartDaily() { 
    var chart_data = ['3',7]; 
    var data = google.visualization.arrayToDataTable([ 
     ['Scoring Activity', 'Points given'], 
     chart_data 
    ]); 

    var options = { 
     title: 'Semis overall scoring activity' 
    }; 

    var chart = new oogle.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 
function init() { 
    $('#menu_tab1').click(function(){ 
     ChartDaily(); 
    }); 
} 
google.load("visualization", "1", {packages:["corechart"], callback: init});