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