[Vue.js] highcharts 설치 및 세팅

highcharts 설치 및 세팅

Vue.js 사용하면서 차트를 그려야 될때 highcharts를 이용해보자.
다른 차트로 만들고 싶으면 https://madewithvuejs.com/charts 요기를 참고해보자.

highcharts 설치

• https://www.highcharts.com/
• https://npmjs.com/ 에서 highchart를 검색해보니 vue 와 관련된 라이브러리를 발견!

  

• 3개월전 업데이트가 되었고 따끈따끈해보인다. 시작하기 위해서 필요한것들이 뭐가 있는지 보자.(Requirments 클릭)
  

  

• Vue, Highcharts 라이브러리가 필요하다.
• Vue는 설치되어있고 Highcharts를 다시 검색해보자.
  

  

• 설치 방법은 여러가지 있으니 환경에 맞게 하자. 나는 npm install --save highcharts를 선택.
  

  

• 글 재주가 없으니 사진으로 듬뿍듬뿍 넣을게요.
• package.json 현 상태
  

  

• highcarts-vue는 다음 챕터로..

highcharts-vue 설치

• npm install highcharts-vue
  

  

• package.json 현 상태
• 잉..npm install로 설치해도 dependencies에 포함이 된다.
  

  

highcharts-vue 프로젝트에 세팅

• 차트를 어느 컴포에서든 자유롭게 사용하기 위해, 즉 전역(글로벌)로 사용하려면 Vue에서는 main.js에 코드 작성한다.

  // main.js
  import Vue from 'vue'
  import HighchartsVue from 'highcharts-vue'
  Vue.use(HighchartsVue); // Plugin설치 및 등록하여 프로젝트안에서 전역으로 사용할 수 있게 한다.

  

• 이제 Home.vue에서 간단하게 차트를 그려보자.
• 매우매우 쉽다. 전역에서 모두 등록했기때문에 여기서는 사용만 하면 된다.
• 임시 데이터를 만들고 <highcharts />를 사용하면된다. 나머지 입력하지 않는 옵션들은 기본 옵션으로 설정된다.
  

  

highcarts-vue 실행

• 여기까지 했으면 끝이다.
• npm run serve를 실행 후 http://localhost:8080/요기로 접속한다.
• 그러면 요로케 기본 차트가 생성된다. 자세한 커스텀은 하이차트 홈페이지를 참고하면 되고 추후에 다시 정리할 예정이다. :)