使用 Chart.js 仅在折线图的 X 轴上显示有限数量的标签答案

【问题标题】：Display a limited number of labels only on X-Axis of Line Chart using Chart.js使用 Chart.js 仅在折线图的 X 轴上显示有限数量的标签
【发布时间】：2018-09-16 19:51:27
【问题描述】：

1) 如何使用chart.js在折线图的X轴上只显示第一个、中间和最后一个或只显示第一个和最后一个标签（日期）？

2) 另外，如果可能的话，我只想显示那些特定数量的垂直网格线。

代码：

var myLineChart = new Chart(document.getElementById("line-chart"), {
    type: 'line',
    data: {
        labels: reportDate,
        datasets:[{
            label: 'ABC',
            data: abcArray,
            backgroundColor:"white",
            borderColor: "darkblue",
            fill: false,
            lineTension: 0,
            radius: 5
        },{
            label: 'DEF',
            data: defArray,
            backgroundColor:"white",
            borderColor: "magenta",
            fill: false,
            lineTension: 0,
            radius: 5
        },{
            label: 'XYZ',
            data: xyzArray,
            backgroundColor:"white",
            borderColor: "lightgreen",
            fill: false,
            lineTension: 0,
            radius: 5
        }]
    },
    options: {
        responsive: true,
        scales:{
            xAxes:[{
                ticks:{
                    display: true
                }
            }],
            yAxes:[{
                gridLines:{
                    display: false
                }
            }]
        },
        tooltips:{
            mode:'index'
        }
    }
});

Line Chart Image

【问题讨论】：

第 4 行 - labels: reportDate - 在此 reportDate 中是一个日期数组，稍后将采用 mm/dd/yyyy 格式，因此我需要显示更少的日期，以便 UI 看起来清洁工。

标签： javascript chart.js

【解决方案1】：

效果很好。

xAxes:[{
    ticks:{
        display: true,
        autoSkip: true,
        maxTicksLimit: 4
    }
}]

【讨论】：

简洁之美。