如何处理复杂数据结构列表 [英] How to process a list of complex data structures
本文介绍了如何处理复杂数据结构列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在高图表中，我有一个数组如下，
但是，如果我尝试通过返回数组的最高值来设置图表的极限，则显示NaN错误。
In High Charts i have an array as follows, But if i try to set extremes of the chart by returning the Highest value of the Array, its showing NaN Error.
function aoDashboardData() {
var data = [
{ type: "",
data: [{
x: 0.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 0.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 0.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 0.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 0.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 0.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 0.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
},
{
type: "",
data: [{
x: 1.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 1.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 1.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 1.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 1.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 1.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 1.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 1.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 1.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 1.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
},
{
type: "",
data: [{
x: 2.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 2.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 2.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 2.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 2.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 2.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 2.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 2.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 2.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 2.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
},
{
type: "",
data: [{
x: 3.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 3.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 3.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 3.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 3.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 3.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 3.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 3.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 3.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 3.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
},
{
type: "",
data: [{
x: 4.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 4.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 4.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 1.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 4.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 4.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 4.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 4.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 4.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 4.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
}
,
{
type: "",
data: [{
x: 5.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 5.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 5.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 5.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 5.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 5.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 5.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 5.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 5.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 5.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
}
,
{
type: "",
data: [{
x: 6.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 6.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 6.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 6.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 6.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 6.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 6.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 6.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 6.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 6.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
}
,
{
type: "",
data: [{
x: 7.0,
low: Date.UTC(2016, 2, 15),
high: Date.UTC(2016, 4, 10),
color: "#4B0081"
},
{
x: 7.0,
low: Date.UTC(2016, 4, 15),
high: Date.UTC(2016, 6, 15),
color: "#00BFFE"
},
{
x: 7.0,
low: Date.UTC(2016, 6, 20),
high: Date.UTC(2016, 8, 0),
color: "#0047AB"
},
{
x: 1.0,
low: Date.UTC(2016, 8, 5),
high: Date.UTC(2016, 10, 15),
color: "#4682B4"
},
{
x: 7.0,
low: Date.UTC(2016, 10, 20),
high: Date.UTC(2016, 12, 31),
color: "#008081"
}]
},
{
type: 'line',
data: [
{
x: 7.0,
y: Date.UTC(2016, 2, 15),
marker: {
symbol: 'url(/../Content/Img/monitor.png)',
}
},
{
x: 7.0,
y: Date.UTC(2016, 4, 10),
marker: {
symbol: 'url(/../Content/Img/optimise.png)',
}
},
{
x: 7.0,
y: Date.UTC(2016, 6, 15),
marker: {
symbol: 'url(/../Content/Img/pilot.png)',
}
},
{
x: 7.0,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/model.png)',
}
},
{
x: 7.0,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/deploy.png)',
}
}
]
}
]
return data;
}
我试图得到最大值是：
MinAssortmentValue = Math.min.apply(Math, chartlength);
这是更新的jsFiddle链接： http://jsfiddle.net/sarav4gs/jbmk9tb1/3/
Here is the updated jsFiddle link : http://jsfiddle.net/sarav4gs/jbmk9tb1/3/
任何人都可以帮我修理它？感谢提前!!
Can Anyone help me to fix it? Thanks in advance!!
推荐答案
...提到我的这个评论 - 如何检索数组的最高值 - 获得NaN错误 - 草绘的方法可能看起来像，即使我仍然不知道你将要比较和/或提取的图表项目的对象属性是什么。
... referring to this comment of mine - How to retrieve Array's Highest value - getting NaN error - the sketched approach might look like that, even though I still do not really know what are the object properties of a chart item you are going to compare and/or extract ...
var
chart = $('#ao-projectssummry-chart').highcharts(),
minMaxValues = chart.series.reduce(function (collector, item, idx/*, list*/) {
var
dataMin = item.dataMin,
dataMax = item.dataMax,
minValue = Math.min(collector.minValue, dataMin),
maxValue = Math.max(collector.maxValue, dataMax);
if (minValue == dataMin) {
collector.minValue = dataMin;
collector.minValueItemIndex = idx;
}
if (maxValue == dataMax) {
collector.maxValue = dataMax;
collector.maxValueItemIndex = idx;
}
return collector;
}, {
minValue: Number.POSITIVE_INFINITY,
maxValue: Number.NEGATIVE_INFINITY,
minValueItemIndex: -1,
maxValueItemIndex: -1
}),
minAssortmentValue = minMaxValues.minValue,
maxAssortmentValue = minMaxValues.maxValue;
console.log("minMaxValues : ", minMaxValues);
console.log("minAssortmentValue, maxAssortmentValue : ", minAssortmentValue, maxAssortmentValue);
将刚提供的代码粘贴到您提供的小提琴的控制台中会导致以下输出： p>
Pasting the just provided code snipped into the console of your provided fiddle does cause the following output:
minMaxValues : Object {
minValue: 1458000000000,
maxValue: 1485820800000,
minValueItemIndex: 9,
maxValueItemIndex: 14
}
minAssortmentValue, maxAssortmentValue : 1458000000000 1485820800000
这篇关于如何处理复杂数据结构列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
