뷰포트 너비에 따라 제목 제거

Question

뷰포트 너비에 따라 Y 축 제목을 제거 할 수 있습니까?

그래서 같은 CSS로이를 달성 할 수

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

그의 문제, 그러나 제목이 나타납니다 큰 격차가 여전히 존재한다는 것입니다.

Answer 1

둘 중 따라서 chartWidth에 체크 기능을 작성하고있다 표제 가능하거나 redraw 및 load에 핸들러이 함수를 추가 할 수

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

Axis.Update 방법을 사용하여 비활성화 이벤트

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