도면 차트 파일을 선택하기 위한 <select> 방법을 만듭니다.
<p>외부 파일의 데이터를 사용하여 차트를 그렸습니다. 이제 사용자가 읽을 파일을 선택할 수 있는 선택 상자가 필요합니다. 이렇게 하면 차트가 동적으로 변경될 수 있습니다. 이 기능을 달성하기 위해 vue와 Chartjs를 어떻게 사용할 수 있습니까? </p>
<p>현재 홈에서 다음과 같이 데이터를 가져옵니다.</p>
<pre class="brush:php;toolbar:false;"><템플릿>
<div class="홈">
<그래프 :vul_data="data"/>
</div>
</템플릿>
<스크립트>
'vue-property- decorator'에서 { Component, Prop, Vue }를 가져옵니다.
'@/comComponents/Graph.vue'에서 그래프를 가져옵니다.
'@/data/dataFile.js'에서 {데이터} 가져오기
@요소({
구성요소: {
그래프,
},
})
기본 클래스 내보내기 HomeView는 Vue를 확장합니다.
데이터() {
반품 {
데이터: 데이터,
}
}
}
<p>각 파일의 데이터는 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false;">const 데이터 내보내기 = {
"포인트들": {
"라인1": {
"x": [
-11,
-11,
],
"y": [
7,
8,
]
},
},
}</pre>
<p>구성품은 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false;"><템플릿>
<div>
<canvas id="myChart"></canvas>
</div>
</템플릿>
<스크립트>
'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]},
],
},
]
},
});
}
}
</스크립트>
<스타일>
