javascript - 为什么在函数内部时不调用 google chart 函数？

Question

我试图在他们点击标签链接后显示我的 google 图表，但 google 图表不显示。

我在 ChartlyDaily 中包含了谷歌图表代码。当它在 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);
});

编辑:更改为未经测试的示例。