无法获取顶点图中的数据

时间:2020-02-03 17:21:46

标签: vue.js google-cloud-firestore apexcharts

我试图在我的vue js应用程序中使用先端图的样条图面积图,并在应用程序的创建部分中从Firestore中提取时间戳格式的日期,并在x轴中显示,但在x轴中不显示显示时间戳并给出错误。 这是代码

export default {

    data() {


        return {

            options : { year: "numeric", month: "numeric",  
    day: "numeric" },

            timestamp:[],

            RecruiterChart: {
    series: [{
            name: 'Total Jobs Posted',
            data: [11, 32, 45, 32, 34, 52, 41]

        }, {
          name: 'Applied Candidates',
            data: [31, 40, 28, 51, 42, 109, 100]  
    }],
    chartOptions: {
        dataLabels: {
            enabled: false
        },
        stroke: {
            curve: 'smooth'
        },
        colors: themeColors,
        xaxis: {
            type: 'datetime',
            categories: []

        },

        tooltip: {
            x: {
                format: 'dd/MM/yyyy'
            },

        }
    }
},
        }
    },


    components: {
        VueApexCharts
    }, 

    created(){
      const thisIns = this;


    var u= firebase.auth().currentUser

             let Ref=firebase.firestore().collection("Recruiter").doc(u.uid).collection("Jobs")
    Ref.orderBy("timestamp", "desc").onSnapshot(function(snapshot){
      $.each(snapshot.docChanges(), function(){
        var change= this
        if(change.type==="added"){
            var ab = change.doc.data().timestamp.toDate().toLocaleString("en-CH", thisIns.options)

            thisIns.time.push(ab)

          thisIns.RecruiterChart.chartOptions.xaxis.categories.push(
            ab
            ) 

           console.log( thisIns.RecruiterChart.chartOptions.xaxis.categories)
        }

      })
    })
    console.log(thisIns.RecruiterChart.chartOptions.xaxis.categories)

        },



    }

但图形给出错误 错误:属性cx:预期长度为“ NaN”。

0 个答案:

没有答案