在“仅较小的显示”中限制 Chart.js 上的标签数量答案

【问题标题】：Limit numbers of labels on Chart.js in "smaller display only"在“仅较小的显示”中限制 Chart.js 上的标签数量
【发布时间】：2020-10-15 21:31:21
【问题描述】：

Limit labels number on Chart.js line chart

我想在小型设备上显示时减少我的折线图“仅”的标签数量。从上面的帖子来看，解决方案是这样的；

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 12
    }
}]

这是一个很好的解决方案，但我想在桌面上显示时保留所有 24 个标签 (lg)。只在手机上显示(xs)时，我想隐藏一半的标签。

这就是我现在在桌面和手机上的图表。

【问题讨论】：

标签： javascript vue.js responsive-design chart.js

【解决方案1】：

这是一种解决方案，我们检查窗口大小是否小于 600 像素并返回 12，否则刻度限制为 24

    xAxes: [{
            type: 'time',
            ticks: {
                autoSkip: true,
                maxTicksLimit: getTickLimit()
            }
    }]
        
    function getTickLimit(){
        return window.innerWidth<600? 12:24
    }

【讨论】：