Node.js와 NPM이 설치되어 있어야 한다.
Vue와 Highcharts가 설치되어 있어야 한다.
Highcharts의 설치는 다음과 같다.
npm install --save highcharts
그 다음, Highcharts-Vue를 설치한다.
npm install highcharts-vue
위와 같이 설치를 마치고, Vue.js에서 highcharts를 사용하는 방법은 크게 2가지가 있다.
main.js
에 highcharts를 import해서 프로젝트의 어느 파일에서나 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를 어떻게 채우는지 알아보자.