외부 파일의 데이터를 사용하여 차트를 그렸습니다. 이제 사용자가 읽을 파일을 선택할 수 있는 선택 상자가 필요합니다. 이렇게 하면 차트가 동적으로 변경될 수 있습니다. 이 기능을 달성하기 위해 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]}, ], }, ] }, }); } } 스크립트> <스타일>
옵션에 .js 파일 이름과 동일한 값이 포함된
으아악 으아악태그를 사용할 수 있습니다. 선택 항목이 변경되면 파일을 동적으로 가져오고 그래프 구성 요소에 속성으로 전달하는 변수에 가져온 데이터를 할당하는 메서드를 실행합니다. 간단한 예제 코드: