如何处理复杂数据结构列表

时间：2016-07-14 07:23:38

标签： javascript arrays data-structures highcharts mapreduce

在High Charts中我有一个如下数组， 但是，如果我尝试通过返回数组的最高值来设置图表的极值，则显示NaN错误。

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/

有人可以帮我解决吗？在此先感谢!!

1 个答案:

答案 0 :(得分：2)

...引用我的这个评论 - How to process a list of complex data structures - 草绘的方法可能看起来像那样，即使我仍然不知道你要比较的图表项的对象属性是什么/或提取...... 

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);

将刚刚提供的代码粘贴到您提供的小提琴的控制台中会导致以下输出：

minMaxValues :  Object {
    minValue: 1458000000000,
    maxValue: 1485820800000,
    minValueItemIndex: 9,
    maxValueItemIndex: 14
}
minAssortmentValue, maxAssortmentValue :  1458000000000 1485820800000
相关问题
最新问题