I have a chart drawn using data from an external file. Now I want a select box where the user can select the file to read. This way the chart can change dynamically. How can I use vue and chartjs to achieve this functionality?
Currently, I import data in Home like this:
The data for each file is as follows:
export const data = { "points": { "line1": { "x": [ -11, -11, ], "y": [ 7, 8, ] }, }, } The components are as follows:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can use the
tag where the options contain a value equal to the name of your .js file. When the selection changes, run a method that dynamically imports the file and assigns the imported data to variables you pass as properties to the Graph component. Simple sample code:data() { return { data: null, }; }, methods: { selectFile(e) { import(`@/data/${e.target.value}.js`).then((res) => { this.data = res.data; }); }, },