Erstellen Sie eine <select>-Methode zum Auswählen von Zeichnungsdiagrammdateien

Question

Ich habe ein Diagramm, das mit Daten aus einer externen Datei erstellt wurde. Jetzt möchte ich ein Auswahlfeld, in dem der Benutzer die zu lesende Datei auswählen kann. Auf diese Weise kann sich das Diagramm dynamisch ändern. Wie kann ich Vue und ChartJS verwenden, um diese Funktionalität zu erreichen?

Derzeit importiere ich Daten in Home wie folgt:

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

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

@Komponente({
  Komponenten: {
    Graph,
  },
})
Standardklasse exportieren HomeView erweitert Vue {
  Daten() {
    zurückkehren {
      Daten: Daten,
    }
  }
}
</script>

Die Daten für jede Datei lauten wie folgt:

const data exportieren = {
    „Punkte“: {
      "Linie 1": {
        "X": [
          -11,
          -11,
        ],
        „y“: [
          7,
          8,
        ]
      },
    },
}

Die Komponenten sind wie folgt:

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

Diagramm aus „chart.js/auto“ importieren;

Standard exportieren{
  Name: „Grafik“,
  Requisiten: ["vul_data"],

  mount(){
    const ctx = document.getElementById('myChart');
    const myChart = new Chart(ctx, {
        Typ: 'Scatter',
        Daten: {
          Datensätze: [{
            Beschriftung: 'Zeile 1',
            Daten:[
              {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>
<Stil>
  
</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;
    });
  },
},