Buat kaedah <select> untuk memilih fail carta lukisan

Question

Saya mempunyai carta yang dilukis menggunakan data daripada fail luaran. Sekarang saya mahu kotak pilih di mana pengguna boleh memilih fail untuk dibaca. Dengan cara ini carta boleh berubah secara dinamik. Bagaimanakah saya boleh menggunakan vue dan chartjs untuk mencapai fungsi ini?

Pada masa ini, saya mengimport data dalam Laman Utama seperti ini:

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

<skrip>
import { Component, Prop, Vue } daripada 'vue-property-decorator';
import Graf daripada '@/components/Graph.vue';
import {data} daripada '@/data/dataFile.js'

@Komponen({
  komponen: {
    graf,
  },
})
eksport kelas lalai HomeView memanjangkan Vue {
  data() {
    kembali {
      data: data,
    }
  }
}
</script>

Data untuk setiap fail adalah seperti berikut:

eksport data const = {
    "mata": {
      "baris 1": {
        "x": [
          -11,
          -11,
        ],
        "y": [
          7,
          8,
        ]
      },
    },
}

Komponen adalah seperti berikut:

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

import Carta daripada 'chart.js/auto';

eksport lalai{
  nama: "Graf",
  prop: ["vul_data"],

  dipasang(){
    const ctx = document.getElementById('myChart');
    const myChart = Carta baharu(ctx, {
        jenis: 'menyebarkan',
        data: {
          set data: [{
            label: 'Barisan 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]},
            ],
          },
          ]
        },
    });
  }
}
</skrip>
<gaya>
  
</style>

Answer 1

Anda boleh menggunakan teg <select> di mana pilihan mengandungi nilai yang sama dengan nama fail .js anda. Apabila pilihan berubah, jalankan kaedah yang mengimport fail secara dinamik dan menyerahkan data yang diimport kepada pembolehubah yang anda hantar sebagai sifat kepada komponen Graf. Kod contoh mudah:

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