如何在Highcharts上显示阵列数组？ [JS]

我从服务器获取这样的数据：如何在Highcharts上显示阵列数组？ [JS]

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

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

来源

2017-06-05 PREM1Z

欢迎来到SO。请访问[帮助]，看看我们更喜欢[mcve]，您可以使用<<>'片段编辑器添加 – mplungjan

作为对以前答案的补充，您应该能够使用当前的数据格式，并使用keys array来连接特定Highcharts参数的数组值：http://jsfiddle.net/hy7bywqh/ –

在highchart每个图表从数据阵列中不同way.Create两个单独的阵列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)

来源

2017-06-05 05:53:53 brk

从服务器上的数据应该包含毫秒格式日期（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>

来源

2017-06-05 07:07:22

如何在Highcharts上显示阵列数组？ [JS]

回答

相关问题