외부 파일의 데이터를 사용하여 차트를 그렸습니다. 이제 사용자가 읽을 파일을 선택할 수 있는 선택 상자가 필요합니다. 이렇게 하면 차트가 동적으로 변경될 수 있습니다. 이 기능을 달성하기 위해 vue와 Chartjs를 어떻게 사용할 수 있습니까?

현재 홈에서 다음과 같이 데이터를 가져옵니다.

<템플릿> 
 <그래프 :vul_data="data"/> 
  <스크립트> 'vue-property- decorator'에서 { Component, Prop, Vue }를 가져옵니다. '@/comComponents/Graph.vue'에서 그래프를 가져옵니다. '@/data/dataFile.js'에서 {데이터} 가져오기 @요소({ 구성요소: { 그래프, }, }) 기본 클래스 내보내기 HomeView는 Vue를 확장합니다. 데이터() { 반품 { 데이터: 데이터, } } }
각 파일의 데이터는 다음과 같습니다.
 
const 데이터 내보내기 = { "포인트들": { "라인1": { "x": [ -11, -11, ], "y": [ 7, 8, ] }, }, }
 
구성품은 다음과 같습니다.
 
<템플릿> 
  
  <스크립트> 'chart.js/auto'에서 차트를 가져옵니다. 기본값 내보내기{ 이름: "그래프", 소품: ["vul_data"], 마운트(){ const ctx = document.getElementById('myChart'); const myChart = 새 차트(ctx, { 유형: '분산', 데이터: { 데이터세트: [{ 라벨: '라인 1', 데이터:[ {x: this.vul_data.points.line1.x[0], y: this.vul_data.points.line1.y[0]}, {x: this.vul_data.points.line1.x[1], y: this.vul_data.points.line1.y[1]}, ], }, ] }, }); } }  <스타일>