[英]How to show php dynamic array data in c3js chart?
I have multidimensional array( $array
) like this, 我有这样的多维数组( $array
),
{
"2015-11-17": {
"department1":"0.5700",
"department3":"0.0000"
},
"2015-11-18": {
"department1":"0.5700"
},
"2015-11-20": {
"department1":"0.0000"
},
"2015-11-23": {
"department1":"1.7100",
"department2":"1.7100",
"department3":"2.8500",
}
.
.
.
}
This is a dynamic array and that data are get from database. 这是一个动态数组,数据从数据库中获取。 All data are exists in $array
variable. 所有数据都存在于$array
变量中。 The above data are more than that. 以上数据不止于此。 I just show a little, because the data are get from database. 我只显示一点,因为数据是从数据库获取的。
I want to show that data on c3js chart like this format, 我想在c3js图表上以这种格式显示数据,
json:[{
"date": "2015-11-17",
"department1": ""0.5700"",
"department2": "0.0000",
"department3": "0.0000",
"department4": "0.0000",
}],
And I need to show four department data for each date. 我需要显示每个日期的四个部门数据。
In the array, you can see some day have one or two department. 在阵列中,您可以看到某天有一个或两个部门。 I want to add all four department for each day when I change above json format to show in chart. 当我更改上面的json格式以显示在图表中时,我想每天添加所有四个部门。
For example, in 2015-11-17
, it has department1 and 3. I want to add next department2 and 4 with '0' in this day. 例如,在2015-11-17
,它的部门为1和3。我想在这一天添加下一个部门2和4与“ 0”。
I want to add another department for each day just like that. 我想每天增加一个部门。
When I try to change $array
to above format, I don't get the correct result. 当我尝试将$array
更改$array
上述格式时,我没有得到正确的结果。 Here is what I try, 这是我尝试的
<div id='chart'></div>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'date',
xFormat: '%Y-%m-%d',
json:[
<?php
for ($i = 0; $i < count($array); $i++) {
$key=key($array);
$val=$array[$key];
if ($val<> ' ') {
foreach ($val as $k=>$v) {
?>
{
'date':<?php echo $key?>,
<?php echo $k?> : <?php echo $v?>,
},
<?php
}
}
next($array);
}
?>],
},
legend: {
position: 'right',
},
line: {
width:0.5
},
axis: {
x: {
type: 'timeseries',
tick:{
format: '%Y-%m-%d',
rotate: 75,
},
label: {
text: 'Date',
position: 'outer-center'
}
}
},
grid: {
y: {
show:true,
}
},
});
</script>
So, now I have problem to show array data in chart. 所以,现在我有问题在图表中显示数组数据。 I'm very appreciate for any answer and suggestion. 非常感谢您的任何回答和建议。
Here is the sample of dynamic chart image of what I want, 这是我想要的动态图表图像的示例,
Kindly check the below code. 请检查以下代码。 Points to note: - $deptNames
= array of department names as shown in example output. 注意事项:- $deptNames
=部门名称数组,如示例输出所示。 - $dataArray
= is the array which comes from database directly - instead of echoing output you can save it to any variable and access accordingly. - $dataArray
=是直接来自数据库的数组-无需回显输出,您可以将其保存到任何变量并进行相应访问。
$deptNames = array('department1','department2','department3','department4');
$resultArray = array();
$index = 0;
foreach($dataArray as $date => $data) {
$resultArray[$index] = array();
if(is_array($data)) {
$dataDeptNames = array_keys($data);
$diff = array_diff($deptNames,$dataDeptNames);
if($diff && count($diff) > 0) {
foreach($diff as $notExistDept) {
$data[$notExistDept] = "0.0000";
}
}
$resultArray[$index] = $data;
$resultArray[$index]['date'] = $date;
ksort($resultArray[$index]);
}
$index++;
}
echo json_encode($resultArray);
It will give you output as: 它将为您提供以下输出:
[
{
"date":"2015-11-17",
"department1":"0.5700",
"department2":"0.0000",
"department3":"0.0000",
"department4":"0.0000"
},
{
"date":"2015-11-18",
"department1":"0.5700",
"department2":"0.0000",
"department3":"0.0000",
"department4":"0.0000"
},
{
"date":"2015-11-20",
"department1":"0.0000",
"department2":"0.0000",
"department3":"0.0000",
"department4":"0.0000"
},
{
"date":"2015-11-23",
"department1":"1.7100",
"department2":"1.7100",
"department3":"2.8500",
"department4":"0.0000"
}
]
Well if you get the array and is stored in a variable, then you can use this pure JS function to convert it to the format you need: 好吧,如果您获得数组并将其存储在变量中,则可以使用此纯JS函数将其转换为所需的格式:
var convertArr = function(x){
var y = [];
for (var k1 in x) {
if (x.hasOwnProperty(k1)) {
var obj = {};
obj['date'] = k1;
var tmp = [];
for (var k2 in x[k1]){
if (x[k1].hasOwnProperty(k2)){
tmp.push(k2[k2.length-1]);
obj[k2] = x[k1][k2];
}
}
var no = ["1","2","3","4"];
var tmpSet = new Set(tmp);
var noSet = new Set(no);
var diff = no.filter(function(z) { return !tmpSet.has(z); })
.concat(tmp.filter(function(z){ return !noSet.has(z); }));
for (var i = 0; i < diff.length; i++){
obj['department'+diff[i]] = '0.0000';
}
y.push(obj);
}
}
return y;
}
From there you can proceed. 从那里您可以继续。
Hope it helps. 希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.