2012-07-25 22 views
7

多少高度な "Flot" jQuery plugingグラフを作成しようとしています。そのためには、多次元オブジェクトが必要です(少なくとも、それはそうだと思います)。私はこのように見えるいくつかのリストを生成した(同じデータではありませんが、心のことをいけない)しました私のコードビハインドから多次元配列を持つ多次元オブジェクトを作成する

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]] 
     } 
}; 

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

構造は次のようになります。

「USA/usa」は「モビライゼーション」、「1988」は「2012/3/27」、「483994」は「02:10」です。あなたは写真を撮る!!

私はいくつかのjQueryを書いてみましたが、それは明らかにdoesntの仕事:

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; 

あなたは私がobjects配列へのプッシュを使用しました見ることができるように。明らかに、私が望む結果を私に与えてくれない。 Im kinddaは、javascript/jQueryオブジェクトを使って作業していたので、これで何が起きているのかを解消しました。 これに最適なソリューションは何ですか? var objects = {};

+0

あなただけ:-) – Bergi

+0

母、私が知っているチームメイト、イム私たちに本当のリストを与えた場合、それはより簡単かもしれません私はちょうど無作為の例を見つけました:) –

答えて

6

あなたのデータセットはオブジェクトであり配列ではありません。プッシュすることはできません。また、変数categoryNameはそのようには機能しません(詳しくはdot and bracket notationを参照してください)。

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

はまた、私はあなたが本当にDateオブジェクトを作成する必要があるかどうかわからないんだけど、それはあなたの入口および出力形式に依存します。これを試してみてください。

+0

私は "time"(Flotプラグインを動作させるために持っていなければならない)のx軸プロパティモードを持っているので、dateオブジェクトが必要です。ボックスの外にあなたのコードを置くと、グラフのコンテナとカテゴリがうまく描画されます。私の次の問題はDateオブジェクトです。グラフでは、データ/棒グラフ/行はありません。プラグインは、時間軸としてy軸上の文字列 "hh:mm"を認識しないためです。私はそれを把握し、あなたの答えを正しいものとしてマークしてください(他のすべての答えが正しくても、それらを読むだけで正確です)。ありがとう –

+0

あなたが見ることができるようにhttp://www18.speedyshare.com/zmgqp/download/graph.jpg :) –

+0

うん、うん、うん、それは働くことができない。何をすべきか考えていますか? IveはそれをDateオブジェクトに変換し、プラグインのy軸の日付書式プロパティを設定しようとしました。運がない –

10

変更var objects = [];

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

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

を変更するには、JSONオブジェクトを持っている問題は、可変インデックスを持つプロパティを設定することです。 Yuoはこれを行うために配列表記法を使うことができます。

1

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

はこれを試してみてください試してみてください:

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()]); 
    }) 
}); 

デモ:http://jsfiddle.net/nfsYu/6/

+0

なぜオブジェクトリテラルを使用しないのですか? – Bergi

+0

まだ良くはありません、私はオブジェクト全体を意味するだけでなく、新しいオブジェクト()... – Bergi

+0

@Bergi大丈夫.... – undefined