製作一個用於選擇繪製圖表檔案的<select>的方法

Question

我有一個使用外部文件資料繪製的圖表。現在我想要一個選擇框，使用者可以選擇要讀取的檔案。這樣圖表就可以動態改變。我如何使用vue和chartjs來實現這個功能？

目前我在Home中這樣導入資料：

<template>
  <div class="home">
    <Graph :vul_data="data"/>
  </div>
</template>

<script>
import { Component, Prop, Vue } 從 'vue-property-decorator';
import Graph from '@/components/Graph.vue';
import {data} from '@/data/dataFile.js'

@Component({
  components: {
    Graph,
  },
})
export default class HomeView extends Vue {
  data() {
    return {
      data: data,
    }
  }
}
</script>

每個文件的資料如下：

export const data = {
    "points": {
      "line1": {
        "x": [
          -11,
          -11,
        ],
        "y": [
          7,
          8,
        ]
      },
    },
}

組件如下：

<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>
<script>

import Chart from 'chart.js/auto';

export default{
  name: "Graph",
  props: ["vul_data"],

  mounted(){
    const ctx = document.getElementById('myChart');
    const myChart = new Chart(ctx, {
        type: 'scatter',
        data: {
          datasets: [{
            label: 'Line 1',
            data:[
              {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]},
            ],
          },
          ]
        },
    });
  }
}
</script>
<style>
  
</style>

Answer 1

您可以使用<select>標籤，其中的選項包含與您的.js檔案名稱相等的值。當選擇發生變化時，請執行一個方法，動態匯入該檔案並將匯入的資料賦值給您作為屬性傳遞給Graph元件的變數。簡單的範例程式碼：

<select @change="selectFile">
  <option value="dataFile1">文件一</option>
  <option value="dataFile2">文件二</option>
</select>
<Graph :vul_data="data" />

data() {
  return {
    data: null,
  };
},
methods: {
  selectFile(e) {
    import(`@/data/${e.target.value}.js`).then((res) => {
      this.data = res.data;
    });
  },
},