축 레이블 및 그리드를 그래프 차트에 추가하는 방법

g.raphael 막대 차트에 문제가 있습니다.축 레이블 및 그리드를 그래프 차트에 추가하는 방법

어떻게 더 작고 더 큰지고 바에서 중지 : 여기 내 예를

var paper = Raphael("holder"); 
 
var chart = paper.barchart(100, 40, 480, 300, [[15,18,26,36,55,60,80]]); 
 
Raphael.g.axis(90, 320, 280, 0, 100, 10, 1, null, "", null, paper); 
 
//paper.path("M100 40L100 320").attr({ stroke: '#ccc' }); 
 
\t 
 
var paper = Raphael("holder1"); 
 
var chart = paper.barchart(100, 40, 480, 300, [[15,18,26]]); 
 
Raphael.g.axis(90, 320, 280, 0, 100, 10, 1, null, "", null, paper);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/raphael-min.js"></script> 
 
<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/g.raphael-min.js"></script> 
 
<script src="https://raphael4gwt.googlecode.com/svn/trunk/raphael4gwt/src/org/sgx/raphael4gwt/public-graphael/graphael/g.bar.js"></script> 
 

 
<html> 
 
    <body> 
 
<div id="holder"></div> 
 
<br/> 
 
<div id="holder1"></div> 
 
    </body> 
 
</html>

질문입니까? 첫 번째 예제에는 6 개의 막대가 있고 두 번째 예제에는 3 개의 막대가 있으므로 두 번째 예제에서는 모든 것이 더 커서 y 축의 레이블과 일치하지 않습니다.

막 대형 차트에 어떻게 눈금 선을 추가합니까? 경로 요소를 사용하여 그리기를 시도했지만 바가 크고 작아지면 값이 전달되는 것과 비교할 때 정렬되지 않습니다.

감사 VED

출처

2014-09-19 Zeus

나는 희망 내 대답이 당신 또는 누군가에 도움이 몇 개월 알고있다.

이러한 문제를 일으키는 몇 가지 문제가 있습니다. 막대는 paper.barchart를 호출 할 때 차트가 제공되는 사용 가능한 높이와 너비를 채우기 위해 x와 y로 크기가 조절됩니다. 따라서이를 극복하는 한 가지 방법은 바 너비가 동일하도록 더미 0 값을 전달하는 것입니다.

높이 스케일링의 경우 막대를 적절한 값으로 가져 오려면 barchart의 "to"옵션을 설정해야합니다.

체크 아웃 plunker 귀하의 데이터를 보여주었습니다. 다음은 차트 작성 호출 하나 :이 문제를 해결하기 위해 무슨 짓을
```
var chart = paper1.barchart(100, 40, 480, 300, 
    [[15, 18, 26, 0, 0, 0, 0]], 
    { 
     to: 100 
    }); 
```
는 대시와 같은 위치에 눈금 선을 그립니다 축 기능을 수정했다.

희망이 있습니다.

출처

2015-03-13 15:04:46

축 레이블 및 그리드를 그래프 차트에 추가하는 방법

답변

관련 문제