Question

我正在尝试使用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]]

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

Answer 1

您实际上无需将数据格式设置为适合图表...

如果使用D3，您可以轻松制作自定义数据格式的匿名函数。

您可以使用D3，并基于svg绘制图形和悬停线，您可以添加其他图形组件进行交互，例如滑块选择子区间放大，更改标签等。

以此为例进行开发： http://mpf.vis.ywng.cloudbees.net/

（你可以拖动黄色栏，点击图例;对于源代码，点击github上的fork me）

Answer 2

好的，发现它......代码中隐藏着一些细节，像往常一样。

为了将来参考，functionMakePair函数应该是这样的（请注意将=＆gt;更改为逗号）：

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

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

使用flot绘制图形，不接受数据类型

2 个答案: