highChart 사용기

하이차트 써보기

최근에 차트 쓸일이 없는데

highchart같은 경우는 사이트가면 사용하기도 편하게 되어 있고 옵션을 적용하기로 편하게 되어있다. 보통은 doc을 보기가 어렵고 할만도 한데 참 알아보기 쉽게 설명해놔서 적용하기 쉬웠다.

그런데 처음에 JSONObject랑 Array 로 만든 JSONString이 안먹혀서 꽤나 애먹었지만 어쨋든

http://www.highcharts.com/

여기서 확인하면 되고 라이브러리도 여기서 받아서 아래와 같이 쓰면 됨..

여기의 seriesList는 flexJson을 통해서 Bean이 변환된 JSONString을 대입해서 렌더링한다.

function hichart(seriesList){
    $('#mainChart').highcharts({
        chart: {
         renderTo: 'container',
         backgroundColor: {
          linearGradient: { x1: 0, y1: 1, x2: 1, y2: 0 },
          stops: [
                  [0, '#2a2a2b'],
                  [1, '#3e3e40']
               ]
      },     
      style: {
          fontFamily: "'Unica One', sans-serif"
      },
      plotBorderColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },

1. 차트에 그려지는 색갈을 지정한다.
        colors: ["#024f55", "#ff3301"],
                 title: {
                  style: {
                         'font-weight': "bold",
                         color: '#E0E0E3',
                         textTransform: 'uppercase',
                         fontSize: '20px',
                     },
                     text: "<내외국인 집계>",
                     x: -20 //center
                 },

       2. 차트에 마우스 오버했을때 표시되는 데이터
        tooltip: {
         backgroundColor: 'rgba(0, 0, 0, 0.85)',
            style: {
               color: '#F0F0F0'
            },
            pointFormat:

          '{series.name}: <b>{point.percentage:.1f}%</b><br>{point.y} 명'
        },

3. 타이틀 외에 부제목을 설정할 수 있는데 필자는 다른 목적으로 사용하였다. 위치 이동이 가능하고 차트 박스 내부의 어느곳에 위치시켜 활용할 수 있다.
        subtitle: {
            text: '<span id="dmgAmnt"></span>',
            floating: false,
            align: 'left',
            verticalAlign: 'bottom',
            x:20,
            y:-35, 
            useHTML: true,
            style: {
             fontSize: '15px',
                color: '#FF00FF',
                fontWeight: 'bold'
            }
        },

4. 범례인데 enabled를 사용해서 보이고 숨길 수 있음.
        legend: {
         enabled: true,
            itemStyle : {
             fontSize: '15px',
                color: '#E0E0E3'
            },
             itemHoverStyle: {
                color: '#FFF'
             },
             itemHiddenStyle: {
                color: '#606063'
             }
        },

5. 차트위에 기본적으로 보여지는 데이터를 설정한다. distance를 사용해서 위치를 설정할 수 있고 enabled를 사용해서 숨기기 보여지기를 설정가능하다.
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: dataLabel,
                    format: '{point.percentage:.1f}%<br>{point.y} 명',
                    style : {
                     fontSize: '15px',
                        color: "white",
                        textShadow: "0px 1px 2px black",
                        fontWeight: "bold"
                    },
                    "distance": -50
                },

6. 차트를 클릭시에 발생할 이벤트를 설정가능하다. 찾아보면 여러가지 옵션이 있다.
                events: {
                    click: function (event) {
                     $.bindFunctionCall(updatePsDmgByClick, event.point.name);
                    updatePsDmgByClick(event.point.name);
                    }
                },
                borderWidth: 1,
                borderColor: "#505050",
                showInLegend: true
            }
        },

7.차트에 그려질 데이터를 대입하는 위치
        series: seriesList,
        navigation: {
          buttonOptions: {
             symbolStroke: '#DDDDDD',
             theme: {
                fill: '#505053'
             }
          }
       },
        navigator: {
          handles: {
             backgroundColor: '#666',
             borderColor: '#AAA'
          },
          outlineColor: '#CCC',
          maskFill: 'rgba(255,255,255,0.1)',
          series: {
             color: '#7798BF',
             lineColor: '#A6C7ED'
          },
          xAxis: {
             gridLineColor: '#505053'
          }
       },
    });
}