amchart vuejs webpack npm 사용 하기

amchart  vuejs webpack npm 사용 하기 

amchart 를 사용 하는데 vue js와 연동 하는데 있어서 

https://www.amcharts.com/kbase/using-amcharts-vue-js-webpack/

에 자세히 나와 있지만 틀린 부분이 있어서 글을 적습니다. 

npm install amcharts/amcharts3 --save (x)

이 아니라 

npm install amcharts3 --save

로 설치를 해주세요 

그리고 

<div id="chartdiv" style="width: 100%; height: 400px;"></div>

에서 chart 로 사용하기 위한 요소 인데요 

create() 에서 

사용하지 않고 mounted 나 methods 에서 사용 할것이기 때문에 

<div id="chartdiv" style="width: 100%; height: 400px;" ref="chartdiv"></div>

ref를 붙혀 줍니다.

import AmCharts from 'amcharts3'
import AmSerial from 'amcharts3/amcharts/serial'

위와 같이 해주면  AmCharts.makeChart  를 할때 펑션을 찾을수 없다는 에러가 나옵니다. 

import 'amcharts3'

import AmSerial from 'amcharts3/amcharts/serial'

위와 같이 import 를 해줘야 

var configs = {

"type": "serial",

"categoryField": "type",

"chartCursor": {},

"graphs": [

{

"type": "column",

"title": "Pizza types",

"valueField": "sold",

"fillAlphas": 0.8

}

],

"dataProvider": [

{ "type": "Margherita", "sold": 120 },

{ "type": "Funghi", "sold": 82 },

{ "type": "Capricciosa", "sold": 78 },

{ "type": "Quattro Stagioni", "sold": 71 }

]

}

AmCharts.makeChart(this.$refs.chartdiv,configs);

위와 같이 사용할때  에러가 나오지 않습니다. 

위와 같이 정상적으로 사용 가능합니다.