【问题标题】: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
        }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-03-30
      • 1970-01-01
      • 2021-07-07
      • 1970-01-01
      • 2017-06-29
      • 1970-01-01
      • 2019-12-02
      • 2022-01-21
      相关资源
      最近更新 更多