删除全屏高图的固定高度答案

【问题标题】：Remove fixed height for full screen highcharts删除全屏高图的固定高度
【发布时间】：2019-07-29 20:50:01
【问题描述】：

我有一个带有两个 yAxis 的 highchart。一个轴低于另一个轴。两者都有固定的高度。我的问题是，当我将其设为全屏时，图表仍然只占用这个原始高度。通常它将占据整个高度。无论如何我可以在全屏中获得全高元素吗？

Highcharts.chart('container', {
chart: {
    type: 'area'
},

yAxis: [{
        height : 200,
},
{
top:300,
height: 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.4, 95.6, 194.1, 216.4, 148.5, 126.0, 135.6, 176.0, 144.5, 129.4, 106.1, 71.6, 29.4],
    yAxis : 1,
}]

});

这是我的 javascript 代码。

I am attaching the fiddle here

提前致谢。

【问题讨论】：

标签： javascript charts highcharts fullscreen

【解决方案1】：

您需要使用响应参数才能按照您希望的方式完成此操作：

https://jsfiddle.net/gugalondon/n0g9rhzw/1/

这是我添加的更新代码：

responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            // Make the labels less space demanding on mobile
            chartOptions: {
                xAxis: {
                    labels: {
                        formatter: function () {
                            return this.value.charAt(0);
                        }
                    }
                },
                yAxis: {
                    labels: {
                        align: 'left',
                        x: 0,
                        y: -2
                    },
                    title: {
                        text: ''
                    }
                }
            }
        }]
    },

这是你的 yAxis 的修改：

    yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            height: '50%',
            lineWidth: 2,
            resize: {
                enabled: true
            }
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            top: '50%',
            height: '50%',
            offset: 0,
            lineWidth: 2
        }],

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            // Make the labels less space demanding on mobile
            chartOptions: {
                xAxis: {
                    labels: {
                        formatter: function () {
                            return this.value.charAt(0);
                        }
                    }
                },
                yAxis: {
                    labels: {
                        align: 'left',
                        x: 0,
                        y: -2
                    },
                    title: {
                        text: ''
                    }
                }
            }
        }]
    },
    
    yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            height: '50%',
            lineWidth: 2,
            resize: {
                enabled: true
            }
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            top: '50%',
            height: '50%',
            offset: 0,
            lineWidth: 2
        }],

    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.4, 95.6, 194.1, 216.4, 148.5, 126.0, 135.6, 176.0, 144.5, 129.4, 106.1, 71.6, 29.4],
        yAxis : 1,
    }]
});

#container {
  height:600px;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

<div id="container"></div>

【讨论】：