ChartJS在小尺寸屏幕上隐藏标签 [英] ChartJS hide labels on small screen sizes

问题描述

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

I have a problem hiding xAxes and yAxes labels on small screen sizes (mobile phones). I know there is this option:

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

                }];
            }
        }

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

But if i use it in the onResize function like this

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响应模式和调整大小的作品，但是如果可以通过手机访问它呢？

But it does not work on resize. Is hiding labels onResize even the right solution? I am testing on with Chrome responsive mode and on resize works, but would it if accessed from mobile phones?

有人可以帮我解决这个问题，并指出我的意思吗？

Can somebody please help me with this problem and point me int the right direction?

谢谢，格雷戈尔

推荐答案

尝试一下

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
                    }
                }];
            }
     };

  }
});

这篇关于ChartJS在小尺寸屏幕上隐藏标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！