도면 차트 파일을 선택하기 위한 <select> 방법을 만듭니다.

Question

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

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

<템플릿>
  <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,
        ]
      },
    },
}

구성품은 다음과 같습니다.

<템플릿>
  

    
  

<스크립트>

'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]},
            ],
          },
          ]
        },
    });
  }
}

<스타일>
  
            

Answer 1

옵션에 .js 파일 이름과 동일한 값이 포함된 <select> 태그를 사용할 수 있습니다. 선택 항목이 변경되면 파일을 동적으로 가져오고 그래프 구성 요소에 속성으로 전달하는 변수에 가져온 데이터를 할당하는 메서드를 실행합니다. 간단한 예제 코드:

으아악 으아악