2016-07-14 63 views
-1

在高圖表中我有一個數組如下, 但是,如果我嘗試通過返回數組的最高值來設置圖表的極值,它將顯示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/

誰能幫我解決這個問題?提前致謝!!

+0

你從哪裏得到'chartlength'? –

+0

你是什麼意思,由數組的最大值它有點模糊可以解釋多一點?最高值?或數組中的最後一個元素? – guradio

+0

@guradio對不起,我的意思是最高值 – Sarav

回答

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 
+0

首先非常感謝您的時間和這個很大的幫助!讓我在我的代碼中試試這段代碼,看看我能否實現我的場景:) – Sarav