Highcharts图例与图表区域重叠问题求助

针对你遇到的图例和图表区域重叠问题，可通过以下几点调整配置解决：

• 修正样式属性命名错误：Highcharts的CSS样式属性采用驼峰命名，你配置里itemStyle中的margin-right无效，需改为marginRight。
• 增大图表左侧边距：当前chart.marginLeft设为50，远小于图例的宽度（你设了400），不足以容纳图例，建议将其调整为450左右（可根据实际图例尺寸微调），让图表区域自动向右偏移，避开图例。
• 优化图例配置：可移除legend.width的固定值，让Highcharts自动计算图例所需宽度；同时可适当减小padding值，避免不必要的空间占用。

修改后的核心配置代码如下：

"legend": {
    "enabled": true,
    "maxHeight": 350,
    "floating": false,
    // 移除固定width，让Highcharts自动计算
    "symbolWidth": 11,
    "symbolHeight": 11,
    "align": "left",
    "verticalAlign": "middle",
    "padding": 10, // 减小padding优化空间
    "itemStyle": {
        "width": 110,
        "fontSize": "16",
        "marginRight": 200 // 修正为驼峰命名
    }
},
"chart": {
    "marginRight": 0,
    "marginLeft": 450, // 增大左侧边距容纳图例
    "spacingBottom": 0,
    "type": "column",
    "height": null,
    "width": null,
    "options3d": {
        "enabled": true,
        "alpha": 8,
        "beta": 20,
        "viewDistance": 30
    },
    "events": {},
    "spacingLeft": 100
},

如果需要固定图例宽度，确保chart.marginLeft的值大于等于legend.width加上图例的padding、间距等总和即可。

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