new Date () не работает с canvasjs & amp; rangeBar
Я попытался прочитать некоторые данные в формате AJAX JSON из кода PHP.
.../...
$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);
Side 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)"]
}
]
Кроме того, что-то странное с новым date () из примера canvasjs, в конце каждого кода есть .GetTime () как это : новая дата (). getTime ()
http://jsfiddle.net/canvasjs/xqgja576/
Не могли бы вы мне помочь?
Решение
Значения y, которые вы указали в массиве, являются строками («новая дата (2017,5,06,14,20)»). Чтобы оценить это значение y как дату, вы можете использовать функцию eval. Также CanvasJS не поддерживает dateTime поверх yAxis. В качестве обходного пути вы можете вызвать 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 с вашим кодом и изменениями.
Другие решения
Вы должны просто передавать даты из back-end как метки времени 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 переменные для удобства). Ты можешь использовать этот справочная страница в качестве ссылки.