Я получаю данные, подобные этому с сервера:
data":[[1496640705,1583360,1583360,1583370,1583360],[1496640720,1583360,1583350,1583360,1583345],[1496640735,1583350,1583320,1583400,1583320]]
Мой вопрос: как я могу отображать эти данные в Highcharts? Каждый первый элемент массива является осью Date для оси X и только хочет получить последние данные для каждого массива для оси Y. Как я могу выбрать эти 2 элемента для Highcharts?
Каждая диаграмма в highchart принимает данные по-разному. Создайте два отдельных массива xAxis & yAxis из массива данных и укажите их значение для highchart.
var data = [
[1496640705, 1583360, 1583360, 1583370, 1583360],
[1496640720, 1583360, 1583350, 1583360, 1583345],
[1496640735, 1583350, 1583320, 1583400, 1583320]
],
xAxis = [],
yAxis = [];
data.forEach(function(item) {
xAxis.push(item[0]);
yAxis.push(item[item.length - 1])
})
console.log(xAxis, yAxis)
Ваши данные с сервера должны содержать дату в миллисекундах (для графиков). Так что ваши данные должны быть похожи
var data = [
[1496640705000, 1583360, 1583360, 1583370, 1583360],
[1496640720000, 1583360, 1583350, 1583360, 1583345],
[1496640735000, 1583350, 1583320, 1583400, 1583320]
],
//For highcharts data should be formatted as [[x,y],[x,y],...]
seresData=[]
data.forEach(function(item) {
seresData.push([item[0],item[item.length - 1]])
})
console.log(seresData)
Демо-код
var data = [
[1496640705000, 1583360, 1583360, 1583370, 1583360],
[1496640720000, 1583360, 1583350, 1583360, 1583345],
[1496640735000, 1583350, 1583320, 1583400, 1583320]
],
seresData = []
data.forEach(function(item) {
seresData.push([item[0], item[item.length - 1]])
})
//console.log(seresData)
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2012-2013',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: seresData
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>