2016-07-14 10 views
-1

In High Charts habe ich ein Array wie folgt, Aber wenn ich versuche, Extreme des Diagramms durch die Rückgabe des höchsten Werts des Array, zeigt es NaN Error.So bearbeiten Sie eine Liste komplexer Datenstrukturen

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; 

}

Der Code habe ich versucht, den maximalen Wert zu erhalten ist:

MinAssortmentValue = Math.min.apply(Math, chartlength); 

Hier ist die aktualisierte jsFiddle Link: http://jsfiddle.net/sarav4gs/jbmk9tb1/3/

Kann jemand mir helfen, es zu beheben? Danke im Voraus!!

+0

wo bekommt man 'chartlength' aus? –

+0

was meinst du mit Array-Maximalwert ist es ein wenig vage können Sie erklären, ein bisschen mehr? Höchster Wert? Oder letzte Element in Array? – guradio

+0

@guradio Sorry abt that, ich meine höchsten Wert – Sarav

Antwort

2

... bezogen auf diesen Kommentar von mir - How to process a list of complex data structures - der skizzierte Ansatz könnte so aussehen, obwohl ich immer noch nicht wirklich weiß, was die Objekteigenschaften eines Diagrammelements sind, das Sie vergleichen und/oder extrahieren werden ...

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

Einfügen des gerade bereitgestellten Code in der Konsole Ihres vorgesehen Geige snipped die folgende Ausgabe verursacht:

minMaxValues : Object { 
    minValue: 1458000000000, 
    maxValue: 1485820800000, 
    minValueItemIndex: 9, 
    maxValueItemIndex: 14 
} 
minAssortmentValue, maxAssortmentValue : 1458000000000 1485820800000 
+0

Zuerst vielen Dank für Ihre Zeit und diese große Hilfe !!! Lass mich dieses Snippet in meinem Code ausprobieren und sehen, ob ich mein Szenario erreichen kann :) – Sarav