Buat kaedah <select> untuk memilih fail carta lukisan
P粉022140576
P粉022140576 2023-08-20 10:08:18
0
1
576
<p>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? </p> <p>Pada masa ini, saya mengimport data dalam Laman Utama seperti ini:</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Data untuk setiap fail adalah seperti berikut: </p> <pre class="brush:php;toolbar:false;">eksport data const = { "mata": { "baris 1": { "x": [ -11, -11, ], "y": [ 7, 8, ] }, }, }</pre> <p>Komponen adalah seperti berikut:</p> <pre class="brush:php;toolbar:false;"><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></pre>
P粉022140576
P粉022140576

membalas semua(1)
P粉107991030

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;
    });
  },
},
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan