如何在 c3js 图表中显示 php 动态数组数据？

Question

我有这样的多维数组($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",
              }
  .
  .
  .
}

这是一个动态数组，数据是从数据库中获取的。所有数据都存在于 $array 变量中。以上数据不止于此。我只是展示一点，因为数据是从数据库中获取的。

我想在 c3js 图表上显示这种格式的数据，

json:[{
            "date": "2015-11-17",
            "department1": ""0.5700"",
            "department2": "0.0000",
            "department3": "0.0000",
            "department4": "0.0000",
        }],

我需要为每个日期显示四个部门数据。

在数组中，你可以看到某一天有一个或两个部门。当我更改上述 json 格式以在图表中显示时，我想每天添加所有四个部门。

比如在2015-11-17里面有department1和department 3，我想在这天加上下一个department2和4带'0'。

我想像那样每天添加一个部门。

当我尝试将 $array 更改为上述格式时，我没有得到正确的结果。这是我的尝试，

<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>

所以，现在我在图表中显示数组数据时遇到了问题。我非常感谢任何回答和建议。

这是我想要的动态图表图片示例，

Answer 1

请检查以下代码。注意事项： - $deptNames = 部门名称数组，如示例输出所示。 - $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);

它会给你输出：

[  
   {  
      "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"
   }
]

Answer 2

好吧，如果你得到数组并存储在一个变量中，那么你可以使用这个纯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;
}

您可以从那里继续。

希望对您有所帮助。

如何在 c3js 图表中显示 php 动态数组数据？

How to show php dynamic array data in c3js chart?

javascript

php

arrays

c3.js