안녕하세요 그레이프시티입니다.

문의 주신 Vue 프레임워크에서 다수의 FlexChart 를 한 컴포넌트 내에 생성하는 방법에 대해 답변 드립니다.

단일 파일 컴포넌트인 .vue 파일의 <template> 태그 내부에 <wj-flex-chart> 태그를 추가하여 다수의 FlexChart를 생성할 수 있습니다. 

아래의 샘플을 참고해 보시기 바랍니다.

샘플은 다음과 같은 방법으로 구현하였습니다.

1. HelloWorld.vue 의 <template> 태그 내부에 <wj-flex-chart> 태그를 추가하여 각기 다른 3 가지 형태의 FlexChart를 생성합니다.
2. 이때, 각각의 FlexChart에서 불러오는 데이터는 data.js 에서 가져온 데이터입니다.
3. 다수의 FlexChart를 생성하는 단일 파일 컴포넌트인 HelloWorld 컴포넌트를 App.vue 에 <HelloWorld> 태그를 삽입하여 불러와 화면에 띄웁니다.