javascript - 多系列导出在 Highcharts 中未对齐

Question

我有一个带有两个 y 轴的 Highcharts 。第二个 yAxis 的顶部值为“300px”。当我单击“下载为 PNG”时，会下载一个 PNG 文件，并且下载的图像未对齐。

这是我的 JavaScript

  Highcharts.chart('container', {

    title: {
        text: ''
    },

    subtitle: {
        text: ''
    },

    chart: {
        type: 'line'
    },

    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,
    }]
});

This is my fiddle

谁能帮我解决这个问题吗？

Answer 1

该问题是 Highcharts 错误，报告如下:https://github.com/highcharts/highcharts/issues/11509

作为解决方法，您可以设置:

• height 作为图表属性:

    chart: {
        ...,
        height: 600
    },

或者:

直接在容器上设置
• height样式:

    document.getElementById('container').style.height = '600px';

<小时/>

现场演示: https://jsfiddle.net/BlackLabel/ot2fa94v/

API引用: https://api.highcharts.com/highcharts/chart.height