如何使用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
        }
    ]
}