Highcharts с новыми данными из jSON не работает
Я успешно внедрил Highcharts, который работает очень хорошо. Мои высокие графики получают живые данные каждую 1 минуту и добавляют очки, что делает, как ожидалось. Но у меня есть определенная проблема, например, у моих старших карт две серии. Первая - серия линейных типов, а вторая - серия игровых площадок. Первая серия всегда будет получать только 2 балла, а вторая - более 200. Как я уже говорил, мои данные в режиме реального времени, данные начинают поступать в 7 часов утра только для линейных и пустых данных для области до 9 часов утра, а точнее в 9 часов утра, новые данные будут поступать каждые 1 минуту до 12.30 часов, но что происходит в 9 часов утра моего графика идет остановка и даже на новый следующий день 7 утра мой график остановится
Но если я обновлю свой браузер, я получу новые данные, и он начнет работать так, как нам нужно.
Мой код следующим образом
$(function () {
$('#container').highcharts({
credits: {
enabled: 0
},
title: {
text: null
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M'
},
max: <%= MilliTimeStamp(_closingTime) %> ,
min: <%= MilliTimeStamp(_openingTime) %> ,
tickInterval: 0.5 * 3600 * 1000,
minorTickInterval: 0.1 * 3600 * 1000,
title: {
text: null
},
lineWidth: 1,
minorGridLineWidth: 1,
endOnTick: true,
showLastLabel: true,
gridLineWidth: 1,
labels: {
style: {
font: '7.5pt Trebuchet MS'
}
},
reversed: <%= isArabic %> // true for arabic layout and false for english layout
},
yAxis: {
title: {
text: null
},
max: <%= maxY %> ,
min: <%= minY %> ,
endOnTick: true,
showLastLabel: true,
labels: {
style: {
font: '7.5pt Trebuchet MS'
}
},
opposite: <%= isArabic %> // true for arabic layout and false for english layout
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
line: {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
tooltip: {
formatter: function () {
return '<span style="font-size:7.5pt;">' + Highcharts.dateFormat('%A, %e %B, %H:%M', this.points[0].x) + '</span><br><span style="color:' + this.points[0].series.color + ';">' + this.points[0].series.name + '</span>: <b>' + Highcharts.numberFormat(this.points[0].y, 0) + '</b>';
},
useHTML: true,
shared: true
},
series: [{
type: 'area',
data: []
}, {
type: 'line',
color: 'Red',
data: []
}]
});
<%
if (isArabic == "true") { %> Highcharts.setOptions({
lang: {
months: <%= months %> ,
weekdays: <%= days %>
}
}); <%
} %>
$.ajaxSetup({
cache: false
});
recieveData();
});
function recieveData() {
var pathArray = window.location.pathname.split('/');
var chart = $('#container').highcharts();
$.ajax({
url: '/' + pathArray[1] + '/HomePageChartData.aspx',
dataType: 'json',
cache: false,
data: {
'time': new Date().getSeconds()
},
success: function (data) {
chart.yAxis[0].setExtremes(data.minY, data.maxY, true, true);
chart.series[1].setData([]);
chart.series[1].name = data.lineSeriesName;
chart.series[0].setData([]);
chart.series[0].name = data.areaSeriesName;
for (var x in data.lineSeriesData) {
chart.series[1].addPoint([data.lineSeriesData[x][0], data.lineSeriesData[x][1]]);
}
for (var x in data.areaSeriesData) {
chart.series[0].addPoint([data.areaSeriesData[x][0], data.areaSeriesData[x][1]]);
}
setTimeout(recieveData, 60000);
}
}
});
}
мои данные JSON в 7 часов утра
{"maxX":"1367843400000","minX":"1367830800000","maxY":"7912","minY":"7511","tickIntervalY":"80","lineSeriesName":"Open","areaSeriesName":"Price Index","lineSeriesData":[[1367830800000,7715.35],[1367843400000,7715.35]],"areaSeriesData":[]}
мои данные JSON после 9 утра
{"maxX":"1367843400000","minX":"1367830800000","maxY":"7912","minY":"7511","tickIntervalY":"80","lineSeriesName":"Open","areaSeriesName":"Price Index","lineSeriesData":[[1367830800000,7715.35],[1367843400000,7715.35]],"areaSeriesData":[[1367830831000,7740.01],[1367830897000,7735.61]]}
И он начнет получать новые данные в areaSeriesData каждые 1 минуту
@@Обновить
Я обнаружил проблему, заключающуюся в том, что в 7 и 9 часов утра я не получал данные, получал пустую строку, поэтому возникла ошибка, которой я не занимался, теперь я изменяю ее, как показано ниже, и начинаю удалять серии, но теперь не получаю серия для строки в 7 утра, которые имеют данные. Может кто-нибудь сказать мне, что я пропускаю или делаю неправильно здесь.
function recieveData() {
var pathArray = window.location.pathname.split( '/' );
var chart = $('#container').highcharts();
$.ajax({
url: '/' + pathArray[1] + '/_layouts/KSE.SharePoint/HomePageChartData.aspx',
dataType: 'json',
cache: false,
data:{'time': new Date().getSeconds() },
success: function (data) {
chart.yAxis[0].setExtremes(data.minY, data.maxY, true, true);
chart.series[1].setData([]);
chart.series[1].name = data.lineSeriesName;
chart.series[0].setData([]);
chart.series[0].name = data.areaSeriesName;
for (var x in data.lineSeriesData) {
chart.series[1].addPoint([data.lineSeriesData[x][0], data.lineSeriesData[x][1]]);
}
for (var x in data.areaSeriesData) {
chart.series[0].addPoint([data.areaSeriesData[x][0], data.areaSeriesData[x][1]]);
}
setTimeout(recieveData, 60000);
},
error: function() {
setTimeout(recieveData, 60000);
}
});
}
1 ответ
Вы должны проанализировать свой JSON, чтобы подготовить отдельные данные для ряда. Более того, вам нужно использовать данные, а не "lineSeriesData" или "areaSeriesData". Так должно выглядеть так:
[{data: [[1367830800000, 7715.35], [1367843400000, 7715.35]]}, {data: [[1367830831000, 7740.01], [1367830897000, 7735.61]]}]