Vuex + Plotly.js Chart Import

아.. 이 글을 쓰는 이유는 너무 삽질해서 기록하려고 쓴다. 

vuex에 Plotly.js 차트 사용하려는데, vue-plotly가 안읽혀서, 차트가 계속 안그려졌다. 

config에도 추가해보고 npm으로 이것저것 다 다운로드 해보고, 공식페이지도 들어가서 했는데 결국 안됐다.. 

참고 사이트 :

https://bestofvue.com/repo/David-Desmaisons-vue-plotly-vuejs-charts

📈 vue wrapper for plotly.js | BestofVue

https://www.npmjs.com/package/vue-plotly

vue-plotly

만약 vue-plotly 아시는분 알려주세요 ㅜㅜ (->궁서체 진심입니다..)

 

 

일단, 나는 빨리 구현해야했기 때문에, 

https://github.com/plotly/plotly.js/

GitHub - plotly/plotly.js: Open-source JavaScript charting library behind Plotly and Dash

이것을 보고 따라했다.. 

npm i --save plotly.js-dist-min

 

import 는

// ES6 module
import Plotly from 'plotly.js-dist-min'

// CommonJS
var Plotly = require('plotly.js-dist-min')

 

typescript를 사용해서, 에러도 많이 떴는데, 이것저것 tsconfig.json에 추가해서 에러 안나고 차트가 잘 그려졌다. 

https://pjausovec.medium.com/how-to-fix-error-ts7016-could-not-find-a-declaration-file-for-module-xyz-has-an-any-type-ecab588800a8

How to fix error TS7016: Could not find a declaration file for module ‘XYZ’ has an ‘any’ type