Highcharts多系列图表导出PNG时错位问题求助

我之前碰到过类似的问题，这是因为当手动设置Y轴的top和height属性时，Highcharts的导出模块不会自动计算图表所需的整体高度，默认的图表容器高度不足以容纳两个错位排列的Y轴，导致导出时只渲染了部分区域，最终出现错位情况。

解决方案：显式指定图表整体高度 #

你需要在chart配置项中添加height属性，值设置为两个Y轴的高度之和（这里是200px + 200px = 400px），确保整个图表容器能完全容纳两个Y轴：

Highcharts.chart('container', {
    title: { text: '' },
    subtitle: { text: '' },
    chart: { 
        type: 'line',
        height: 400 // 新增该行，指定图表整体高度
    },
    yAxis: [
        { height: 200 },
        { height: 200, top: 200 }
    ],
    xAxis: { 
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    },
    series: [
        { 
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4], 
            yAxis : 0 
        }, 
        { 
            data: [54.9, 95.5, 194.4, 216.2, 148.0, 126.0, 135.6, 176.0, 144.5, 129.4, 106.1, 71.6, 29.4], 
            yAxis: 1 
        }
    ]
});

原理说明 #

Highcharts的导出功能依赖图表容器的实际尺寸生成图像。当手动偏移第二个Y轴后，默认的图表高度（未显式设置时会自适应容器）无法覆盖两个Y轴的总高度，导致导出时第二个Y轴被裁剪或错位。显式指定height后，导出模块会按照这个高度生成完整画布，两个Y轴就能正确显示在导出的PNG中了。

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