根据视口宽度去除标题

是否可以根据视口宽度去除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

根据视口宽度去除标题

回答

相关问题