如何使用json数据绘制图形

时间:2015-12-30 18:15:52

标签: json chart.js

在我的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); 

 }

1 个答案:

答案 0 :(得分: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
        }
    ]
}