如何在Highcharts上显示数组中的数组？ [JS]答案

【问题标题】：How to display array in array on Highcharts? [JS]如何在Highcharts上显示数组中的数组？ [JS]
【发布时间】：2017-11-05 20:08:30
【问题描述】：

我从服务器获取这样的数据：

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

我的问题是，如何在 Highcharts 上显示这些数据？每个数组的第一个元素是 X 轴的日期，并且只需要 Y 轴的每个数组的最后一个数据。如何为 Highcharts 选择这 2 个元素？

【问题讨论】：

欢迎来到 SO。请访问help center，查看我们更喜欢minimal reproducible example，您可以使用<> sn-p 编辑器添加它
作为对先前答案的补充，您应该能够使用当前的数据格式并使用键数组将数组中的特定值与 Highcharts 参数连接起来：jsfiddle.net/hy7bywqh

标签： javascript arrays highcharts

【解决方案1】：

highchart 中的每个图表都以不同的方式接受数据。从 data 数组创建两个单独的数组 xAxis 和 yAxis 并将它们的值提供给高图。

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)

【讨论】：

【解决方案2】：

您来自服务器的数据应包含毫秒格式的日期（对于 highcharts）。所以您的数据必须像

  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>

【讨论】：