如何用Vue+Chart.js实现下拉选择文件动态切换图表数据

问题背景 #

现有通过读取外部文件绘制的Chart.js散点图，需添加<select>下拉选择框，让用户切换不同数据源文件，实现图表动态更新。

步骤1：改造Home组件（添加下拉选择器+多数据源管理） #

首先在Home组件中导入所有需要的数据源，添加下拉选择框绑定选择逻辑，将选中的数据源传递给Graph组件：

<template>
  <div class="home">
    <!-- 下拉选择框：选项对应不同数据源文件 -->
    <select v-model="selectedSource" @change="updateCurrentData">
      <option value="dataFile">数据源1</option>
      <option value="dataFile2">数据源2</option>
      <!-- 新增数据源时，只需在这里添加对应选项 -->
    </select>
    <Graph :vul_data="currentData"/>
  </div>
</template>

<script>
import { Component, Vue } from 'vue-property-decorator';
import Graph from '@/components/Graph.vue';
// 导入所有需要的数据源文件
import { data as dataFile } from '@/data/dataFile.js';
import { data as dataFile2 } from '@/data/dataFile2.js';

@Component({
  components: {
    Graph,
  },
})
export default class HomeView extends Vue {
  data() {
    return {
      // 用对象映射数据源key和对应数据，方便管理
      dataMap: {
        dataFile,
        dataFile2
      },
      selectedSource: 'dataFile', // 默认选中第一个数据源
      currentData: dataFile // 当前生效的数据源
    }
  },
  methods: {
    updateCurrentData() {
      // 根据选中的下拉选项切换数据源
      this.currentData = this.dataMap[this.selectedSource];
    }
  }
}
</script>

步骤2：改造Graph组件（响应数据源变化更新图表） #

原Graph组件仅在mounted时初始化一次图表，无法响应props变化，需修改为监听数据源变化并更新图表：

<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>
<script>
import Chart from 'chart.js/auto';

export default{
  name: "Graph",
  props: ["vul_data"],
  data() {
    return {
      chartInstance: null // 保存Chart实例，用于后续更新
    }
  },
  mounted(){
    this.initChart();
  },
  watch: {
    // 深度监听数据源变化，确保嵌套属性修改也能触发更新
    vul_data: {
      deep: true,
      handler() {
        this.refreshChart();
      }
    }
  },
  methods: {
    // 初始化图表
    initChart() {
      const ctx = document.getElementById('myChart');
      this.chartInstance = new Chart(ctx, {
        type: 'scatter',
        data: this.transformData(),
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    },
    // 封装数据转换逻辑，复用初始化和更新逻辑
    transformData() {
      const lineData = this.vul_data.points.line1;
      return {
        datasets: [{
          label: 'Line 1',            
          data: lineData.x.map((xVal, index) => ({
            x: xVal,
            y: lineData.y[index]
          }))
        }] 
      };
    },
    // 更新图表数据
    refreshChart() {
      this.chartInstance.data = this.transformData();
      this.chartInstance.update(); // 通知Chart.js重新渲染
    }
  },
  beforeDestroy() {
    // 组件销毁时销毁图表实例，避免内存泄漏
    if (this.chartInstance) {
      this.chartInstance.destroy();
    }
  }
}
</script>
<style>
#myChart {
  width: 100%;
  height: 400px;
}
</style>

关键优化点 #

• 数据源扩展性：新增数据源时，只需在Home组件中导入文件、添加下拉选项，无需修改Graph组件逻辑。
• 性能优化：通过更新现有Chart实例的方式刷新图表，而非重新创建实例，减少DOM操作开销。
• 内存管理：在组件销毁时销毁Chart实例，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Carlos Eduardo