Google 차트 함수가 함수 안에있을 때 호출되지 않는 이유는 무엇입니까?

Question

탭 링크를 클릭하면 내 Google 차트를 표시하려고하지만 Google 차트는 표시되지 않습니다.

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