动态创建的图表。js图表基于x轴的人口过多时间？

Question

我想创建一个chart.js折线图，y轴为数值，x轴为日期。然而，当我填充图表时，x轴上充满了不应该包含的刻度(您可以看到我的数据被移动到最右边)。当我登录< code>chart.data.labels时，一切似乎都是正确的；这是输出:< code> Array(3) ["10/23/2020，12:00:00 AM "，" 10/27/2020，12:00:00 AM "，" 10/28/2020，12:00:00 AM"]。

当我注释掉时间xAxes[0]时。类型=时间和xAxes。时间按预期加载数据，但所有标签都堆叠在x轴的左角。我不确定如何继续使图表仅显示日期标签。我在下面包含了我的代码：

    var chart = new Chart(document.getElementById("grade-chart"), {
        type: 'line',
        options: {
            legend: {display: true},
            title: {
                display: true,
                text: 'Project Grading'
            },
            scales: {
                xAxes: [{
                    type: 'time',
                    distribution: 'linear',
                    scaleLabel: {
                        display: true,
                        labelString: 'Date Surveyed'
                    },
                    time: {
                        unit: 'month',
                        bounds: 'data',
                        minUnit: 'day',
                        ticks: {
                            source: 'labels'
                        }
                    },
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Scores'
                    },
                    ticks: {
                        beginAtZero: true,
                        max: 100
                    }
                }]
            },
        }
    });

    $.ajax({
        method: 'get',
        url: '/admin/project/project_grade_detail_chart/project_id/' + $("#project-id").val(),
        dataType: 'json',
        success: function(json){
            var dates = json['dates'].map(v => new Date(v).toLocaleString())
            chart.data.labels.push(dates);
            Object.keys(json).forEach(function(name) {
                if(name != 'dates') {
                    chart.data.datasets.push({
                        data: json[name].map((value, i) => ({'t': dates[i], 'y': value})),
                        label: name,
                        borderColor: randColor(),
                        fill: false
                    });
                }
            });
            chart.update(0);
            console.log(chart.data.labels)
        }
    });

编辑：我尝试添加了＜code＞autoskip

Answer 1

该问题是由于选项＜code＞滴答声造成的。源：“标签”定义在x轴上。您应该将其更改为＜code＞ticks。源代码：'data'或者干脆省略它并让图表。js选择最佳选项。

此外，当使用t和y属性将数据作为数据点提供时，无需定义chart.data.labels。

success: function(json){
  var dates = json['dates'].map(v => new Date(v).toLocaleString())
  chart.data.labels.push(dates); // remove this line
  ...