Удалить название на основе ширины окна просмотра

Question

Можно ли удалить заголовок оси Y в соответствии с шириной окна просмотра?

я могу добиться этого с помощью CSS вот так:

@media (max-width:480px) { 
    .highcharts-yaxis-title { 
    display:none; 
    } 
} 

Проблема с этим, однако, является то, что все еще существует большой разрыв, где должно появиться название.

Answer 1

Вы можете написать функцию, которая проверяет на chartWidth, и, соответственно, либо дает название или отключить ее с помощью метода Axis.Update

var isTitleShowing=true; 
function updateAxisTitle(chart) { 
    if (chart.chartWidth < 500 && isTitleShowing) { 
     console.log('Disabling'); 
     isTitleShowing = false; 
     $.each(chart.yAxis, function (index, yAxis) { 
      yAxis.update({ 
       title: { 
        enabled: false 
       } 
      }, false); 
     }); 
     // Calling redraw inside the redraw handler itself throws an exception 
     // Delaying the redraw by a few ms lets the current redraw cycle finish 
     setTimeout(function() { 
      chart.redraw(); 
     }, 20); 
    } else if (chart.chartWidth >= 500 && !isTitleShowing) { 
     console.log('Enabling'); 
     isTitleShowing = true; 
     for (var i = 0; i < chart.yAxis.length; i++) { 
      chart.yAxis[i].update({ 
       title: { 
        enabled: true 
       } 
      }, false); 
     } 
     setTimeout(function() { 
      chart.redraw(); 
     }, 20); 
    } 
} 

Вы можете добавить эту функцию в качестве обработчика к redraw и load события

chart: { 
    events: { 
     redraw: function() { 
      updateAxisTitle(this); 
     }, 
     load: function() { 
      updateAxisTitle(this); 
     } 
    } 
} 

Handling Chart Resizing @ jsFiddle

Answer 2

Он должен работать ... если вы не добавляете что-то внутри, которое влияет на высоту, вы пробовали что-то вроде этого?

@media (max-width:480px) { 
    .highcharts-yaxis-title { 
    display:none; 
    height: 0; 
    } 
} 

Answer 3

Проверьте, сможет ли this помочь вам.

$(window).resize(function(){ 
    var windowWidth = $(window).width() 
    if(windowWidth<=480){ 
     $('#y1').click(); 
    } 
})