extjs 4.2.1 버전을 이용하여 chart를 구현하던 중 축(Axis)의 제목(Title)이 너무 어이없어(크기와 폰트가 황당한 수준이다. 아마 Arial Bold 18 Font인 듯 하다.) 어떻게 조정할 수 없을까 이리 저리 알아보았지만 뾰족한 방법은 없었다.
Current Chart Desire
google을 며칠째 뒤졌으나 해결책이라고 나와 있는 것은 1. theme를 새로 지정해서 적용하는 방법과 2. style을 지정해서 해결하는 방법 정도가 나와 있었다.
1. theme를 새로 지정해서 사용하는 방법은 새로운 chart theme를 지정하여 새로운 chart component를 만들어서 하는 방법이므로 여러가지를 손대야 한다.
http://www.sencha.com/forum/showthread.php?220309-How-to-change-the-font-size-of-the-titles-of-axes-in-EXTJS-charts http://docs.sencha.com/extjs/4.1.3/#!/guide/drawing_and_charting http://docs.sencha.com/extjs/4.0.7/#/guide/drawing_and_charting
2. style을 지정하는 방법
style을 지정하는 방법을 권장하거나 추측하는 문서들이 많이 있었으나 모두 실패…
나와 있는 방법은 css style 파일을 손대거나, hthml 문서안에서 선언하는 방법 등이 있었으나 다 작동되지 않았다.
style을 지정해서 성공한다고 하더라도 server side에서 php extjs 라이브러리를 만들어서 사용하는 구조로 만들었으므로 화면에 따라 그때 그때 style을 지정해서 사용해야 한다면 아무래도 확장성과 완성도가 떨어진다는 판단에 소스를 직접 헤집고 디버깅하여 찾은 결과 적절한 속성을 찾아냈다. ( sencha api에는 나와있지 않는 방법이다 )
xtype : 'chart'
animate: true,
shadow: false,
store: chart_store,
axes: [ {
type: 'Numeric',
position: 'left', <= 좌측 축(left axes)이다.
fields:['field0'],
axisTitleLeftStyle: { <= 속성이 axisTitleLeftStyle이다
font: 'bold 13px Arial',
rotate: { x: 0,
y: 0,
degrees: 270 <= left axis는 270도 회전하여 세로로 title을 표시(bottom에서는 필요없다)
}
},
title: 'Growth',
grid: true
}, {
...
당연히 아랫 축 (bottom axes)의 속성은 axisTitleBottomStyle이다.
axisTitleBottomStyle: {
font: 'bold 13px Verdana',
fill: '#333'
},
결과는 아래와 같이 성공적이다.