Hichart 팁

내가 자주 실수하는 내용을 정리했다. 

1. x축(x axis)의 날짜/시간/값 지정하기

x축으로 날짜나 시간을 지정할 때, 바로 list<String>로 만들어서 출력하면 절대로 차트가 나오지 않는다.

['00:00:00', ..] 와 같이 single (또는 double)quotation을 사용해야 한다. 

y 축의 경우는 single(또는 double) quotation 없이 사용한다. 대신 천단위로 나오는 ,(comma)가 나오지 않아야 한다. freemarker + highchart 사용시 comma 를 잘 사용하여 차트가 나오게 한다. (참조 : http://knight76.tistory.com/entry/java-listmap%EA%B3%BC-freemark-%EC%97%B0%EB%8F%99)

2. y축(y axis)는 여러 개로 만들 수 있다.

하나 또는 두개만 그릴 수 있다고 생각했지만, 3차 y 축도 그릴 수 있다.

3. minimum 값을 추가할 수 있다.

min: 0

4. 차트 내부 선 안보이게 하기 (series.visible을 false로 변경)

series: [

                {

                   

                    yAxis: 0,

                    data: [<#list y0Axis as item> ${item},</#list> ],

                    visible: false

                },

                {

                   

                    yAxis: 1,

                    data: [<#list y1Axis as item> ${item}, </#list>],

                    visible: false

                },

            ]

 

5. 범례 이동

legend라 찾아야 하며, 왼쪽 위에 범례를 주려면 아래 정보를 활용한다.

        legend: {

            layout: 'vertical',

            backgroundColor: '#FFFFFF',

            floating: true,

            align: 'left',

            x: 100,

            verticalAlign: 'top',

            y: 70

        },

좋은 예제

http://jsfiddle.net/SdTcU/1/