javascript - 根据视口(viewport)宽度删除标题

Question

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