如何使用JSON數據的陰謀圖

Question

在我的JSON我有三列數據繪製圖。其實數據就在json上。但我無法繪製圖表。 std_name，student_count，ab_count是要繪製的三列。現在我想將它繪製在一張圖上。我嘗試過但我無法做到。你可以幫我嗎？

function yes_chart() 
{    

    $.ajax({ 
     url:"<? echo base_url();?>Attendance/pre_chart", 
     dataType: 'json',  
     success:function(data) { 

      // alert(data.chart_name); will give 'X1','X2','X3',..' 
      var Day = { 
       labels : [data.chart_name], 
       datasets : [ 
       { 
        fillColor : "rgba(172,194,132,0.4)", 
        strokeColor : "#ACC26D", 
        pointColor : "#fff", 
        pointStrokeColor : "#9DB86D", 
        data : [data.chart_abcount] 
       }, 
       { 
        fillColor : "rgba(151,187,205,0.5)", 
        strokeColor : "rgba(151,187,205,0.8)", 
        highlightFill : "rgba(151,187,205,0.75)", 
        highlightStroke : "rgba(151,187,205,1)", 
        data : [data.chart_count] 
       } 
       ] 
      }        
      var buyers = document.getElementById('lineChart').getContext('2d'); 
      new Chart(buyers).Bar(Day, {responsive : true}); 

     }  
    }); 


} 

<div class="chart tab-pane active" id="barChartDiv"> 
              <canvas id="lineChart" height="200"></canvas> 
             </div> 

控制器

function pre_chart() 
    { 
    $chart_prev= $this->AM->chart_Disp_prev(); 
    $name=''; 
    $count=''; 
    $ab_count=''; 
    foreach ($chart_prev as $row) 
    { 
     $name=$name."'".$row['std_name']."'," ; 
     $count=$count."'".$row['student_count']."'," ; 
     $ab_count=$ab_count."'".$row['student_count']."'," ; 

    } 
    $name = substr($name,0,strlen($name)-1); 
    $count = substr($count,0,strlen($count)-1); 
    $ab_count = substr($ab_count,0,strlen($ab_count)-1); 
    $out = array(
    'chart_name'=>$name, 
    'chart_count'=>$count, 
    'chart_abcount'=>$ab_count 
    ); 
    echo json_encode($out); 

} 

Answer 1

假設你的JSON是按以下格式

{ 
    chart_data: [ 
     { 
      std_name: ..., 
      student_count: ..., 
      ab_count: ... 
     }, 
     { 
      std_name: ..., 
      student_count: ..., 
      ab_count: ... 
     } 
    ] 
} 

您需要構建您的圖表數據對象，像這樣

var labelX = []; 
var bar1 = []; 
var bar2 = [];   
$.ajax({ 
    url:"<? echo base_url();?>Attendance/pre_chart", 
    dataType: 'json',  
    success:function(data) { 

     for (var i = 0; i < data.chart_data.length; i++) { 
      labelX.push(data.chart_data[i]["std_name"]); 
      bar2.push(data.chart_data[i]["student_count"]); 
      bar1.push(data.chart_data[i]["ab_count"]); 
     } 

    } 
}); 

終於（請注意，我刪除我們剛剛構造的對象周圍的括號）

var Day = { 
    labels: labelX, 
    datasets: [ 
     { 
      fillColor: "rgba(172,194,132,0.4)", 
      strokeColor: "#ACC26D", 
      pointColor: "#fff", 
      pointStrokeColor: "#9DB86D", 
      data: bar1 
     }, 
     { 
      fillColor: "rgba(151,187,205,0.5)", 
      strokeColor: "rgba(151,187,205,0.8)", 
      highlightFill: "rgba(151,187,205,0.75)", 
      highlightStroke: "rgba(151,187,205,1)", 
      data: bar2 
     } 
    ] 
}