1

我正在尝试使用 flot 绘制图表，但它坚持不绘制它。该图将是时间与值的关系，因此据此，Date 对象将转换为整数时间戳并与值映射。这是PHP代码：

$row_temp_data=array();
$row_time_data=array();
foreach($restfulData['rows'] as $row){
    array_push($row_time_data, strtotime($row['c']['0']['v'])*1000);
    array_push($row_temp_data, $row['c']['1']['v']);                
} 

$return_array = array_map("self::functionMakePair", $row_time_data, $row_temp_data);
// following render is for testing
$this->render('index', array('return_array'=>json_encode($return_array)));

创建该对的功能是：

function functionMakePair($pair_1, $pair_2)
{
    return (array($pair_1 => $pair_2));
}

这段代码在客户端为我提供了以下示例数据结构，它是 json_encode 之后的 $return_array：

[{"1375937439000":29},{"1375937472000":29},{"1375937506000":29},{"1375937539000":29},{"1375937573000":29}]

相应的 jquery 片段也在这里（不过这里没什么可怀疑的）：

$(function () {
    //jQuery Flot Chart     

    var plot = $.plot($("#statsChart"),
        [ { data: <?php echo $return_array?>, label: "Temperature" }], {
            series: {
                lines: { show: true,
                        lineWidth: 1,
                        fill: true, 
                        fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 } ] }
                     },
                points: { show: true, 
                         lineWidth: 2,
                         radius: 3
                     },
                shadowSize: 0,
                stack: true
            },
            grid: { hoverable: true, 
                   clickable: true, 
                   tickColor: "#f9f9f9",
                   borderWidth: 0
                },
            legend: {
                    // show: false
                    labelBoxBorderColor: "#fff"
                },  
            colors: ["#a7b5c5", "#30a0eb"],
            xaxis: {
                mode: "time",
                font: {
                    size: 12,
                    family: "Open Sans, Arial",
                    variant: "small-caps",
                    color: "#697695"
                }
            },
            yaxis: {
                font: {size:12, color: "#9da3a9"}
            }
         });
});

所以简而言之，我发现如果数据采用这种格式（逗号分隔且没有大括号），flot 只会绘制图表：

[["1375937439000",29],["1375937472000",29],["1375937506000",29],["1375937539000",29],["1375937573000",29]]

问题是如何以一种不错的方式将我的数据转换为这种格式？

4

2 回答 2

0

好的，找到了。像往常一样隐藏在代码中的小细节。

为了将来参考，functionMakePair函数应该是这样的（注意 => 到逗号的变化）：

function functionMakePair($pair_1, $pair_2)
{
    return (array($pair_1, $pair_2));
}

这样，数据格式将采用所需的数组格式。

于 2013-08-15T06:54:26.263 回答
0

You actually no need to turn the data format to fit the graph plot ...

If you use D3, you could easy make the anonymous functions that customized your data format.

You can use D3, and based on svg, to draw the graph and the hover line , you could add other graph component to interact as well such as a slider bar to select sub interval to enlarge, changing labels etc.

Take this as an example to develop: http://mpf.vis.ywng.cloudbees.net/

(you can drag the yellow bar, and click the legend; for source code, click fork me on github)

于 2013-08-14T14:44:09.703 回答