2017-05-29 38 views
1

當我點擊查看詳細信息時,所有數據都會正常,但當我點擊另一個標籤查看詳細信息其內容重疊或移動。谷歌圖表設計是distubing,而它切換到另一個選項卡

Working Fine Screen shot

Image of chart not working fine.

我的HTML:

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

谷歌圖表的功能

<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腳本代碼在這裏:

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*/ 
+1

這是繪製時,它的容器被隱藏的圖的結果 - 此外,當圓環圖值爲100%,變化'pieSliceTextStyle'顏色以看到值,默認爲白色(或改變'chartArea .backgroundColor')... – WhiteHat

+0

但問題不是顏色它重疊的圖表數據,我希望數據應該以適當的方式,當我點擊第一次它的來臨,但當點擊查看詳細信息按鈕在另一個選項卡上它的數據顯示像這正如上面圖表中提到的 –

+0

可以請你回答如何改變這種顏色 –

回答

1

嘗試從js追加此圖表,然後再附加清除現有的圖表,希望它能正常工作,在代碼中看起來沒有任何問題。確保你應該重新生成該periculat餅圖。

/*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*/ 
相關問題