在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: 'Progress Chart', // 确保title有初始值
      data: {
        labels: ['CA1', 'SA1', 'CA2', 'SA2'],
        datasets: [
          // 初始数据集为空或包含一些默认数据
        ]
      },
    }
  },
  methods: {
    addResult() {
      // 确保在提交时清除表单验证错误或关闭模态框
      // data-bs-dismiss="modal" 属性通常用于Bootstrap模态框，这里假设没有模态框或已处理

      let count = this.existingSubjects.length;
      const { score, examType, subject, existingSubjects, colors, data } = this;

      // 验证输入
      if (!score || !examType || !subject) {
          alert('Please fill in all fields.');
          return;
      }

      // 确保数据集的data数组长度与labels匹配
      const newScores = Array(data.labels.length).fill(null);
      const examTypeIndex = data.labels.indexOf(examType);

      if (!existingSubjects.includes(subject)) {
        // 如果是新科目，添加一个新的数据集
        existingSubjects.push(subject);
        if (examTypeIndex !== -1) {
          newScores[examTypeIndex] = parseFloat(score); // 转换为数字
        }
        const newData = {
          data: newScores,
          label: subject,
          borderColor: colors[count % colors.length], // 循环使用颜色
          fill: false
        };
        this.data.datasets.push(newData);
      } else {
        // 如果科目已存在，更新其对应的分数
        const existingDataset = this.data.datasets.find(ds => ds.label === subject);
        if (existingDataset && examTypeIndex !== -1) {
          // Vue 2 对数组索引直接修改的响应式有限，但对对象属性的修改是响应式的。
          // 更好的做法是创建新数组或使用Vue.set。
          // 这里我们直接修改，ChartTest的watch会检测到data prop的变化（对象引用不变但内部内容变了）
          // 并重新赋值给chart.data，所以通常也能工作。
          // 更严谨的做法是：
          // const updatedData = [...existingDataset.data];
          // updatedData[examTypeIndex] = parseFloat(score);
          // existingDataset.data = updatedData; // 替换整个数组以确保响应式
          existingDataset.data[examTypeIndex] = parseFloat(score); // 直接修改
        }
      }

      // 强制Vue更新data对象的引用，确保ChartTest的watch能够检测到变化
      // 这在某些情况下是必要的，特别是当内部数组元素被修改时。
      this.data = { ...this.data, datasets: [...this.data.datasets] };

      // 清空表单
      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: {
                type: String,
                default: 'Chart Title' // 提供默认标题
            }
        },
        data() {
            return {
                chartInstance: null // 用于存储Chart.js实例
            };
        },
        mounted() {
            this.createChart();
        },
        watch: {
            // 监听data prop的深度变化
            data: {
                handler(newData) {
                    if (this.chartInstance) {
                        // 更新Chart实例的数据
                        this.chartInstance.data = newData;
                        // 强制Chart.js重新渲染
                        this.chartInstance.update();
                    } else {
                        // 如果chartInstance尚未创建，则重新创建
                        this.createChart();
                    }
                },
                deep: true, // 深度监听data对象内部属性的变化
                immediate: true // 立即执行一次handler，确保初始渲染
            },
            // 也可以监听title变化
            title(newTitle) {
                if (this.chartInstance) {
                    this.chartInstance.options.plugins.title.text = newTitle;
                    this.chartInstance.update();
                }
            }
        },
        methods: {
            createChart() {
                // 如果已存在实例，先销毁，防止重复创建
                if (this.chartInstance) {
                    this.chartInstance.destroy();
                }

                const ctx = document.getElementById("progress-chart");
                if (!ctx) {
                    console.error("Canvas element not found!");
                    return;
                }

                this.chartInstance = new Chart(ctx, {
                    type: 'line',
                    data: this.data, // 使用传入的data prop
                    options: {
                        plugins: {
                            title: {
                                display: true,
                                text: this.title // 使用传入的title prop
                            }
                        },
                        scales: {
                            y: {
                                display: true,
                                // stacked: true, // 折线图通常不堆叠，除非有特殊需求
                                max: 100, // 分数最大值100
                                min: 0,   // 分数最小值0
                                title: {
                                    display: true,
                                    text: 'Your Score (%)'
                                }
                            }
                        }
                    }
                });
            }
        },
        beforeUnmount() {
            // 在组件销毁前，销毁Chart.js实例，防止内存泄漏
            if (this.chartInstance) {
                this.chartInstance.destroy();
            }
        }
    }
</script>