line chart x, y 축 style 관련

[lagoonKmj]

안녕하세요.

JUI차트 잘사용하고있습니다.

다름이아니라, 이번에 PC웹화면으로 개발하다가 모바일로 개발을 진행할려고합니다.

폰트 스타일은 어떻게 지정하는지 도무지 아직까지 감이안오네요.

아래에 대충그려볼게요.

1000 | 500 | 300 | 0 ㄴㅡㅡㅡㅡ 100 300

X,Y축 에 나오는 라벨의 폰트를 줄이고 싶습니다.

[easylogic]

theme 기능을 이용하시면 됩니다. theme 속성 중에 gridXFontSize, gridYFontSize 두개의 속성이 있어요.

아래와 같이 사용하시면 됩니다.

참고하세요.

var chart = jui.include("chart.builder");

chart("#result", {
    axis : [{
        x : {
            type : "block",
            domain : "quarter",
            line : true
        },
        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 }
        ]
    }],
    brush : [{
        type : "column",
        target : [ "sales", "profit" ],
        colors : [ "red", "black" ]
    }],
    style : {
        gridXFontSize : 10,    // x축 폰트 사이즈 
        gridYFontSize : 10     // y 축 폰트 사이즈 
    }
});

[easylogic]

그 외에도 다른 style 을 바꿔주고 싶으시면

https://github.com/juijs/jui-chart/blob/develop/js/theme/jennifer.js

여기를 보시고 맞는 스타일을 조정해주시면 됩니다.

[easylogic]

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

좀더 편하게 테스트 하고 싶으시면 저희가 만들어놓은 차트 플레이 가셔서

style 탭을 클릭하시면 화면에서 바로 테스트 하실 수 있어요..

스타일 탭 누른 후 편집을 원하는 속성에 가서 더블클릭 하시면 편집 모드로 바뀝니다.

참고하세요.

[lagoonKmj]

style관련 옵션이 안되길래 여쭤본거였습니다. 확인해보니 진행중인 프로젝트의 CSS랑 충돌이있는거같군요, 답변감사합니다.