在 PHP 中为 JSON Ajax 响应动态构建 ChartJs 数据集

Question

我在PHP中构建JSON时遇到问题，作为对Ajax call的响应，用于填充ChartsJs的动态数据集。

在PHP我返回了适用于 1 个 ChartJs 数据集Ajax调用：

<?php
$returnData['line'] = array(
'type' => 'line',
'title' => $title,
'labels' => array('Jan','Feb','March','April','Mai'),
'datasets' => array(
array(
'data' => array(10,20,15,45,21),
'borderColor' => "#f7464a",
'label' => "Label 1",
'fill' => false
)
)
);
echo json_encode($returnData);
?>

构建图表的JavaScript：

$.ajax({
url: "div.php",
type: "POST",
dataType: 'json',
success: function(rtnData) {
$.each(rtnData, function(dataType, data) {
var ctx = document.getElementById("myChart").getContext("2d");
var config = {
type: data.type,
data: {
datasets: data.datasets,
labels: data.labels
},
options:  {
responsive: true,
title: {
display: true,
text: data.title
},
legend: {
display: true,
position: 'right',
labels: {
fontColor: '#333'
}
}
}
};
window.myPie = new Chart(ctx, config);
});
},
error: function(rtnData) {
alert('error' + rtnData);
}

});

现在我的问题，当我有 5 个或更多Datasets的数据时：

//Data  
$title = "MyTitle";
$labels= array('Jan','Feb','March','April','Mai');
//Datasets
$linelabels= array('Line1','Line2','Line3','Line4','Line5');
$mydata1 = array(10,20,15,45,21);
$mydata2 = array(21,45,15,20,10);
$mydata3 = array(10,20,15,45,21);
$mydata4 = array(21,45,15,20,10);
$mydata5 = array(10,20,15,45,21);
$colors = array("#f7464a","#8e5ea2","#f7464a","#8e5ea2","#f7464a");

如何在JSON响应中动态构建这些Datasets？例如：

'datasets' => array(
for(i=0:i<5;i++)
{
array(
'data' => array($mydata1[i]),
'borderColor' => $colors[i],
'label' => $linelabels[i],
'fill' => false
),
}
)

Answer 1

解决了。要为 Charts 创建动态 Json for Ajax 响应，也许可以帮助某人：

$returnData2['line'] = array(
'type' => 'line',
'title' => 'my Title',
'labels' => array('Jan','Feb','March','April','Mai'),
'datasets' => array(
array(
'data' => array(10,20,15,45,21),
'borderColor' => "#f7464a",
'label' => "Label 1",
'fill' => false
),
array(
'data' => array(21,45,15,20,10),
'borderColor' => "#8e5ea2",
'label' => 'Line2',
'fill' => false
),
array
(
'data' => array(10,20,15,45,21),
'borderColor' => "#f7464a",
'label' => 'Line3',
'fill' => false
),
array
(
'data' => array(21,45,15,20,10),
'borderColor' => "#8e5ea2",
'label' => 'Line4',
'fill' => false
),
array(
'data' => array(10,20,15,45,21),
'borderColor' => "#f7464a",
'label' => 'Line5',
'fill' => false
)
)
);
echo json_encode($returnData2);

我使用了这个结构，我承认这不是最好的方法，但它有效。 :)

$title = "MyTitle";
$labels= array('Jan','Feb','March','April','Mai');
$linelabels= array('Line1','Line2','Line3','Line4','Line5');
$mydata1 = array(10,20,15,45,21);
$mydata2 = array(21,45,15,20,10);
$mydata3 = array(35,24,20,18,11);
$mydata4 = array(18,5,34,17,42);
$mydata5 = array(23,17,34,12,45);
$colors = array("#E74C3C","#76448A","#148F77","#D4AC0D","#1ABC9C");

$returnData = new stdClass();
$returnData->line = new stdClass();
$returnData->line->type = 'line';
$returnData->line->title = 'my Title';
$returnData->line->labels = $labels;
$returnData->line->datasets = new stdClass();
$dataset = array();
for($i=0;$i<5;$i++)
{
$mydata = array();
if($i==0)
$mydata = $mydata1;
else if($i==1)
$mydata = $mydata2;
else if($i==2)
$mydata = $mydata3;
else if($i==3)
$mydata = $mydata4;
else if($i==4)
$mydata = $mydata5;
$datasets = new stdClass();
$datasets->data = $mydata;
$datasets->borderColor = $colors[$i];
$datasets->label = $linelabels[$i];
$datasets->fill = false;
$dataset[] = $datasets;
}
$returnData->line->datasets = $dataset;
echo json_encode($returnData);

Ajax 对膨胀图表的响应：

$.ajax({
url: "div.php",
type: "POST",
dataType: 'json',
success: function(rtnData) {
$.each(rtnData, function(dataType, data) {
var ctx = document.getElementById("myChart").getContext("2d");
var config = {
type: data.type,
data: {
datasets: data.datasets,
labels: data.labels
},
options:  {
responsive: true,
title: {
display: true,
text: data.title
},
legend: {
display: true,
position: 'right',
labels: {
fontColor: '#333'
}
}
}
};
window.myPie = new Chart(ctx, config);
});
},
error: function(rtnData) {
alert('error' + rtnData);
}

});

画布中的结果：

在此处输入图像描述