根據視口寬度去除標題

是否可以根據視口寬度去除Y軸標題？根據視口寬度去除標題

我可以像這樣用CSS實現這一點：

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

有這個問題，但是，仍有很大的差距在哪裏標題應該出現。

來源

2014-09-20 tau

如果你確定使用JavaScript：http://jsfiddle.net/39xBU/55/ – melancia 2014-09-22 17:35:41

什麼是對.highcharts-y軸標題元素的CSS聲明？ – Chico3001 2014-09-22 18:00:09

您的聲明應該起作用，並且在標題消失時不應該有任何缺口。必須有別的東西創造這種差距。你能否提供一個能夠再現你的問題的演示？ – 2014-09-23 09:36:44

你可以寫上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

來源

2014-09-23 06:22:10

我最終做了類似的事情。不幸的是它不能在CSS中完成，但這是第二好的事情。 – tau 2014-09-24 18:04:34

它應該工作......除非你在裏面加入影響身高的東西，你有沒有嘗試過這樣的事情？

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

來源

2014-09-22 18:01:48 Chico3001

，這留下了一個缺口。它看起來像highcharts不會調整其餘的本身。 – tau 2014-09-22 18:37:10

檢查this是否可以幫到你。

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

來源

2014-09-23 10:06:23 Tushar

根據視口寬度去除標題

回答

相關問題