如何实现带标题和图例的Highcharts仪表盘响应式布局？

1. 给标题配置响应式样式 #

用相对单位（如em）定义标题字号，同时开启响应式规则，在小屏幕下自动缩小标题尺寸：

title: {
    text: '你的仪表盘标题',
    style: {
        fontSize: '1.5em',
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis'
    }
},

2. 让图例自适应容器尺寸 #

调整图例布局规则，结合响应式配置，在屏幕宽度变化时切换图例的排列方式和位置：

legend: {
    layout: 'horizontal',
    align: 'center',
    verticalAlign: 'bottom',
    itemStyle: {
        fontSize: '0.9em'
    },
    responsive: {
        rules: [{
            condition: {
                maxWidth: 600
            },
            chartOptions: {
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                }
            }
        }]
    }
},

3. 优化图表容器与内边距 #

给容器设置100%宽度，同时通过chart.spacing控制内边距，避免标题、图例挤压仪表盘区域，小屏幕下还可以动态缩小内边距：

#container {
    width: 100%;
    height: 400px;
    margin: 0 auto;
}

chart: {
    type: 'gauge',
    spacing: [20, 20, 30, 20],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                chart: {
                    spacing: [10, 10, 20, 10]
                },
                title: {
                    style: {
                        fontSize: '1.2em'
                    }
                }
            }
        }]
    }
},

4. 手动触发窗口 resize 重绘 #

如果自动响应不够及时，监听窗口 resize 事件，强制图表重绘：

window.addEventListener('resize', function() {
    chart.reflow();
});

以上配置后，标题、图例和仪表盘会根据容器尺寸动态调整，实现整体响应式适配。

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