이번 포스팅에는 Format, Formatter 사용법을 알려드리겠습니다.
사실상 Formatter 사용법이긴 한데..
일단 보시죠!
formatter
이 Formatter는 Highchart에서 Default로 제공하는 Text가 맘에 들지 않을때, 혹은 바꿔야 할 때
사용할 수 있는데요.
보통 Title같은 옵션들은 잘 사용하지 않습니다.
왜냐하면 굳이 바꿀필요가 없거든요.
따라서
tooltip, labels, dataLabels 등의 옵션에서 formatter을 사용할 수 있습니다.
formatter엔 함수를 넣을 수 있는데요.
예를 들면
-하이차트 외부 script안-
var a = 10;
var b = 5;
-하이차트 내부 옵션-
dataLabels: {
formatter:function(){
return '두 수의 합은 '+a+b+'입니다.';
}
}이런식으로 넣을 수 있습니다.
아직 잘 모르시겠나요?
그렇다면
저번 포스팅에서 다뤘던 column-basic 차트에서 사용해보겠습니다.
series 옵션에 dataLabels 옵션에서 formatter을 사용한 모습입니다.
오로지 예를 들려고 표현한 것이기 때문에 그 점 유의해서 봐주세요.
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
dataLabels:{
enabled:true,
allowOverlap:true,
formatter: function(){
//내부에서 변수를 선언해도 됩니다. 동적인 변수를 선언하려면 하이차트 외부에 선언하세요!
var a = 10;
var b = 5;
return '두 수의 합은 '+(a+b)+'입니다.';
}
}
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
dataLabels:{
enabled:true,
allowOverlap:true,
formatter: function(){
var chartIndex = this.point.index;
return '이 차트의 인덱스는 '+chartIndex+'입니다.';
}
}
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]두 개의 컬럼에 dataLabels를 줬는데요.
이렇게 Label을 추가 할 수 있습니다!!! 와~!!
지금 저 차트는 한 x축에 컬럼이 많지만 한 두개 정도라면
그리고 String 형태가 아닌
해당 컬럼의 데이터 값만 표출 해준다면
보기에도 좋고 더 멋있게 표현 할 수 있을것입니다.
series말고도 tooltip에서 바꿔볼 수도 있습니다.
현재 툴팁은 위 사진에 나와있듯이 x 축 컬럼명, 데이터명, 데이터값, 단위 이렇게 표현 되고 있지만
음.. 깔끔하기도 하지만.. 좀 다르게 바꿔보고싶다! 라고 생각하신다면
이런 옵션들을 사용해보세요!
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},이게 위 이미지의 툴팁입니다.
tooltip: {
formatter: function(){
return '<b style="font-size:13px;">'+this.x+'<b><br/>'+
'<span style="color:'+this.points[0].series.color+';">●</span>'+
this.points[0].series.name+': '+this.points[0].y.toString()+'mm<br>'
+
'<span style="color:'+this.points[1].series.color+';">●</span>'+
this.points[1].series.name+': '+this.points[1].y.toString()+'mm<br>'
+
'<span style="color:'+this.points[2].series.color+';">●</span>'+
this.points[2].series.name+': '+this.points[2].y.toString()+'mm<br>'
+
'<span style="color:'+this.points[3].series.color+';">●</span>'+
this.points[3].series.name+': '+this.points[3].y.toString()+'mm<br>'
;
},
shared: true,
useHTML: true
},이게 변경한 툴팁인데요.
예? 뭐가 달라졌냐고요? 아무튼 다름 ..ㅋㅋ
위 코드를 보시면 this.points[1].series.name이라는 변수가 있죠?
차트상에서 두번째(배열은 0부터 시작한다!) series의 이름을 가져오는건데요
두번째 차트의 이름은 NewYork이죠!
사실 shared 옵션이 false로 되어있다면 인덱스 번호를 써줄 필요가 없어지는데
shared옵션이 켜져있다면 일일이 인덱스 번호를 줘야하는 불편함이 있습니다..!
※ shared옵션은 예를 들면 x축이 Jan인 차트에 마우스를 오버했을때
모든 차트의 값이 다 나오게 할지 아니면
각 컬럼 차트별로 값이 나오게 할지 설정 하는 옵션입니다.
이런 질문이 있을 수 있겠네요.
'어 근데 이 this.x , this.series 같은 옵션들은 어디서 확인할 수 있나요?'
자 저번 포스팅때 Highchart를 변수에 집어 넣는 법을 알려드렸습니다.
혹시 못보신 분들 있을 수도 있으니 한번 더 알려드리겠습니다.
<script type="text/javascript">
var chart;
chart = new Highcharts.chart('container', {
.
.
.이렇게 차트를 선언 할 수있습니다.
이렇게 선언한 차트를 console.log로 콘솔에 찍어보게되면
여러 옵션들을 확인 할 수 있습니다.
그것 마저 귀찮으신 분들을 위해
몇가지만 알려드리겠습니다.(응용해서 사용해보세요)
* shared:false 일때
-this.percentage : series가 stacked 타입 또는 차트타입이 pie일때만 사용가능
-this.point : 각 차트 데이터의 object타입 데이터 (ex. this.point.x)
-this.series : 각 series 데이터의 object타입 데이터 (ex. this.sereis.name)
-this.total : sereis가 stacked 타입일때 쌓인 데이터들의 총 합계
-this.x : x축 데이터를 가져옴
-this.y : x축 데이터에 해당하는 y축 값을 가져옴
*shared:true 일때
-this.points[i].percentage
-this.points[i].point
-this.points : shared:true인 tooltip에서 각 차트별 옵션들을 모아놓음
-this.points[i].series
-this.points[i].total
-this.points[i].y
여기까지 formatter에 대한 포스팅을 마치겠습니다~!
궁금한 점은 댓글로 물어보세요! 아는 선에서 성심성의것 답변해드리겠습니다!
'High Chart' 카테고리의 다른 글
| [Highchart]Column차트 Series의 grouping옵션을 알아보자 (0) | 2022.01.12 |
|---|---|
| [Highchart]Legend(범례), jsp에서 button으로 만들기 (0) | 2022.01.11 |
| [Highchart]Highchart를 사용해보자2(꿀팁주의22) (0) | 2022.01.07 |
| [Highchart]Highchart를 사용해보자.(꿀팁주의) (0) | 2022.01.06 |
| [Highchart]Highchart를 사용하기 위한 준비 (0) | 2022.01.05 |
