new Date() 不适用于 canvasjs 和 rangeBar

Question

我尝试从 PHP 代码中读取一些 AJAX json 格式的数据。

.../...
    $data[]     = array("label" => $my_label, "y" => array("new Date($yci,$mci,$dci,$hci,$ici)","new Date($yco,$mco,$dco,$hco,$ico)"));
}

return json_encode($data, JSON_NUMERIC_CHECK);

侧边JS

var chart = new CanvasJS.Chart("timeline", {
    title: {
        text: "How long an event occurred for on a given day"
    },
    axisY: {
        minimum: (new Date(2017, 5, 1, 00, 01)).getTime(),            
        interval: (24 * 60 * 60 * 1000 * 7 ),
        labelFormatter: function(e){
        return CanvasJS.formatDate(e.value, "MM/DD");
        },
        gridThickness: 1
    },

    toolTip:{
        contentFormatter: function ( e ) {
        return "<strong>" + e.entries[0].dataPoint.label + "</strong></br> Start: " +  CanvasJS.formatDate(e.entries[0].dataPoint.y[0], "DD - h:mm TT") + "</br>End : " + CanvasJS.formatDate(e.entries[0].dataPoint.y[1], "DD - h:mm TT");  
    }},

    data: [
    {
      type: "rangeBar",
    dataPoints: JSON.parse(json.message),
    }
    ]                      
});
chart.render();

}

问题是，无法显示数据。 我认为新日期的格式不正确。

[
{
    "label":"Room 200",
    "y":
         [
            "new Date(2017,5,06,14,20)",
            "new Date(2017,5,08,14,20)"
         ]
 },
 {
    "label":"Room 200",
    "y":
        [
            "new Date(2017,5,08,14,21)",
            "new Date(2017,5,10,14,21)"
        ]
},
{
    "label":"Room 201",
    "y":
        [
            "new Date(2017,5,11,15,59)",
            "new Date(2017,5,13,15,59)"
        ]
}
]

另外，canvasjs 示例中的 new date() 有点奇怪，在每个代码的末尾，都有这样的 .getTime()：new date().getTime()

http://jsfiddle.net/canvasjs/xqgja576/

你能帮帮我吗？

Answer 1

您在数组中提供的 y 值是字符串（“new Date(2017,5,06,14,20)”）。要将此 y 值评估为日期，您可以使用 eval 函数。此外，CanvasJS 不支持 yAxis 上的 dateTime。作为一种解决方法，您可以调用 getTime() 来获取它的时间戳并将其设置为 y 值。

for (var i = 0; i < dataPoints.length; i++) {
  for (var j = 0; j < dataPoints[i].y.length; j++) {
    y = eval(dataPoints[i].y[j]);
    //if(y.getTime)
    dataPoints[i].y[j] = y.getTime();
  }
}

这是一个jsfiddle，其中包含您的代码和更改。

Answer 2

您应该只将来自后端的日期作为 UTC 时间戳传递，因此，您不需要任何客户端转换：

$start = new \DateTime("$yci/$mci/$dci $hci:$ici", new \DateTimeZone("UTC"));
$end = new \DateTime("$yco/$mco/$dco $hco:$ico", new \DateTimeZone("UTC"));
$data[] = array(
    "label" => $my_label, 
    "y" => array(
        // don't forget for '*1000 part' to convert
        // from unix timestamp (seconds) to UTC timestamp (milliseconds)
        $start->getTimestamp() * 1000,
        $end->getTimestamp() * 1000,
     ),
);

此外，您需要根据您的代码考虑正确的 DateTime 对象初始化（也许，您的代码中的某个位置已经有日期时间对象，为了方便起见，只是将它们解构为 $yci, $mci, $dci, $hci, $ici 变量）。您可以使用 this 手册页作为参考。