ChartJS 在小屏幕上隐藏标签

Question

我在小屏幕尺寸（手机）上隐藏 xAxes 和 yAxes 标签时遇到问题。我知道有这个选项：

options:
        {
            scales:
            {
                xAxes: [{
                    ticks:{
                        display: false
                    }

                }];
            }
        }

但是如果我像这样在 onResize 函数中使用它

var ctx = document.getElementById("chart");

var myChart = new Chart(ctx, {
    //chart data and options,

   onResize: function(myChart, size) {

   if (size.height < 140) {
        options:
        {
            scales:
            {
                xAxes: [{
                    ticks:{
                        display: false
                    }

                }];
            }
        }
     }
});

但它不适用于调整大小。隐藏标签 onResize 甚至是正确的解决方案吗？我正在使用 Chrome 响应模式和调整大小进行测试，但是如果从手机访问它会吗？

有人可以帮我解决这个问题并指出我正确的方向吗？

谢谢，格雷戈尔

Answer 1

尝试这个：

onResize: function(myChart, size) {
    myChart.options.scales.xAxes[0].ticks.display = (size.height >= 140);
}

为了在移动设备上获得加载选项，您应该这样做：

function isMobileDevice(){
    return ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
}

var myChart = new Chart(ctx, {
    options :
        scales:
        {
            xAxes: [{
                ticks:{
                    display: !isMobileDevice()
                }

            }];
        } 
})

Answer 2

尝试一下

var myChart = new Chart(ctx, {
    //chart data and options,

   onResize: function(myChart, size) {

     var showTicks = (size.height < 140) ? false : true;

     myChart.options = {
            scales: {
                xAxes: [{
                    ticks: {
                        display: showTicks
                    }
                }];
            }
     };

  }
});