删除固定高度以全屏显示高图 [英] Remove fixed height for full screen highcharts

问题描述

我有一个带有两个yAxis的图表.一个轴在另一个轴下方.两者都有固定的高度.我的问题是，当我将其全屏显示时，图形仍仅采用此原始高度.通常它将占据整个高度.无论如何，我可以在全屏模式下获得全高元素吗?

I have a highchart with two yAxis. One axis is below the other. Both have a fixed height. My Problem is that when I make it full screen the graph still takes only this original height. Normally it will occupy the full height. Is there anyway I can get full height element in full screen?

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代码.

This is my javascript code.

我在这里附上小提琴

谢谢.

推荐答案

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

You need to use the responsive parameters in order to get this done the way you wish:

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

这是我添加的更新代码:

This is the updated code that I added:

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的修改:

and here's the modification of your 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>

这篇关于删除固定高度以全屏显示高图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！