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
        },
    ]
},

数据无法在Chart.js折线图中正确显示

1 个答案: