数据未在chart.js之线图正常显示

Question

我试图找出为什么我的图表没有显示我的数据。我假设这是因为一些与ticks，但我不确定。不幸的是，我要么让我在控制台中的错误。我正确地让所有的数据，但它似乎是一些选项，也许，我已经搞砸了。我试着阅读文档和以下一些他们的样品，但不工作，我很遗憾。

有关更多信息，我的图是一个Vue组件中，我试图把它显示的门票数量关闭，每天开放在2个月的跨度。该数据是从我的道具传递英寸

下面是当前正在显示它：

下面是代码：

export default {
    props:['created', 'closed','labels'],
    mounted() {
        require('chart.js');

        Chart.defaults.global.defaultFontColor = "#fff";
        Chart.defaults.global.defaultFontFamily = "Roboto";

        console.log(this.labels);
        console.log(this.closed);
        console.log(this.created);

        var mychart = new Chart(document.getElementById("chart"), {
            type: 'line',
            maintainAspectRation:true,
            labels: this.labels,
            data: {
                datasets: [{
                        fill: false,
                        label: 'Tickets Created',
                        backgroundColor: '#e52d27',
                        data: this.created
                    },
                    {
                        fill: false,
                        label: 'Tickets Closed',
                        backgroundColor: '#00FF58',
                        data: this.closed
                    },
                ]
            },
            options: {
            responsive: true,
            title: {
                display: true,
                text: 'Ticket Trend'
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Month'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Value'
                    },
                    ticks: {
                        min: 0,
                        max: 20,
                    }
                }]
            }
        }
        });
    }
}

这里是我的this.labels：

["12-05-18", "12-06-18", "12-07-18", "12-10-18", "12-11-18", "12-12-18",
"12-13-18", "12-14-18", "12-17-18", "12-18-18", "12-19-18", "12-20-18", 
"12-21-18", "12-24-18", "12-25-18", "12-26-18", "12-27-18", "12-28-18", 
"12-31-18", "01-01-19", "01-02-19", "01-03-19", "01-04-19", "01-07-19", 
"01-08-19", "01-09-19", "01-10-19", "01-11-19", "01-14-19", "01-15-19", 
"01-16-19", "01-17-19", "01-18-19", "01-21-19", "01-22-19", "01-23-19",
"01-24-19", "01-25-19", "01-28-19", "01-29-19", "01-30-19", "01-31-19",
"02-01-19", "02-04-19"]

this.closed：

[0, 0, 0, 0, 10, 0, 0, 0, 0, 10, 0, 20, 10, 0, 0, 0, 0, 0, 0, 0, 20, 0, 0,
 3, 0, 0, 0, 0, 0, 0, 0, 2, 1, 0, 0, 0, 6, 0, 0, 2, 0, 0, 0, 0]

this.created：

[0, 0, 0, 0, 0, 0, 20, 0, 0, 0, 0, 0, 10, 0, 0, 0, 0, 0, 0, 2, 0, 0, 20, 0,
 0, 0, 0, 0, 10, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

Answer 1

您的标签需要去数据对象内如

data: {
    labels: this.labels,  // <--- This 
    datasets: [{
            fill: false,
            label: 'Tickets Created',
            backgroundColor: '#e52d27',
            data: this.created
        },
        {
            fill: false,
            label: 'Tickets Closed',
            backgroundColor: '#00FF58',
            data: this.closed
        },
    ]
},