Question

我正在尝试使用db进行一些数据可视化。

起初我使用了morris.js，它与我的数据配合得很好。我会在之后解释更多。我现在正在尝试使用d3.js，因为我必须创建水平堆叠条形图，多个图表线条等等...

这是我的表：http://d.pr/i/ooDN （我没有10个声誉，我无法发布我的照片）

我必须在图表上绘制5条不同的线条。 “Heure”是x轴，其他列是不同的线。

使用morris，我的数据就像这样（在.php [{"x":"1","a":"34","b":"15","c":"49","d":"15","e":"3"},末尾的JSON中的r_print {"x":"2","a":"36","b":"13","c":"49","d":"12","e":"2"}, … ]

其中x是时间数据（和x轴，a-e字母是每小时的其他线点。）

但是对于d3.js，那些数组不再起作用了，我必须改变我的php来获得这样的东西：

[{"x": 1, "y": 5}, { "x": 2, "y": 20}, { "x": 3, "y": 10}, … , { "x": 23, "y": 60}]

[{"x": 1, "y": 13}, { "x": 2, "y": 14}, { "x": 3, "y": 5}, … , { "x": 23, "y": 48}]

每一行都是不同的列。

这是我的php：

<?php include 'connexion.php' ?>

<?php
////////////////// out_evo_tat   
$requete = $db->prepare('SELECT * FROM out_evo_tat');
$requete->execute();

while($row = $requete->fetch()) { 

    // $tableau[]=array('x'=>$row['Heure'],'a'=>$row['TAT_CHAINE'],'b'=>$row['TAT_PREA'],'c'=>$row['TAT_GLOBAL'],'d'=>$row['NBR_TESTS'], 'e'=>$row['NBR_TUBES'] );
    // $tableau[]=array($row['Heure'],$row['TAT_CHAINE'],$row['TAT_PREA'],$row['TAT_GLOBAL'],$row['NBR_TESTS'], $row['NBR_TUBES'] );

    $tableau[]= array (
        array($row['Heure'],$row['TAT_CHAINE']),
        array($row['Heure'], $row['TAT_PREA']),
        array($row['Heure'], $row['TAT_GLOBAL']),
        array($row['Heure'], $row['NBR_TESTS']),
        array($row['Heure'], $row['NBR_TUBES'])
        );  
}

echo json_encode($tableau);

?>

如何修改上面的代码以获取可用于d3.js的内容？

我想我必须使用嵌套循环，但我自己无法解决它...

我试图以最简单的方式解释它，但我解释可能很难理解，所以不要犹豫再问我。

谢谢

Answer 1

我认为谷歌有很多API来创建图表...... 我找到了这个：Populating Data Using Server-Side Code

PS：我不是PHP程序员......我只知道一点点。

我认为它会对你有帮助......

Answer 2

如PHP代码中所示生成数组之后，以下内容使用该数组生成JSON字符串数组：

array_unshift($tableau, null);
$tableau = call_user_func_array('array_map', $tableau);
$json = array();
foreach ($tableau as $key => $val){
    $out = array();
    foreach ($val as $key2 => $val2){
        $item = new stdClass;
        $item->x = $val2[0];
        $item->y = $val2[1];
        $out[] = $item;
    }
    $json[] = json_encode($out);
}
print_r($json);

输出：

Array
(
    [0] => [{"x":0,"y":35},{"x":1,"y":34},{"x":2,"y":36},{"x":3,"y":35}]
    [1] => [{"x":0,"y":10},{"x":1,"y":15},{"x":2,"y":13},{"x":3,"y":15}]
    [2] => [{"x":0,"y":45},{"x":1,"y":49},{"x":2,"y":49},{"x":3,"y":50}]
    [3] => [{"x":0,"y":10},{"x":1,"y":15},{"x":2,"y":12},{"x":3,"y":5}]
    [4] => [{"x":0,"y":2},{"x":1,"y":3},{"x":2,"y":2},{"x":3,"y":1}]
)

复杂的嵌套循环

2 个答案: