그래프 간격에 대해 문의 드립니다.

[j2hlove]

안녕하세요

깔끔하고 연동도 쉬운 jui차트 잘 쓰고 있습니다.

몇가지 궁금한점이 있어 질문 드립니다.

1. 

위에 두 그래프에서 보듯이 X축의 글자들이 길어 너무 붙어 있습니다. X축의 단위 간격을 늘일 수 있는 방법이나 글자가 길면 자동줄바꿈이 되는 방법 또는 말줄임(마우스오버시 풀네임노출)의 기능등 글자길이가 길 경우 처리할 수 있는 방법이 없을까요?

2. 

이 그래프도 간격 문제입니다. 이번에는 Y축인데요.. Y축은 글자가 길면 짤리는 경우가 있는것 같은데요. Y축도 글자 자동 줄바꿈이 있나요? 그리고 그래프간 간격(상하)을 더 늘이고 싶은데요 이 부분도 방법이 있으면 알려주시면 감사하겠습니다.

바쁘시겠지만 답변 부탁드리겠습니다.

그리고 좋은 그래프 만들어 줘서 감사합니다 ^^

[easylogic]

@j2hlove 안녕하세요.

jui 차트 써주셔서 감사합니다.

순서대로 답변을 드릴게요.

1. 축에 표시되는 텍스트를 회전 시켜서 사용하시면 될 듯 합니다.

http://chartplay.jui.io/?p=grid_text_rotate

{ textRotate : -10 } // -10 도 회전

회전을 시키시면 영역이 좀 달리 보이실 꺼에요.

2. 왼쪽 차트 간격을 조정하면 됩니다. 조정하는 방법은 아래를 봐주세요.

http://chartplay.jui.io/?p=chart_padding

차트 생성하실 때 padding 옵션을 줄 수 있는데요.

{ padding : { left : 100 } } // left 기본이 50 ,

50 이상 정의 하셔서 화면을 보시면 될 듯 합니다.

[j2hlove]

답변 감사합니다.

알려주신대로 수정하였는데 몇가지 더 여쭤 보겠습니다.

1. 위 두개의 이미지 하단에 처럼 로테이션을 시켰는데 텍스트 글자가 X축 하단 라인에 결치는 경우가 생깁니다. 안 걸치게 하려고 이래저래 돌려봐도 텍스트가 긴경우에 걸치게 되던데요... 그리고 두번째 이미지 처럼 텍스트와 그래프의 색깔을 설명해주는 부분하고도 겹치는 경우가 발생합니다. 그래서 텍스트 영역의 높이를 조절할 수 있나요? 상하 높이를 원하는 치수로 줄였다 높일수 있나요?

2. 알려주신대로 하니 글 짤림현상은 없어졌는데요 위의 글자와 아래의 글자가 너무 붙어 있어서 좀 복잡해 보이는데요 그래서 위와 아래 글자간의 간격을 줄 수 있는 옵션이 없나요? 그러니깐 예로 청호정밀과 엔터인이 너무 상하로 붙어 있어서 그 간격을 좀 벌이고 싶습니다.

3. 위 그림처럼 하단의 그래프의 색깔별 항목표시 부분에 갯수가 많아지면 2줄로 바뀌게 되는데 이때 X축의 텍스트와 겹치는 현상이 나타납니다. 그래프의 색깔별 항목표시하는 영역의 높이나 X축과의 간격을 지정할 수 있는 방법이 없을까요?

번거로우시드라도 답변 부탁드리겠습니다.

그럼 수고하세요~~

[easylogic]

@j2hlove

1번의 경우는 테스트 길이가 길어서 더 그런면이 있는데요. 현재는 축이랑 테스트의 간격을 조정하는건 없습니다. 다만 축 자체의 간격을 벌일 순 있습니다. 좀 복잡하지만 이건 예제를 따로 만들어볼게요.

차트 자체에 속성이 없기 때문에 조금의 트릭을 사용합니다. 방법은 일단 x, y 축 2개씩 만들고 x 축 하나는 hide : true 으로 숨기구여. 나머지 하나를 숫자 표시 용도로 사용합니다.

axis : [{
        x : {
            type : "block",
            domain : "quarter",
            line : true,
          hide: true    //  x 축 하나는 숨깁니다. 브러쉬는 여전히 이걸 보기 때문에 상관 없어요. 화면에 안 보일 뿐 
        },
        y : {
            type : "range",
            domain : [ -40, 40 ],
            step : 10,
            line : true
        },
        data : [
            { quarter : "1Q", sales : 50, profit : 35 },
            { quarter : "2Q", sales : -20, profit : -30 },
            { quarter : "3Q", sales : 10, profit : -5 },
            { quarter : "4Q", sales : 30, profit : 25 }
        ]
    }, {
        x : {
            type : "block",
            domain : "quarter",
          color: 'white',             // 두번째  x 축에서  축 색을 바꿉니다.  배경색으로  그럼 축이 안 보이게 되고 
          line: false,
          dist: 20,          // 축 자체를 원래 위치에서 20px 간격으로 넓힙니다. , 
          textRotate : 20  // 이 상태로 텍스트를 회전 하시면 좀 더 넓은 화면으로 하실 수 있어요. 
        },
        y : {
            type : "range",
            domain : [ -40, 40 ],
            step : 10,
            line : true,
            hide: true
        },
        data : [
            { quarter : "1Q", sales : 50, profit : 35 },
            { quarter : "2Q", sales : -20, profit : -30 },
            { quarter : "3Q", sales : 10, profit : -5 },
            { quarter : "4Q", sales : 30, profit : 25 }
        ]
    }],

2번의 경우는 차트를 너무 작게 쓰시는게 원인 인듯 합니다만
text size 를 조정하면 좀 더 표현할 수 있는 공간이 늘어날 듯 하네요. 차트 생성하실 때

chart.builder('#xxx', {
    ....,
    style : {
        gridYFontSize: 9      // 이부분 조정하시면 y 축 폰트 사이즈 줄일 수 있습니다. 
   }
})

3번의 경우는 하단 여백이 너무 부족해서 그렇습니다. 차트 생성하실 때 padding 옵션으로 여백을 조정할 수 있습니다.

{
    padding : { bottom : 100 }      //  bottom 영역을 100 정도 주시고 테스트 해보세요. 
}

[daseulki]

아 혹시 여기서 더 질문해도 될까 싶어 하나 남깁니다. 저도 똑같은 문제가 있는데 저는 x축의 특정 텍스트가 튀어나가는 경우에 줄을 바꾸고 싶습니다.

                x: {
                    type: "block",
                    domain: "type",
                    line: false,
                    format : function(d) {
                        if(d=="가나다라마바사"){
                            return "가나다라\n마바사"
                        } else {
                            return d
                        }

                    },

                },

이렇게 구현하면 다음 줄로 내려가는게 아니라 미묘하게 줄 차이가 나더라구요.. 혹시 해결 방법이 있을까요?