У меня есть диаграмма с высоким графиком, которая динамически обновляется. Я добавляю значения в серию, используя функцию "Добавить" в серии. Вот как я инициализирую диаграмму.
var _trendToolChart = null;
var _trendSeries = null;
function createTrendTool() {
_trendToolChart = Highcharts.chart('trendToolContainer', {
chart: {
type: 'spline',
zoomType: 'x',
panning: true,
panKey: 'shift'
},
title: {
text: 'Trending Signals'
},
yAxis: {
title: {
text: 'Values'
}
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: true
}
}
},
responsive: {
rules: [{
condition: {
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
_trendToolChart.showLoading("Loading...");
}
Я сохраняю переменную _trendToolChart в качестве глобальной ссылки позже. На регулярной основе я запрашиваю наш API для получения значения. Возврат значения представляет собой значение x значения datetime и ay десятичного числа. Поскольку у меня многострочная серия, у меня есть WebId, связанный с каждой строкой на самой диаграмме. Я нахожу серию этого GUID, а затем добавляю точку в серию.
Здесь внутри функции, когда я вызываю ее на второй:
var xValue = Date.UTC(apiResponse.DateString); // convert str to date
var yValue = apiResponse.Value; // decimal value
var point = [xValue, yValue];
// add to series & graph
var chartSeries = $.grep(_trendToolChart.series, function (e) { return e.userOptions.WebId == apiResponse.elemId; })[0];
chartSeries.addPoint(point);
_trendToolChart.redraw();
Когда я добавляю эти значения в диаграмму, highcharts вместо этого добавляет значение x как целое число, а не как дату. Здесь проверка внутри функции ответа на стороне разработчика Chrome:
Поэтому вместо серии ["11/27/2017", 22] я получаю [0, 22] в моих значениях x. И это показывает на моей диаграмме, мои метки xaxis имеют "0" или 1, а не дату.
Здесь я попытался вместо addPoint ([Дата, число]); я сделал addPoint ({x: Date, y: number}); Теперь, показанный в точках на highchart серии с датой, но затем на моей диаграмме визуально я увидел, ZERO точки добавлены после перерисовки.
Что я делаю неправильно?
Хорошо, кажется, что объект, помещенный в значение x, не был датой, несмотря на то, что кажется. Это была строка. Таким образом, это возвращает строку:
Date("2017-11-27")
В результате, highcharts не знал, как интерпретировать это как дату и время, так как я сказал ему делать datetime в опциях. Решением было следующее:
moment("2017-11-27").ToDate()
Это вернуло надлежащий объект даты, и высокопроизводительные диаграммы смогли интерпретировать.