0

我将 chart.js 与 vue.js 一起使用。我有一个折线图，我想添加数据（稍后由 SSE 自动添加）。我修改了另一个示例，但错误仍然相同。它在调用 this.moonData.push（或 this.testData.datasets[0].data.push）时“崩溃”。它必须与moonData的ref（）有关。当我只使用非参考版本时，推送成功，但图表没有更新。顺便说一句，推标签成功

我正在使用 chart.js@3.7.0, vue@3.2.29

在火狐中：

 Uncaught InternalError: too much recursion
get reactivity.esm-bundler.js:406
toRaw reactivity.esm-bundler.js:927
key reactivity.esm-bundler.js:398
value helpers.segment.js:1554
key reactivity.esm-bundler.js:398
value helpers.segment.js:1554
key reactivity.esm-bundler.js:398
value helpers.segment.js:1554

在铬：

runtime-core.esm-bundler.js?5c40:218 Uncaught RangeError: Maximum call stack size exceeded
at Object.get (reactivity.esm-bundler.js?a1e9:406:1)
at toRaw (reactivity.esm-bundler.js?a1e9:927:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)


    export default defineComponent({
        // name: "PlanetChart",
        setup() {
            let moonData = ref<number[]>([]);

            const testData = computed<ChartData<"line">>(() => ({
                labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
                datasets: [
                    {
                        label: "Number of Moons",
                        data: moonData.value,
                        backgroundColor: "rgba(54,73,93,.5)",
                        borderColor: "#36495d",
                        borderWidth: 3,
                    },
                    {
                        label: "Planetary Mass (relative to the Sun x 10^-6)",
                        data: [0.166, 2.081, 3.003, 0.323, 954.792, 285.886, 43.662, 51.514],
                        backgroundColor: "rgba(71, 183,132,.5)",
                        borderColor: "#47b784",
                        borderWidth: 3,
                    },
                ],
            }));

            const options = ref<ChartOptions<"line">>({
                elements: {
                    line: {
                        tension: 0,
                        fill: false,
                    },
                },
                scales: {
                    yAxes: {
                        ticks: {
                            padding: 25,
                            stepSize: 50,
                        },
                    },
                },
            });

            return {
                testData,
                options,
                moonData,
            };
        },
        mounted() {
            const ctx = document.getElementById("my-planet-chart") as HTMLCanvasElement;
            console.log("Found context: ", ctx);
            let c = new Chart(ctx, {
                type: "line",
                data: this.testData,
                options: this.options,
            });
            console.log("Created chart: ", c);
        },
        methods: {
            AddData() {
                console.log("Appending data...");
                this.moonData.push(Math.round(Math.random() * 1000));
                console.log("moonData: ", this.moonData.length);
                // this.testData.datasets[0].data.push(Math.round(Math.random() * 1000));
                console.log("moonData: ", this.testData.datasets[0].data);
            },
        },
    });

有任何想法吗？

4

0 回答 0