ChartJS 从firestore检索数据时,图表js折线图中的数据点未沿着y轴正确定位

qyyhg6bp  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(147)

我遇到了一个问题,我的数据点从数据检索firestore没有正确定位为y轴,虽然工具提示数据是正确的。例如,下面的数据是假设在23,但它的位置在100+。
当我手动输入数据时,它的位置是正确的,所以我认为这可能是从数据库中检索后的数据类型问题,但我检查了一下,它是一个适当的“数字”数据类型。
我不太清楚这个问题是怎么来的,如何解决。我非常感谢你在这个问题上的帮助!谢谢!

<script>
    import {
        auth,
        db
    } from "../../src/main";
    import Sidebar from "../components/Navigation/Sidebar.vue";
    import Topbar from "../components/Navigation/Topbar.vue";
    import ChartTest from "../components/ProgressPage/ChartTest.vue";
    import Chart from 'chart.js/auto';
    import {
        getFirestore,
        doc,
        updateDoc,
        getDoc,
        setDoc,
        collection,
        addDoc,
        deleteDoc,
        deleteField,
        arrayUnion,
        arrayRemove
    } from "firebase/firestore";
    export default {
        name: "Progress",
        components: {
            Sidebar,
            Topbar,
            ChartTest
        },
        mounted() {
            const progressChart = new Chart(document.getElementById("progress-chart"), {
                type: 'line',
                data: {
                    labels: ['CA1', 'SA1', 'CA2', 'SA2'],
                    datasets: [

                    ]
                },
                options: {
                    plugins: {
                        title: {
                            display: true,
                            text: this.title
                        }
                    },
                    scales: {

                        y: {
                            display: true,
                            stacked: true,
                            // max: 0,
                            // min: 200,
                            title: {
                                display: true,
                                text: 'Your Score (%)'
                            }
                        }
                    }
                }
            });

            this.getData().then((data) => {
                progressChart.data.datasets=data
                console.log(typeof(data[0].data[0]))//number data type
                this.getCount(data)
                progressChart.update()  //updating graph with new set of data her

            })

        },
    methods: {
        getCount(data) {
                 this.count= data.length
            },
            async getData() {
                var email = localStorage.getItem("email");
                var ref = doc(db, 'users', email);
                const docSnap = await getDoc(ref)
                if (docSnap.exists()) {
                    var data = docSnap.data().progressResults
                    return data

                } else {
                    console.log('does not exist')
                }

            },
            async addResult() {

                let count = this.existingSubjects.length
                var email = localStorage.getItem("email");
                var ref = doc(db, 'users', email);

                if (!this.existingSubjects.includes(this.subject)) {
                    this.existingSubjects.push(this.subject)

                    const newData = {
                        data: [{ x: this.examType,y:this.score}],
                        label: this.subject,
                        borderColor: this.colors[this.count],
                        fill: false
                    }
                    await updateDoc(
                        ref, {
                            progressResults: arrayUnion(newData)

                        }
                    )
                    console.log(newData)
                } else {
                    //TBC
                }

            }
        },

        data() {
            return {
                score: '',
                examType: '',
                subject: '',
                count:0,
                existingSubjects: [],
                colors: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850","#21c095","#bbc021","#1a993a","##904b23","#a01359","#a04913","#534270"],
                title: '',
                data: {
                    labels: ['CA1', 'SA1', 'CA2', 'SA2'],
                    datasets: [
                    ]
                },
                tabs: [{
                        link: '',
                        name: "subject",
                        dropdown: true,
                        dropdownTabs: [{
                                name: 'math',
                                link: '#'
                            },
                            {
                                name: 'science',
                                link: '#'
                            },
                        ]

                    },
                    {
                        link: '#',
                        name: "test",
                        dropdown: false,
                        dropdownTabs: []

                    },
                ]

            }
        }
    }
</script>
uwopmtnx

uwopmtnx1#

这是因为您将y轴设置为“堆叠”,以便将所有值放在彼此的顶部,其中行之间的间距是您提供的值。
要获得所需的行为,您需要移除stacked或将其设置为false:

y: {
  stacked: false
}

相关问题