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

jvidinwx  于 2023-03-18  发布在  Chart.js
关注(0)|答案(2)|浏览(162)

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

lg40wkob

lg40wkob1#

这一切都很完美。

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

gev0vcfq2#

高于Char.js版本4.21

xAxes已更改为x,数组格式已更改为对象格式
示例:

scales: {
    x: {
      ticks: {
        display: true,
        autoSkip: true,
        maxTicksLimit: 15,
      },
    },
  },

图片来源:https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#common-tick-options-to-all-cartesian-axes

相关问题