在Vue应用中动态更新Chart.js折线图数据

<template>
  <div>
    <form @submit.prevent="addResult"> <!-- 使用.prevent阻止表单默认提交行为 -->
      <div class="row">
        <div class="mb-3 col-6">
          <label class="form-label">Score</label>
          <input type="number" min="0" max="100" class="form-control" id="score"
                 name="score" placeholder="Score in %" v-model='score' />
        </div>
        <div class="mb-3 form-check col-6">
          <label class="form-label">Exam Type</label>
          <select class="form-select form-select"
                  aria-label=".form-select-sm example" id="examType"
                  v-model='examType'>
            <option value="CA1">CA1</option>
            <option value="SA1">SA1</option>
            <option value="CA2">CA2</option>
            <option value="SA2">SA2</option>
          </select>
        </div>
      </div>
      <div class="row">
        <div class="mb-3">
          <label class="form-label">Subject</label>
          <input type="text" class="form-control" id="subject" name="subject"
                 placeholder="" v-model='subject' />
        </div>
      </div>

      <div class="modal-footer d-block">
        <button type="submit" class="btn btn-warning float-end">Submit</button>
      </div>
    </form>
    <div>
      <ChartTest :data="data" :title='title' />
    </div>
  </div>
</template>

<script>
import ChartTest from "./components/ProgressPage/ChartTest.vue"; // 确保路径正确
export default {
  name: "Progress",
  components: {
    ChartTest
  },
  data() {
    return {
      score: '',
      examType: '',
      subject: '',
      existingSubjects: [],
      colors: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
      title: '学生成绩进步图', // 示例标题
      data: {
        labels: ['CA1', 'SA1', 'CA2', 'SA2'],
        datasets: [
          // 初始数据集，可为空或包含默认数据
        ]
      },
    }
  },
  methods: {
    addResult() {
      let count = this.existingSubjects.length;

      // 检查科目是否已存在
      let existingDatasetIndex = this.data.datasets.findIndex(ds => ds.label === this.subject);

      if (existingDatasetIndex === -1) {
        // 如果是新科目，则添加新的数据集
        this.existingSubjects.push(this.subject);
        const newData = {
          data: [this.score, null, null, null], // 假设只添加当前考试类型的分数，其他为null
          label: this.subject,
          borderColor: this.colors[count % this.colors.length], // 循环使用颜色
          fill: false
        };
        // 根据examType更新对应的分数位置
        const examTypeIndex = this.data.labels.indexOf(this.examType);
        if (examTypeIndex !== -1) {
            newData.data[examTypeIndex] = this.score;
        }
        this.data.datasets.push(newData);
      } else {
        // 如果科目已存在，则更新对应科目的分数
        const examTypeIndex = this.data.labels.indexOf(this.examType);
        if (examTypeIndex !== -1) {
            // 确保Vue能检测到数组内部对象属性的变化
            this.$set(this.data.datasets[existingDatasetIndex].data, examTypeIndex, this.score);
        }
      }
      // 清空表单字段以便下次输入
      this.score = '';
      this.examType = '';
      this.subject = '';
    }
  },
}
</script>

<template>
  <canvas id="progress-chart" width="600" height="450"></canvas>
</template>

<script>
import Chart from 'chart.js/auto'; // 确保导入正确

export default {
  name: 'ChartTest',
  props: {
    data: {
      type: Object,
      required: true // 确保data prop是必需的
    },
    title: String
  },
  data() {
    return {
      myChart: null // 用于存储Chart实例
    };
  },
  mounted() {
    // 在组件挂载后初始化图表
    this.createChart();
  },
  watch: {
    // 监听data prop的变化
    data: {
      handler(newData) {
        if (this.myChart) {
          // 如果图表已存在，更新其数据并重新渲染
          this.myChart.data = newData;
          this.myChart.update();
        } else {
          // 如果图表尚未创建（理论上不会发生，但作为备用），则创建它
          this.createChart();
        }
      },
      deep: true // 深度监听data对象内部属性的变化
    },
    // 监听title prop的变化 (如果需要动态更新标题)
    title: {
      handler(newTitle) {
        if (this.myChart && this.myChart.options.plugins.title) {
          this.myChart.options.plugins.title.text = newTitle;
          this.myChart.update();
        }
      }
    }
  },
  methods: {
    createChart() {
      // 销毁旧的图表实例（如果存在），防止重复创建
      if (this.myChart) {
        this.myChart.destroy();
      }
      const ctx = document.getElementById("progress-chart");
      if (ctx) {
        this.myChart = new Chart(ctx, {
          type: 'line',
          data: this.data,
          options: {
            plugins: {
              title: {
                display: true,
                text: this.title || '图表标题' // 使用传入的title或默认值
              }
            },
            scales: {
              y: {
                display: true,
                // stacked: true, // 折线图通常不堆叠，根据需求决定是否保留
                min: 0, // 确保y轴从0开始
                max: 100, // 确保y轴最大值为100
                title: {
                  display: true,
                  text: '你的分数 (%)'
                }
              }
            }
          }
        });
      }
    }
  },
  beforeUnmount() { // Vue 3 生命周期钩子，Vue 2 使用 beforeDestroy
    // 在组件销毁前销毁Chart实例，防止内存泄漏
    if (this.myChart) {
      this.myChart.destroy();
    }
  }
}
</script>