<p>我有一个使用外部文件数据绘制的图表。现在我想要一个选择框，用户可以选择要读取的文件。这样图表就可以动态改变。我如何使用vue和chartjs来实现这个功能？</p> <p>目前我在Home中这样导入数据：</p> <pre class="brush:php;toolbar:false;"><template> <div class="home"> <Graph :vul_data="data"/> </div> </template> <script> import { Component, Prop, Vue } from '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></pre> <p>每个文件的数据如下：</p> <pre class="brush:php;toolbar:false;">export const data = { "points": { "line1": { "x": [ -11, -11, ], "y": [ 7, 8, ] }, }, }</pre> <p>组件如下：</p> <pre class="brush:php;toolbar:false;"><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></pre>

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