国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

<p>我有一個使用外部文件數(shù)據(jù)繪制的圖表?，F(xiàn)在我想要一個選擇框，用戶可以選擇要讀取的文件。這樣圖表就可以動態(tài)改變。我如何使用vue和chartjs來實現(xiàn)這個功能？</p> <p>目前我在Home中這樣導入數(shù)據(jù)：</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>每個文件的數(shù)據(jù)如下：</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;
    });
  },
},