highcharts #
Find similar titles

Structured data

Category: Programming

highcharts

highcharts #

Highcharts는 SVG를 기반으로 하는 순수한 javascript 차트 라이브러리입니다. Highcharts 라이브러리에는 모든 표준 차트 유형 등이 포함되어 있습니다.

설치 방법 #

Highcharts를 사용하기 위해선 라이브러리를 다운을 받거나 cdn을 연결해야 합니다. highchart 라이브러리 .js 파일을 연결할 때 jquery.js 다음 순서에 둡니다.

다운로드 받기:

npm install highcharts –save
// or
bower install highcharts

URL 연결:

<script src="https://code.highcharts.com/highcharts.js"></script>

기본 작성 방법 #

dom에 차트를 그릴 곳에 id를 작성해줍니다.

<div id="차트_id"></div>

스크립트에서 차트를 설정합니다.

var myChart = Highcharts.chart('차트_id', {
    chart: {
        type: 'line' // 차트 종류
    },

    title: { text: 'chart 제목 타이틀' }, // 제목
    subtitle: { text: '부제목'}, // 부제목

    xAxis: {...},

    yAxis: {
        title: {...}
    },

    legend: {...}, // 범례

    tooltip: {...}, // 툴팁

    series: [ // 차트 데이터
        {...},
        {...},
    ],

    exporting: {...} // 내보내기
});

highcharts type #

type: 'highcharts type', 차트 타입을 정할 수 있습니다.

line
area
column
bar
pie
scatter
bubble

hightchart custom #

커스텀엔 크게 X축과 Y축이 있고, 그 외에 credits, legend, title, plotOptions, tooltip, annotations .... 등이 있습니다.

axes #

X축(xAxes)과 Y(yAxes)축의 값과 디자인을 설정합니다.

xAxis: {
    title: {
        text: '차트 X축',
        style: {"font-size": "15px", "font-weight": "bold"}
    },
    // 카테고리가 없으면 자동으로 1,2,3 넘버링으로 그려진다
    categories: ['A', 'B', 'C', 'D'],

    labels: {
        rotation: 90, // 라벨 각도 조절
        format: '{text} 개', // 단위 설정 가능 ex. '{text} min/월/km/g…'
        //formatter: function () { return this.value; } // 함수로 사용해 원하는 값을 계산해 나타낼 수도 있다.
    },
},

exporting #

차트 내보내기 기능은 highcharts의 유용한 기능 중 하나입니다. 내보내기 모듈을 사용하면 차트를 PDF, PNG, JPG 또는 SVG 벡터 이미지로 다운로드할 수 있습니다. 또한 웹 페이지에서 방해 요소 없이 차트를 직접 인쇄할 수 있습니다. offline-exporting.js 모듈을 사용하는 경우 클라이언트 측에서 다운로드를 생성할 수 있습니다. exporting 을 사용하기 위해선 offline-exporting.js 파일을 연결해야 합니다.

<script src="https://code.highcharts.com/modules/offline-exporting.js"> </script>


exporting: {
    filename: "high-chart-img",  // 내보내는 파일 이름 설정
    buttons: {
        contextButton: {
            text: 'Export',
            align: 'left', // 내보내기 버튼 위치 설정
            x: 40, // 내보내기 버튼 세로 위치 설정
            y: 0, // 내보내기 버튼 가로 위치 설정
            menuItems: [
                {
                text: 'Print Chart',
                onclick: function () {
                    this.print(); // 바로 차트 프린트
                },
                separator:false
            },
            {
                text: 'Export to jpeg',
                onclick: function () {
                    this.exportChart({
                        type: 'jpeg' // 내보내는 이미지의 타입 설정
                    });
                }
            }],
            chartOptions: { chart: { // 만약 차트 내보내기 시 추가하고 싶은 이벤트가 있다면 여기서 설정
                events: {
                    load: function() {
                        this.renderer.image('https://이미지-url.png', 0, 0, 800, 400).attr({zIndex:1000}).add(); // 원하는 이미지를 url로 함께 출력할 수도 있다.
                    }
                }
            }},
        }
    }
}

예제 #

데이터를 임의로 넣어 예제를 확인해보면 축과 내보내기 설정이 어떻게 적용되었는지 확인할 수 있습니다. 일반적인 라인 차트:

xAxis: {
    title: {
        text: '차트 X축',
        style: {"font-size": "15px", "font-weight": "bold"}
    },
    categories: ['A', 'B', 'C', 'D'],

    series: [
        { name: '가나다', data: [10, 8, 14, 4] },
        { name: '라마바', data: [15, 12, 13, 16] },
        { name: '사아자', data: [6, 10, 12, 8] },
    ],

x,y축 값으로 차트 그리기:

xAxis: {
    title: {
        text: '차트 X축',
        style: {"font-size": "15px", "font-weight": "bold"}
    },

    series: [{
            name: 'line-chart', 
            data: [
                [40,13],
                [37,75],
                [34,88],
                [31,38],
                [28,25],
                [25,25],
                [22,63],
                [19,81]
            ]
        }],