Nativescript-vue / mobile 환경에 Highchart 추가

nativescript-vue에 추가할 수 있는 library( plugin )은 몇가지가 있으나 웹 개발 시 highchart를 주로 사용한 덕분에 highchart가 가장 익숙했다.

그러나 nativescript-vue 환경에 highchart를 추가하는 일은 다른 plugin들 처럼 녹록하지 않았다.

먼저 nativescript의 버전을 확인해 보았다.

C:\> ns --version
8.8.2
√ Up to date.

nativescript-vue는 2.9.3 버전인 것을 확인 하였다.

web에 포함시킬 때는 highchart의 javascript를 <script > tag를 이용하여 그냥 포함시킬 수도 있다. 하지만 mobile에서는 plugin으로 앱에 포함시키는 것이 속도 면에서나 플랫폼의 다양성에 맞추어 적절하고 vue framework을 이용한 편의성을 최대한 살리기 위해 app.js에서 초기화하여 tag로 불러 쓸 수 있도록 하였다.

우선 plugin을 설치한다.

C:\Project\sample> ns plugin add @mhtghn/nativescript-highcharts

이 때 주의할 것은 본인이 사용하는 nativescript의 버전이 7.0보다 낮은 경우에는 과거 버전을 사용해야 한다.

C:\Project\sample> ns plugin add  nativescript-ui-highcharts

프로젝트의 app.js를 열어 다음 구문들을 추가한다.

import highcharts from ‘@mhtghn/nativescript-highcharts’

Vue.registerElement(
    'Highcharts',
    () => require('@mhtghn/nativescript-highcharts').Highcharts
);  

이제 앱 내에서 Highcharts를 태그로 사용할 수 있다. 초기화를 Vue.use()나 Vue.components() method로는 시도해 보았으나 정상적으로 등록되지 않았다.

<Highcharts  :options=chartOpt height=”300″></Highcharts>

“chartOpt”로 표시된 chart option은 string으로 입력 받으므로 chart의 option이 object인 경우 JSON.stringify()를 사용한다.

computed: {
      chartOpt() {
              return JSON.stringify( this.chartOptions );
      }
},

이 경우 tag로 지정된 Highchart의 화면에서 표시되는 size는 잘 지정되는 것을 볼 수 있으나 chart는 크기는 제대로 초기화되지 않아 chart가 짤리는 현상이 나타난다.

이 경우 chart의 option에 크기를 지정하여 초기화 size를 지정한다.

chartOptions :  {

         chart: {
                    type: 'column',
                    height: 300
         },