Javascript ChartJS在小屏幕上隐藏标签

我在小屏幕（手机）上隐藏XAX和YAX标签时遇到问题。我知道有这样的选择：

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
                    }

                }];
            }
        }
     }
});

var ctx=document.getElementById（“图表”）；
var myChart=新图表（ctx{
//图表数据和选项，
onResize：函数（myChart，大小）{
如果（尺寸高度<140）{
选项：
{
规模：
{
xAxes：[{
滴答声：{
显示：假
}
}];
}
}
}
});

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

有人能帮我解决这个问题并给我指出正确的方向吗

谢谢，Gregor试试这个：

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()
                }

            }];
        } 
})

试一试

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

  }
});

var myChart=新图表（ctx、{
//图表数据和选项，
onResize：函数（myChart，大小）{
var showTicks=（size.height<140）？false：true；
myChart.options={
比例：{
xAxes：[{
滴答声：{
显示：showTicks
}
}];
}
};
}
});
对于
角度
您可以使逻辑如下。。。
screen.width
将计算为您的视口宽度


canvas:any；
ctx：任何；
图例：任何；
字体：任意；
构造函数（）{}
ngOnInit（）：void{
this.canvas=document.getElementById（'tpChart'）；
this.ctx=this.canvas.getContext（'2d'）；
this.legend=（screen.width<575）？false:true；//当视口低于575px时
this.font=（screen.width<1200）？14:16；//当视口将低于1200px时
让tpChart=新图表（this.ctx{
键入：“甜甜圈”，
数据：{
数据集：[{
边界宽度：2，
数据：[70,50,40,30]，
背景颜色：[
“#00CDB6”，
“#F08C2E”，
“#0F9AF0”，
"F16C51",，
],
}],
标签：[
“联合王国”，
“孟加拉国”，
"美国",，
“其他人”，
]
},
选项：{
回答：是的，
门诊人数：65人，
斯潘：错，
图例：{
display:this.legend，//这将动态工作
位置：“对”，
对齐：“居中”，
标签：{
fontColor:“#4848”，
箱宽：10，
fontSize:this.font，//这将动态工作
丰特家族：“小屋”，
填充：25，
usePointStyle:true
},
}
},
});
}
效果很好。但我仍然不知道该代码是否会在移动设备上隐藏标签。从移动设备访问时是否会发生onResize？我不知道……我相信只有在调整窗口大小时，此功能才会运行。如果您想在移动设备中隐藏刻度来启动图表，您应该在定义选项时执行此操作。我将upda检查一下。@GregorKoprivnikar如果有帮助的话，别忘了选择一个被接受的答案；）Gregor，肯定会更好。在我定义
显示的地方：！isMobileDevice（）
您可以将其更改为条件。类似于
display:window.screen.width>120的功能非常好。但我仍然不知道该代码是否会隐藏移动设备上的标签。从移动设备访问时是否确实发生onResize？这是onResize中定义的resize事件代码。您可以在创建co时使用代码检查大小并立即做出决定的控件。是的，在创建控件时，另一个答案应该可以用来定义它。