如何在Highcharts中显示数组中的数组? [JS]

时间:2017-06-05 05:42:37

标签: javascript arrays highcharts

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

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

我的问题是,如何在Highcharts上显示这些数据?每个数组的第一个元素是X轴的日期,并且只希望每个数组的最后一个数据为Y轴。如何为Highcharts选择这两个元素?

2 个答案:

答案 0 :(得分:1)

高图中的每个图表都以不同的方式接受数据。创建两个单独的数组 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)

答案 1 :(得分:1)

来自服务器的数据应包含以毫秒为单位的日期(对于highcharts)。因此,您的数据必须类似

{
  path: '/authentication', // the authentication service path
  header: 'Authorization', // the header to use when using JWT auth
  **entity: 'user', // the entity that will be added to the request, socket, and hook.params. (ie. req.user, socket.user, hook.params.user)**
  service: 'users', // the service to look up the entity
  passReqToCallback: true, // whether the request object should be passed to the strategies `verify` function
  session: false, // whether to use sessions
  cookie: {
    enabled: false, // whether the cookie should be enabled
    name: 'feathers-jwt', // the cookie name
    httpOnly: false, // whether the cookie should not be available to client side JavaScript
    secure: true // whether cookies should only be available over HTTPS
  },
  jwt: {
    header: { typ: 'access' }, // by default is an access token but can be any type
    audience: 'https://yourdomain.com', // The resource server where the token is processed
    subject: 'anonymous', // Typically the entity id associated with the JWT
    issuer: 'feathers', // The issuing server, application or resource
    algorithm: 'HS256', // the algorithm to use
    expiresIn: '1d' // the access token expiry
  }
}

演示代码



  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
  }]
});
&#13;
&#13;
&#13;