gRaphael 꺾은 선형 차트에 눈금 선을 추가하는 방법이 있습니까?

Question

gRaphael으로 만든 선 차트가 있습니다. 축과 눈금이 있지만 그리드 선을 갖고 싶습니다. 이 기능을 구현할 수있는 기본 제공 방법이 있습니까? 아니면 라이브러리를 추가 할 수 있습니까?

Answer 1

나는 어제 이것을 시도했다. 짧은 대답 : gRaphaël은 선 차트 옵션이나 축 옵션으로이 작업을 수행 할 수 없습니다. Raphaël과 직접해야합니다. 같은
뭔가 :

var r = Raphael("holder"), txtattr = { font: "12px sans-serif" }; 
r.path('M 15 200.5 L 310 200.5 M 15 180.5 L 310 200.5'); 
r.linechart(10, 10, 300, 220, x, [y, y2, y3]); 

이 내 선 차트에서 15,200.5에서 시작 15,180.5에 310,200.5 이동에 직선을 그리고 310,180.5에 선을 그립니다 경로를 그리는 것을 의미한다. 왜 나에게 물어 보지 마세요. .5는 획이 실제로 1px 넓고 단색이되게하는 데 중요합니다. 그렇지 않으면 50 % 불투명도에서 2 픽셀 폭으로 앨리어싱 된 것으로 보입니다. 자신의 선형 차트와 관련하여 정확한 위치를 계산해야합니다.

playground에서 path 기능으로 재생할 수 있습니다. r을 paper으로 변경하십시오.

정확한 범위의 축 정의 (입력의 최소 및 최대와 반대)를 찾는 경우 Google Chart Tools을 고려할 수도 있습니다.

Answer 2

gRaphael에는 그리드 선을 추가 할 수있는 기본 제공 방법이 없지만 소스 코드를 편집하거나 그래프 객체를 생성 한 후에 그래프 객체를 조작하여 그릴 수 있습니다.

RaphAlytics이라는 확장명을 발견했으며 격자가있는 경계 상자가 필요한 경우에 drawGrid() 함수를 사용했습니다.

눈금 선을 그리는 데 필요한 gRaphael 그래프에이 함수를 적용 할 수 있습니다. 선 차트에서, I는 선 그래프의 왼쪽 축 마크와 정렬 된 수평 격자 선을 그릴 필요하므로 I는 이와 같은 예로서 기능을 사용했을 때 여기

// Draw horizontal gridlines 
for (var i = 0; i < g.axis[1].text.items.length; i++) { 
    r.path(['M', x, g.axis[1].text.items[i].attrs.y, 'H', w + x]).attr({ 
     stroke : '#EEE' 
    }).toBack(); 
} 

그 일례를 설명하는 작업 바이올린의 : http://jsfiddle.net/KM3BB/1/