2010-07-28 6 views
5

최근에 그래프 용으로 gRaphael을 사용하기 시작했으며 지금까지 꽤 인상적이었습니다. 그러나 선 그래프를 만들 때 어려움이 있습니다. 특히 X 축의 값을 날짜로 설정하려고하면 그래프가 렌더링되지 않습니다. 그래프를 생성하는 내 코드입니다 : 내가 대체 할 수있을 것입니다 방법gRaphael Line Graph를 사용하여 x 축의 날짜 값을 설정하는 방법

<script type='text/javascript' charset='utf-8'> 


      var r = Raphael('holder'); 


      var lines = r.g.linechart(20, 20, 600, 300, [[1, 2, 3, 4, 5, 6, 7]], [['4.16','6.35','1.77','3.1','9.79','10.03','-0.3']], {nostroke: false, axis: '0 0 1 1', symbol: 'o', smooth: false}).hoverColumn(function() { 
       this.tags = r.set(); 
       for (var i = 0, ii = this.y.length; i < ii; i++) { 
        this.tags.push(r.g.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{fill: '#fff'}, {fill: this.symbols[i].attr('fill')}])); 
       } 
      }, function() { 
       this.tags && this.tags.remove(); 
      }); 
      lines.symbols.attr({r: 3}); 



    </script> 
    <div id='holder'></div> 

X 축 값 '1, 2, 3, 4, 5, 6, 7'말과 '2001년 1월 2001 2월 , 2001 년 3 월 ... 등 ... 등 .... '?

감사합니다. 많은 도움을 주셨습니다.

답변

7

처음에는 차트에 불평하지 않는 몇 가지 값을 지정해야합니다. 귀하의 경우는 UNIX를 절약 할 수에서 타임 스탬프 등 그럼 당신은 이런 식으로 뭔가를 사용하여 값을 변경할 수 있습니다 (사용하여 프로토 타입 등) :

lines.axis[0].text.items.each(function (index, label) { 
     //Get the timestamp you saved 
     originalText = label.attr('text'); 
     newText = 'CONVERT TIMESTAMP TO DATE USING originalText as input HERE'; 
     //label.rotate(75); 
     label.attr({'text': newText}); 
    }); 

.each는 일반

for(var x = 0; x < lines.axis[0].text.length; x++) 
로 대체 될 수있다 루프 원한다면

루프.

+0

많은 감사합니다. :) – SW4

+0

이 답변은 잘못되었습니다. 인자는 아래의 답과 같이 (index, label)이어야합니다. 내가 마침내 그 차이를 알기 전에 이것은 혼란의 시간처럼 일어났다. – chiliNUT

+0

안녕하세요. 나는 이것에 정말로 새로운 것이다. 나는이 코드를 정확히 어디에 삽입해야하는지 궁금하다. 나는 다음과 같은 코드를 가지고 있다고 생각한다. var lines = r.linechart (30, 30, 600, 440, [01/01/2014,02/01/2014, 03 : 01/2014,04/01/2014,05/01/2014], [[10015013085100]], {axisxstep : 20, nostroke : false, 축 : "0 0 1 1", 기호 : "원 ", smooth : true}) { this.tags = r.set(); for (var i = 0, ii = this.y.length; i

2
$.each(lines.axis[0].text.items , function (index, label) { 
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], 
     date = new Date(parseInt(label.attr("text"))), 
     day = date.getDate(), 
     month = months[date.getMonth()];; 

    dateText = month + " " + day; 
    //label.rotate(75); 
    label.attr({'text': dateText}); 
}); 
관련 문제