Vue.js + HighCharts

사전 준비

Node.js와 NPM이 설치되어 있어야 한다.
Vue와 Highcharts가 설치되어 있어야 한다.

Highcharts의 설치는 다음과 같다.

npm install --save highcharts

그 다음, Highcharts-Vue를 설치한다.

npm install highcharts-vue

사용

위와 같이 설치를 마치고, Vue.js에서 highcharts를 사용하는 방법은 크게 2가지가 있다.

1. 플러그인으로 전역 등록
   해당 방식은 main.js에 highcharts를 import해서 프로젝트의 어느 파일에서나 highcharts를 사용할 수 있게 하는 것이다.
2. 구성 요소에 로컬로 등록
   해당 방식은 highcharts를 사용할 컴포넌트 혹은 파일에서만 사용할 수 있게 하는 것이다.

플러그인으로 전역 등록하는 방법은 다음과 같다.

//다음과 같이 main.js파일에 vue와 highcharts-vue를 import해준다.
import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'

//그리고, use를 사용해서 어느 파일에서나 사용할 수 있게 한다.
Vue.use(HighchartsVue)

//만약 하이차트를 사용하는 태그를 highcharts가 아닌 다른 것으로 바꾸고 싶다면 다음과 같이 하면 된다.
Vue.use(HighchartsVue, {tagName: '원하는 태그명'})

//이제 해당 프로젝트의 어느 싱글 컴포넌트 파일에서나 highcharts를 사용할 수 있게 되었다.

로컬로 등록하는 방법은 다음과 같다.

//highcharts를 사용하고자 하는 파일의 script부분에 다음을 import한다.
import {Chart} from 'highcharts-vue'

//그리고 export default의 컴포넌트에 highcharts를 추가하고, Chart를 부여한다.
{
  components: {
    highcharts: Chart 
  }
}

//이제 전역으로 등록한 것과 마찬가지로 해당 파일에서 highcharts를 사용할 수 있게 되었다.

설정

Highcharts의 사용은 다음과 같이 사용하고, 몇 가지 프로퍼티들을 부여해서 표현한다.
프로퍼티 목록들

//template에 최상위에 div를 놓고 그 안에 highcharts태그를 추가한다.
<highcharts></highcharts>

이때 필수적으로 부여해야 하는 프로퍼티가 :options라는 항목이고, 이는 차트의 정보가 들어가 있는 객체가 할당되어야 한다.

<highcharts :options="chartOptions"></highcharts>

그리고, 차트의 정보가 들어있는 객체는 data에 다음과 같이 만들어 준다.

data: function() {
  return {
    chartOptions: {
      //차트에 대한 정보
    }
  }
}

그럼 이제 chartOptions에 들어있는 차트에 대한 정보가 highcharts에 표현되게 된다.

프로퍼티에 대한 설명은 추후에 사용하게 되면 계속해서 프로퍼티 목록들에 업데이트 예정

차트에 대한 정보구현

그럼 이제 chartOptions를 어떻게 채우는지 알아보자.