Googleのチャートデザインは、別のタブに切り替わっている間にdistubingされています

Question

すべてのデータは正しく表示されますが、別のタブビューの詳細をクリックすると内容が重なったり右に移動したりします。

Working Fine Screen shot

Image of chart not working fine.

マイHTML：

：ここではGoogleのチャート

<td><button id="" onClick="getJobDetails(<?php echo $JobResults['id_job']; ?> , 2)" class="btn btn-s-lg btn-dark btn-rounded text-center ">View Details</button></td> 

Javaスクリプトコードの

<ul class="nav nav-tabs nav-justified"> 
    <li class="active accepted-btn"><a href="#internaljobs" id="getinternaljobres" data-toggle="tab">INTERNAL JOBS </a></li> 
    <?PHP IF($_SESSION['user_type']!= "corporate") {?> 
     <li class="not-responed-btn"><a href="#externaljobs" id="getexternaljobres" data-toggle="tab">EXTERNAL JOBS</a></li> 
    <?PHP } ?> 
</ul> 

機能210

function getJobDetails(jobID, id) { 
    $("#showReInviteMessage").hide(); 
    $("#showReInviteStudentsMessage").hide(); 
    $("#exportInternalJobReport").hide(); 
    $("#exportExternalJobReport").hide(); 
    $('#GroupDiscussionForExternalJob').hide(); 
    $('#PersonalInterViewForExternalJob').hide(); 
    $.ajax({ 
     url: "job-controller.php", 
     method: "POST", 
     data: { 
      'action': 'viewjob', 
      'JobId': +jobID, 
      'intextid': +id 
     }, 
     dataType: "json", 
     success: function(response) { 
      /*College Pie Chart starts here*/ 
      google.charts.load("current", { 
       packages: ["corechart"] 
      }); 
      google.charts.setOnLoadCallback(drawChartCollegeInvitation); 

      function drawChartCollegeInvitation() { 
       var data = google.visualization.arrayToDataTable([ 
       ['Invites', 'Count'], 
       ['YES', parseInt(response['JobInvitationstatus']['yes'])], 
       ['NO', parseInt(response['JobInvitationstatus']['no'])], 
       ['Maybe', parseInt(response['JobInvitationstatus']['noresponse'])] 
       ]); 
       var options = { 
       'width': 250, 
       'height': 250, 
       'legend': 'bottom', 
       colors: ['green', 'red', '#0061ff'], 
       pieHole: 0.3, 
       // title: 'Job ID '+response['jobData']['id_job']+' Invitation Status' 
       title: 'Total Colleges Invitied ' + parseInt(response['JobInvitationstatus']['toatalinvites']) + '.' 
       }; 
       var chart = new google.visualization.PieChart(document.getElementById('collegeInvitationpiechart')); 
       chart.draw(data, options); 
      } 
/*College Pie Chart ends here*/ 

Answer 1

既存のものを追加する前にjsからこのグラフを追加してみてください。うまくいくと思いますが、コードに何も問題はないようです。そのペリキュラートの円グラフを再生成する必要があります。

/*College Pie Chart starts here*/ 
      google.charts.load("current", { 
       packages: ["corechart"] 
      }); 
      google.charts.setOnLoadCallback(drawChartCollegeInvitation); 

      function drawChartCollegeInvitation() { 
       var data = google.visualization.arrayToDataTable([ 
       ['Invites', 'Count'], 
       ['YES', parseInt(response['JobInvitationstatus']['yes'])], 
       ['NO', parseInt(response['JobInvitationstatus']['no'])], 
       ['Maybe', parseInt(response['JobInvitationstatus']['noresponse'])] 
       ]); 
       var options = { 
       'width': 250, 
       'height': 250, 
       'legend': 'bottom', 
       colors: ['green', 'red', '#0061ff'], 
       pieHole: 0.3, 
       // title: 'Job ID '+response['jobData']['id_job']+' Invitation Status' 
       title: 'Total Colleges Invitied ' + parseInt(response['JobInvitationstatus']['toatalinvites']) + '.' 
       }; 
       var chart = new google.visualization.PieChart(document.getElementById('collegeInvitationpiechart')); 
       chart.draw(data, options); 
      } 
/*College Pie Chart ends here*/