2012-07-25 5 views
7

다소 고급 "Flot"jQuery 플러깅 그래프를 작성하려고합니다. 이를 위해 다차원 객체가 필요합니다 (또는 적어도 그것이 맞다고 생각합니다).다차원 배열로 다차원 객체 만들기

구조는 다음과 같아야합니다

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"가 "MOBILIZATION"인 경우 "1988"은 "2012/3/27"이고 "483994"는 "02:10"입니다. 당신은 그림을 얻는다!?

좀 jQuery를 작성하려고했지만, 그것은 분명히 나던 작업 :

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 배열에 푸시를 사용했습니다 볼 수 있듯이. 분명히 내가 원하는 결과를주지 못한다. 임 kindda 이걸로 위아래로,이게 처음으로 자바 스크립트/jQuery 개체와 함께 일하고 잃어버린. 가장 좋은 해결책은 무엇입니까?

+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"에 x 축 속성 모드가 있기 때문에 Date 객체가 필요합니다 (Flot 플러그인이 작동해야 함). 상자 밖의 코드를 사용하면 그래프 컨테이너와 카테고리가 멋지게 그려집니다. 내 다음 문제는 Date 객체입니다. 그래프에서 데이터/막대/선이 없습니다. 플러그인이 기울이기 때문에 y 축에 "hh : mm"문자열이 시간으로 인식되기 때문입니다. 나에게 알아 내고 대답을 정확하게 표시하십시오 (다른 모든 대답은 올바르게 읽었을지라도 정확합니다). 당신이 볼 수있는대로 –

+0

고마워요 http://www18.speedyshare.com/zmgqp/download/graph.jpg :) –

+0

흠, 그래, 작동하지 못할 수 있습니다. 무엇을해야할지 모르십니까? 필자는 그것을 Date 객체로 변환하고 플러그인 y 축의 날짜 형식 속성을 설정하려고 시도했습니다. 행운을 빌어 요. –

10

변경 var objects = [];var objects = {}; 하고 JSON 객체와이

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

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

에 문제 변경은 변수 인덱스 속성을 설정입니다. 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 okay .... – undefined

관련 문제