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

根据视口宽度删除标题

3 个答案: