如何实现Highcharts图表90度旋转并自适应全屏重绘？

你的CSS旋转方法确实只能实现视觉上的转向，但容器的实际尺寸没有跟着调整，所以没法铺满屏幕。这里有两种更可靠的方案，分别基于Highcharts API和优化后的CSS+JS实现：

方案一：使用Highcharts API重新配置轴（推荐） #

这种方法是从图表逻辑层面调整，而非纯视觉旋转，能完美适配屏幕，同时保证图表交互完全正常。

实现步骤： #

• 给按钮绑定点击事件，维护一个「纵向/横向」的状态标识
• 点击时，交换图表x轴和y轴的核心配置（包括数据、分类、标题等）
• 动态调整图表容器的宽高，匹配屏幕可用空间
• 调用chart.update()重新渲染图表

代码示例： #

<button id="toggleOrientation">切换布局</button>
<div id="container" style="width: 100vw; height: 80vh;"></div>

// 初始化图表与状态
let isVertical = true;
const chart = Highcharts.chart('container', {
    title: { text: '纵向布局图表' },
    xAxis: { categories: ['A', 'B', 'C', 'D'] },
    yAxis: { title: { text: '数值' } },
    series: [{ data: [10, 20, 15, 25] }]
});

// 切换按钮事件处理
document.getElementById('toggleOrientation').addEventListener('click', () => {
    isVertical = !isVertical;
    const container = document.getElementById('container');
    
    if (isVertical) {
        // 恢复纵向布局
        container.style.width = '100vw';
        container.style.height = '80vh';
        chart.update({
            title: { text: '纵向布局图表', rotation: 0, y: 0 },
            xAxis: { categories: ['A', 'B', 'C', 'D'], title: { text: '' } },
            yAxis: { title: { text: '数值' } },
            series: [{ data: [10, 20, 15, 25] }]
        });
    } else {
        // 切换横向布局：互换容器宽高适配屏幕
        container.style.width = `${window.innerHeight}px`;
        container.style.height = `${window.innerWidth}px`;
        chart.update({
            title: { text: '横向布局图表', rotation: -90, y: 100 }, // 调整标题位置适配旋转
            xAxis: { title: { text: '数值' }, categories: [10, 20, 15, 25] },
            yAxis: { title: { text: '分类' }, categories: ['A', 'B', 'C', 'D'] },
            series: [{ data: ['A', 'B', 'C', 'D'] }]
        });
    }
});

// 监听窗口resize，保持布局适配
window.addEventListener('resize', () => {
    if (!isVertical) {
        document.getElementById('container').style.width = `${window.innerHeight}px`;
        document.getElementById('container').style.height = `${window.innerWidth}px`;
        chart.reflow();
    }
});

方案二：优化CSS旋转+动态调整容器尺寸 #

如果一定要用CSS旋转的方式，需要同步修改容器的实际宽高，让旋转后的元素能铺满屏幕：

代码示例： #

.rotated-chart {
    transform: translate(-50%, -50%) rotate(90deg);
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
}

const toggleBtn = document.getElementById('toggleOrientation');
const container = document.getElementById('container');
let isRotated = false;

toggleBtn.addEventListener('click', () => {
    isRotated = !isRotated;
    if (isRotated) {
        // 旋转时互换容器宽高，匹配屏幕尺寸
        container.style.width = `${window.innerHeight}px`;
        container.style.height = `${window.innerWidth}px`;
        container.classList.add('rotated-chart');
    } else {
        container.style.width = '100vw';
        container.style.height = '80vh';
        container.classList.remove('rotated-chart');
    }
    // 强制图表重排适配新尺寸
    chart.reflow();
});

// 窗口resize同步调整
window.addEventListener('resize', () => {
    if (isRotated) {
        container.style.width = `${window.innerHeight}px`;
        container.style.height = `${window.innerWidth}px`;
        chart.reflow();
    }
});

注意事项： #

• 方案一的优势是图表交互（如tooltip、缩放）完全正常，因为是从逻辑上调整了轴的配置
• 方案二的视觉旋转可能导致部分交互元素位置偏移，需要额外微调样式
• 两种方案都需要监听窗口resize事件，确保窗口尺寸变化时图表保持全屏适配

内容的提问来源于stack exchange，提问作者LeoChiang