Créer une méthode <select> pour sélectionner les fichiers de graphiques de dessin

Question

J'ai un graphique dessiné à partir des données d'un fichier externe. Maintenant, je veux une zone de sélection dans laquelle l'utilisateur peut sélectionner le fichier à lire. De cette façon, le graphique peut changer dynamiquement. Comment puis-je utiliser vue et chartjs pour obtenir cette fonctionnalité ?

Actuellement, j'importe des données dans Accueil comme ceci :

<template>
  <div class="accueil">
    <Graphique :vul_data="data"/>
  </div>
</modèle>

<script>
importer { Component, Prop, Vue } depuis 'vue-property-decorator' ;
importer le graphique depuis '@/components/Graph.vue' ;
importer des {données} depuis '@/data/dataFile.js'

@Composant({
  Composants: {
    Graphique,
  },
})
exporter la classe par défaut HomeView étend Vue {
  données() {
    retour {
      données : données,
    }
  }
}
</script>

Les données de chaque fichier sont les suivantes :

exporter les données const = {
    "points": {
      "ligne 1": {
        "X": [
          -11,
          -11,
        ],
        "o": [
          7,
          8,
        ]
      },
    },
}</pré>
<p>Les composants sont les suivants :</p>
<pre class="brush:php;toolbar:false;"><template>
  <div>
    <id de toile="myChart"></canvas>
  </div>
</modèle>
<script>

importer le graphique depuis 'chart.js/auto' ;

exporter par défaut{
  nom : "Graphique",
  accessoires : ["vul_data"],

  monté(){
    const ctx = document.getElementById('myChart');
    const monChart = nouveau Graphique(ctx, {
        tapez : 'dispersion',
        données: {
          ensembles de données : [{
            étiquette : 'Ligne 1',
            données:[
              {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

Vous pouvez utiliser la balise <select> où les options contiennent une valeur égale au nom de votre fichier .js. Lorsque la sélection change, exécutez une méthode qui importe dynamiquement le fichier et attribue les données importées aux variables que vous transmettez en tant que propriétés au composant Graph. Exemple de code simple :

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