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响应模式和调整大小的工作，但如果从手机访问它会吗？

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

谢谢，Gregor

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

  }
});

Answer 3

对于 Angular，您可以使逻辑像这样... screen.width 将计为您的视口宽度

  canvas: any;
  ctx: any;
  legend: any;
  font: any;
  constructor() { }

  ngOnInit(): void {
    this.canvas = document.getElementById('tpChart');
    this.ctx = this.canvas.getContext('2d');
    this.legend = (screen.width < 575) ? false : true; //when viewport will be under 575px
    this.font = (screen.width < 1200) ? 14 : 16; //when viewport will be under 1200px
    let tpChart = new Chart(this.ctx, {
      type: 'doughnut',
      data: {
        datasets: [{
          borderWidth: 2,
          data: [70, 50, 40, 30],
          backgroundColor: [
            '#00CDB6',
            '#F08C2E',
            '#0F9AF0',
            '#F16C51',
          ],
        }],
        labels: [
          'United Kingdom',
          'Bangladesh',
          'United States',
          'Others',
        ]
      },
      options: {
        responsive: true,
        cutoutPercentage: 65,
        spanGaps: false,
        legend: {
          display: this.legend, //This will work dynamatically
          position: "right",
          align: "center",
          labels: {
            fontColor: '#484848',
            boxWidth: 10,
            fontSize: this.font, //This will work dynamatically
            fontFamily: "Cabin",
            padding: 25,
            usePointStyle: true
          },
          
        }
      },
    });
  }

ChartJS在小屏幕尺寸上隐藏标签

3 个答案: