"display: none" 高图 - 大小不正确

Question

如何强制使用 display:none 样式正确工作图表。如果最初图表在变得可见（显示：块）后不可见（显示：none） - 它的大小设置不正确。

https://jsfiddle.net/0we2u4qgexample of incorrect chart's size

如何解决？

    <!DOCTYPE HTML>

<html lang = "ru">

<head>
    <meta charset = "utf-8">

    <meta http-equiv = "X-UA-Compatible" content = "IE=edge" />

    <script src = "http://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src = "http://code.highcharts.com/highcharts.js"></script>
    <script src = "http://code.highcharts.com/modules/exporting.js"></script>

    <style>     
        .info {
            position:           absolute;
            left:               50%;
            top:                50%;

            color:              #f0f0f0;
            font-weight:        700;
            font-size:          24px;
            font-family:        'calibri';
        }

        .chart {
            display:            none;

            position:           absolute;
            left:               50px;
            top:                50px;

            width:              200px;
            height:             200px;

            margin:             0px;
            padding:            0px;

            border:             2px solid #bb0000;
        }

        .chart .container {
            width:              100%;
            height:             100%;

            background-color:   #bbbb00;
        }
    </style>

</head>

<body>
    <div class = "info">CLICK ANYWHERE</div>
    <div class = "chart"><div class = "container"></div></div>
<script>

(function ($)
{
    $('.container').highcharts({
        xAxis: {
            categories:     [10, 20, 30, 40, 50,],
        },
        plotOptions: {
            series: {
                animation:      false
            },
        },
        series: [
        {
            type:           'column',
            data:           [1, 2, 3, 4, 5,],
        },
        {
            type:           'column',
            data:           [5, 4, 3, 2, 1,],
        },
        ]
    });

    $(window).click(function(){
        $('.info').hide();
        $('.chart').show();
    });

}(jQuery));

</script>

</body>

</html>

Answer 1

在javascript中添加此功能：

$(function() {
    $('.chart')
        .hide();
});

并在 css 中使用 display: block;。

Answer 2

可以在 .show() 之后调用 chart.reflow()，因此您的图表将根据其容器的大小进行调整。

示例：https://jsfiddle.net/0we2u4qg/8/

...
$('.info').click(function() {
  $('.info').hide();
  $('.chart').show();
  $('#container').highcharts().reflow(); //added call
});

"display: none" 高图 - 大小不正确

"display: none" with highcharts - incorrect size

html

css

size

highcharts

display