在我的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);
}
答案 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
}
]
}