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

时间:2016-02-01 05:08:37

标签: javascript php arrays c3.js

我有像这样的多维数组($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和3.我想在当天添加下一个部门2和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>

所以,现在我有问题在图表中显示数组数据。我非常感谢任何答案和建议。

以下是我想要的动态图表图像示例sample chart

2 个答案:

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

答案 1 :(得分:1)

如果您获得数组并存储在变量中,那么您可以使用此纯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;
}

从那里你可以继续。

希望它有所帮助。