制作一个用于选择绘制图表文件的<select>的方法
P粉022140576
2023-08-20 10:08:18
<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>
您可以使用
标签，其中的选项包含与您的.js文件名称相等的值。当选择发生变化时，运行一个方法，动态导入该文件并将导入的数据赋值给您作为属性传递给Graph组件的变量。简单的示例代码：data() { return { data: null, }; }, methods: { selectFile(e) { import(`@/data/${e.target.value}.js`).then((res) => { this.data = res.data; }); }, },