圖表js餅圖未顯示使用JSON的動態數據

Question

我想在我的項目中製作餅圖，但我在從數據庫獲取數據時遇到問題。我目前使用codeigniter和bootstrap模板，內置chart.js。

這裏是我的圖表表： charts

控制器：

public function loadViewExamResult($exam_no){ 

    $this->load->model('exam_model'); 
    $this->insertChartData($exam_no); 

    $data = $this->exam_model->loadChartData($exam_no); 
    echo json_encode($data); 

    $this->load->view('exam_report_chart', $data); 
} 


public function insertChartData($exam_no){ 
    $this->load->model('exam_model'); 

    $pass = $this->exam_model->passedScore($exam_no); 
    echo($pass); 
    $fail = $this->exam_model->failedScore($exam_no); 

    echo($fail); 
    $this->exam_model->insertPieData($exam_no,$pass,$fail); 

} 

型號：

public function loadChartData($exam_no){ 
     $query = $this->db->query("SELECT passed, failed FROM chart where exam_no = '$exam_no';"); 

     if($query->num_rows() > 0){ 
      return $query->result(); 
     } 

     else{ 
      return false; 
     } 
    } 

視圖（片段）：

<?php 
    if($exams != NULL){ 
    foreach($exams as $row){ 
    echo '<tr>'; 
    echo '<td>'.$row->course_code.' '.$row->section.'</td>'; 
    echo '<td>'.$row->exam_desc.'</td>'; 
    echo '<td>'.$row->exam_date.'</td>'; 
    echo '<td>'.$row->duration.'</td>'; 
    echo '<td>'.$row->total_items.'</td>'; 
    echo '<td>'.$row->total_score.'</td>'; 
    echo '<td> <div class="btn-group"> <a class="btn btn-success" onclick = "editExam('.$row->exam_no.')"><i class="icon_pencil-edit"></i></a> <a class="btn btn-danger" onclick = "deleteExam('.$row->exam_no.')"><i class="icon_close_alt2"></i></a> <a class="btn btn-primary" onclick="addExamKey('.$row->exam_no.')"><i class="icon_cloud-download"></i></a> <a class="btn btn-default" role="button" onclick = "viewExamResult('.$row->exam_no.')"> View Result </a> </div> </td>'; 
    echo '</tr>'; 
      }      
     } 
?> 
    <script language="javascript"> 
     function viewExamResult($exam_no){ 
      $("#main-content").load("loadViewExamResult/" +$exam_no +"/").hide(500).fadeIn(); 
     } 

    </script> 

這裏是已經在引導模板中的chart.js文件，您只需根據您的數據對其進行自定義。我已經編輯過它，並且我認爲我在JSON部分存在問題，這就是爲什麼餅圖沒有顯示。有人可以幫我弄這個嗎？我其實對JSON和javascript知之甚少。請幫幫我。

chart.js之

$(document).ready(function() { 

var numpassed =[]; 
var numfailed =[]; 

$.post("<?php echo base_url(). ;?>", 
    function(data){ 

     var obj = JSON.parse(data); 
     $.each(obj,function(i,item){ 
      numpassed.push(item.passed); 
      numfailed.push(item.failed); 
     }); 

     var doughnutData = [ 
      { 
       value: numpassed, 
       color:"#F7464A" 
      }, 
      { 
       value : numfailed, 
       color : "#46BFBD" 
      }, 

     ]; 
    }); 

new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData); 

}); 

Answer 1

現在你想無需等待您的文章調用返回的數據來創建圖表。將圖表創建代碼移動到$ .post回調中，如下所示：

$.post("<?php echo base_url(). ;?>", 
function(data){ 

    var obj = JSON.parse(data); 
    $.each(obj,function(i,item){ 
     numpassed.push(item.passed); 
     numfailed.push(item.failed); 
    }); 

    var doughnutData = [ 
     { 
      value: numpassed, 
      color:"#F7464A" 
     }, 
     { 
      value : numfailed, 
      color : "#46BFBD" 
     }, 

    ]; 

    new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData); 
});