2012-07-25 12 views
7

Ich versuche, ein etwas fortgeschrittenes "Flot" jQuery Plugging-Diagramm zu erstellen. Dafür brauche ich ein mehrdimensionales Objekt (oder zumindest denke ich es).Erstellen Sie multidimensionales Objekt mit multidimensionalen Arrays

Die Struktur sollte wie folgt aussehen:

var datasets = { 
     "usa": { 
      label: "USA", 
      data: [[1988, 483994], [1989, 479060], [1990, 457648], [1991, 401949], [1992, 424705], [1993, 402375], [1994, 377867], [1995, 357382], [1996, 337946], [1997, 336185], [1998, 328611], [1999, 329421], [2000, 342172], [2001, 344932], [2002, 387303], [2003, 440813], [2004, 480451], [2005, 504638], [2006, 528692]] 
     },   
     "russia": { 
      label: "Russia", 
      data: [[1988, 218000], [1989, 203000], [1990, 171000], [1992, 42500], [1993, 37600], [1994, 36600], [1995, 21700], [1996, 19200], [1997, 21300], [1998, 13600], [1999, 14000], [2000, 19100], [2001, 21300], [2002, 23600], [2003, 25100], [2004, 26100], [2005, 31100], [2006, 34700]] 
     } 
}; 

Von meinem Code-Behind habe ich einige Listen erzeugt wie folgt aussehen (nicht die gleichen Daten, aber daran, dass nicht):

<ul id="MOBILISATION"> 
    <li data-key="2012/3/27">02:10</li> 
    <li data-key="2012/3/28">05:25</li> 
    <li data-key="2012/3/29">09:21</li> 
    <li data-key="2012/3/30">00:00</li> 
    <li data-key="2012/3/31">00:00</li> 
</ul> 
<ul id="OPERATIONS"> 
    <li data-key="2012/3/27">19:51</li> 
    <li data-key="2012/3/28">18:35</li> 
    <li data-key="2012/3/29">14:39</li> 
    <li data-key="2012/3/30">07:46</li> 
    <li data-key="2012/3/31">10:26</li> 
</ul> 

Wo "USA/USA" ist "MOBILISATION", "1988" ist "2012/3/27" und "483994" ist "02:10". Du bekommst ein Bild !! ??

Ich habe versucht, einige jQuery zu schreiben, aber es ist offensichtlich nicht funktioniert:

var objects = []; 
    var array = []; 
    var categoryName = ""; 
    $('div#Container ul').each(function() { 
     catName = $(this).attr('id'); 
     $('li', this).each(function() { 
      array.push([new Date($(this).data('key')).getTime(), $(this).text()]); 
     }); 

     objects.push({ categoryName: { label: categoryName, data: array} }); 
    }); 
    var datasets = objects; 

Wie Sie sehen, ich Push-to-objects Array verwendet haben. Das gibt mir natürlich nicht das gewünschte Ergebnis. Ich liebe das Auf und Ab in diesem, da es das erste Mal ist, dass ich mit Javascript/jQuery-Objekten arbeite. Was ist die beste Lösung dafür?

+0

Es könnte einfacher sein, wenn Sie uns die reale Liste gab :-) – Bergi

+0

Haha ich weiß, Kumpel, im just zu faul, um es einzugeben. Ich fand nur ein zufälliges Beispiel :) –

Antwort

6

Ihre Datasets sind ein Objekt, kein Array - Sie können nicht darauf zugreifen. Auch funktioniert Ihre Variable categoryName nicht so (lesen Sie mehr unter dot and bracket notation). Versuchen Sie folgendes:

var datasets = {}; 
$('div#Container ul').each(function() { 
    catName = this.id; 
    var array = []; 
    $('li', this).each(function() { 
     array.push([ 
      new Date($(this).data('key')).getTime(), 
      $(this).text() 
     ]); 
    }); 
    datasets[catName.toLowercase()] = { 
     label: catName.toUppercase(), 
     data: array 
    }; 
}); 

Auch ich bin nicht sicher, ob Sie wirklich Date Objekte erstellen müßten, aber das hängt von Ihrem Ein- und Ausgabeformat.

+0

Ich brauche das Datum-Objekt, weil ich meine X-Achse Eigenschaftsmodus in "Zeit" haben (muss für das Flot-Plugin zu arbeiten). Mit Ihrem Code direkt aus der Box sind die Graph Container und Kategorien gut gezeichnet. Mein nächstes Problem ist das Date-Objekt. Es gibt keine Daten/Balken/Linien in der Grafik, da das Plugin die Zeichenkette "hh: mm" auf der Y-Achse nicht als Zeit erkennen kann. Gib mir eine Sekunde, um es herauszufinden und schlecht markieren Sie Ihre Antwort als richtig (Auch wenn alle anderen Antworten auch korrekt sind, nur durch Lesen). Danke –

+0

, wie Sie http://www18.speedyshare.com/zmgqp/download/graph.jpg sehen können :) –

+0

Hmm yeah kann es nicht zur Arbeit bringen. Hast du eine Idee was zu tun ist? Ich habe versucht, es in ein Date-Objekt zu konvertieren und die Eigenschaft für das Datumsformat für die Y-Achse der Plugins zu setzen. Kein Glück –

10

ändern var objects = []; zu var objects = {}; und

ändern
objects.push({ categoryName: { label: categoryName, data: array} }); 

zu

objects[categoryName] = { label: categoryName, data: array}; 

Das Problem, das Sie mit JSON-Objekte haben ist Eigenschaften mit einem variablen Index zu setzen. Yuo kann dazu wie oben die Array-Notation verwenden.

1

Versuchen

var data = {}; 
    $('div#Container ul').each(function() { 
     var sub_obj = data[$(this).attr('id').toLowerCase()] = { 
      label: $(this).attr('id').toUpperCase(), 
      data: [] 
     }; 
     $(this).children('li').each(function() { 
      sub_obj.data.push([$(this).data('key'), $(this).text()]); 
     }); 
    }); 
    console.log(data); 
1

Try this:

var datasets = {}; 

$('ul').each(function (i, v) { 
    catName = $(this).attr('id'); 
    datasets[catName] = { 
     label : catName, 
     data: []    
    };   
    $('li', this).each(function() { 
     datasets[catName].data.push([new Date($(this).data('key')).getTime(), $(this).text()]); 
    }) 
}); 

Demo: http://jsfiddle.net/nfsYu/6/

+0

Warum verwenden Sie kein Objektliteral? – Bergi

+0

Immer noch nicht besser, ich meinte das ganze Objekt nicht nur das neue Objekt() ... – Bergi

+0

@Bergi okay .... – undefined

Verwandte Themen