vue-chartjs数据变更无响应且触发栈溢出错误求助

按照vue-chartjs官方指引操作，期望图表能跟踪labels、data1、data2的新增数据并重绘。点击Add按钮后，X轴新增了条目，但Y轴数据未显示，且浏览器控制台出现栈溢出错误：

runtime-core.esm-bundler.js?d2dd:220 Uncaught RangeError: Maximum call stack size exceeded
    at pauseTracking (reactivity.esm-bundler.js?89dc:247:1)
    at instrumentations.<computed> (reactivity.esm-bundler.js?89dc:441:1)
    at Proxy.value (helpers.collection.ts?1493:138:1)
    at instrumentations.<computed> (reactivity.esm-bundler.js?89dc:442:1)
    at Proxy.value (helpers.collection.ts?1493:138:1)
    at instrumentations.<computed> (reactivity.esm-bundler.js?89dc:442:1)
    at Proxy.value (helpers.collection.ts?1493:138:1)
    at instrumentations.<computed> (reactivity.esm-bundler.js?89dc:442:1)
    at Proxy.value (helpers.collection.ts?1493:138:1)
    at instrumentations.<computed> (reactivity.esm-bundler.js?89dc:442:1)

项目依赖：

"dependencies": {
  "chart.js": "^4.0.1",
  "chartjs-plugin-zoom": "^1.2.1",
  "core-js": "^3.8.3",
  "vue": "^3.2.13",
  "vue-chartjs": "^4.1.2"
}

组件代码：

<template>
  <div @click="addRecord">Add</div>
  <Line :chart-data="getData" :chart-options="getOptions"/>
</template>

<script>
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Line } from 'vue-chartjs';
import zoomPlugin from 'chartjs-plugin-zoom';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  zoomPlugin
);

export default {
  name: "LineChart",
  components: {Line},
  data() {
    return {
      labels: [],
      data1: [],
      data2: [],
    }
  },
  methods: {
    addRecord() {
      const last_v = this.labels.length ? this.labels[this.labels.length - 1] : 0;
      this.labels.push(last_v + 1);
      this.data1.push(4);
      this.data2.push(5);
    }
  },
  computed: {
      getOptions() {
          return {
              label: 'Load',
              borderWidth: 2,
              animation: false,
              spanGaps: false,
              maintainAspectRatio: false,
              interaction: {
                  intersect: false,
                  mode: 'index'
              },
              pointRadius: 0,
              scales: {
                  x: {
                      ticks: {
                          source: 'auto',
                          // Disabled rotation for performance
                          // maxRotation: 0,
                          autoSkip: true,
                      }
                  }
              },
              responsive: true,
              plugins: {
                  tooltip: {
                      callbacks: {
                          label: function(context) {
                              return `${context.raw} мм.`;
                          }
                      }
                  },
                  title: {
                      display: true,
                      text: 'x'
                  },
                  zoom: {
                      pan: {
                          enabled: true,
                          mode: 'x'
                      },
                      limits: {
                          x: {min: 50}
                      },
                      zoom: {
                          mode: 'x',
                          wheel: {
                              enabled: true,
                          }
                      }
                  }
              },
          }
      },
    getData() {
      return {
        labels: this.labels,
        datasets: [
          {
            label: 'Axis x',
            borderColor: 'red',
            data: this.data1
          },
          {
            label: 'Axis z',
            borderColor: 'green',
            data: this.data2
          }
        ]
      }
    }
  }
}
</script>

1. 修复栈溢出问题 #

栈溢出的核心原因是计算属性命名冲突：你在getOptions里定义了顶级的label: 'Load'，这个属性会和Chart.js内部逻辑产生循环依赖，触发无限递归。

删除getOptions中的顶级label属性即可解决栈溢出：

getOptions() {
    return {
        // 移除这一行：label: 'Load',
        borderWidth: 2,
        // ... 其他配置保持不变
    }
}

2. 确保数据正确显示 #

修复栈溢出后，Y轴数据即可正常显示。若想进一步优化图表效果，可给每个数据集添加fill: false，避免填充区域干扰线条显示：

getData() {
  return {
    labels: this.labels,
    datasets: [
      {
        label: 'Axis x',
        borderColor: 'red',
        data: this.data1,
        fill: false
      },
      {
        label: 'Axis z',
        borderColor: 'green',
        data: this.data2,
        fill: false
      }
    ]
  }
}

最终修改后的关键代码片段 #

computed: {
    getOptions() {
        return {
            borderWidth: 2,
            animation: false,
            spanGaps: false,
            maintainAspectRatio: false,
            interaction: {
                intersect: false,
                mode: 'index'
            },
            pointRadius: 0,
            scales: {
                x: {
                    ticks: {
                        source: 'auto',
                        autoSkip: true,
                    }
                }
            },
            responsive: true,
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.raw} мм.`;
                        }
                    }
                },
                title: {
                    display: true,
                    text: 'x'
                },
                zoom: {
                    pan: {
                        enabled: true,
                        mode: 'x'
                    },
                    limits: {
                        x: {min: 50}
                    },
                    zoom: {
                        mode: 'x',
                        wheel: {
                            enabled: true,
                        }
                    }
                }
            },
        }
    },
    getData() {
        return {
            labels: this.labels,
            datasets: [
                {
                    label: 'Axis x',
                    borderColor: 'red',
                    data: this.data1,
                    fill: false
                },
                {
                    label: 'Axis z',
                    borderColor: 'green',
                    data: this.data2,
                    fill: false
                }
            ]
        }
    }
}

内容的提问来源于stack exchange，提问作者N.Maxim