Как отобразить массив в массиве на Highcharts? [JS]

Question

Как отобразить массив в массиве на Highcharts? [JS]

1

Я получаю данные, подобные этому с сервера:

data":[[1496640705,1583360,1583360,1583370,1583360],[1496640720,1583360,1583350,1583360,1583345],[1496640735,1583350,1583320,1583400,1583320]]

Мой вопрос: как я могу отображать эти данные в Highcharts? Каждый первый элемент массива является осью Date для оси X и только хочет получить последние данные для каждого массива для оси Y. Как я могу выбрать эти 2 элемента для Highcharts?

PREM1Z 05 июнь 2017, в 08:18

Источник

Теги:

javascript

arrays

highcharts

2 ответа

Ещё вопросы

brk · Answer 1 · 2017-06-05T04-30-00.000Z

Каждая диаграмма в 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)

Deep 3015 · Answer 2 · 2017-06-05T04-09-00.000Z

Ваши данные с сервера должны содержать дату в миллисекундах (для графиков). Так что ваши данные должны быть похожи

  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="/highcharts.js"></script>
<script src="/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>