Javascript 在下拉列表中时在div区域外呈现的Google饼图

当位于下拉列表中时，我的饼图在其父div之外呈现时出现问题

图表在页面准备好后加载，因此如果我实际悬停下拉列表并等待图表加载，它将正确加载。

如果在悬停下拉列表之前等待图表加载，则无法正确加载。

有什么办法解决这个问题吗？非常感谢

我的看法是：

<div id="fmu_dropdown-profile" class="fmu_dropdown greybg menuright w250px">

        <div id="top_user_connected">
            <div id="user_connected_header" class="padding">
                <div class="bold padding-bottom">Profil rempli à {{ completeness }}%</div>

                <div id="chart_picture">

<div id="piechart" style="width: 220px; height: 180px"></div>


                    <a id="dropdown_picture" href="{{ path('fos_user_profile_edit') }}">
                            <img src="{{ profile_picture | imagine_filter('default')  }}" alt="Image de profil" class="img-responsive img-circle margin-auto">
                    </a>
                </div>

                <style rel="stylesheet">
                    #chart_picture {position: relative;}
                    #dropdown_picture {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin-top: -60px;
                        margin-left: -60px;
                        z-index: 0;
                    }
                </style>

            </div>
            <div id="portfolio" class="padding whitefont">
                <p>Portfolio pris en compte :</p>
                {{ form(portfolio_form) }}
            </div>
        </div>


<script type="text/javascript">
    $(function(){
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Nom',    'Valeur'],
                ["Profil rempli à ", {{ completeness }}],
                ['Manque', {{ 100 - completeness }}]
            ]);

            var options = {
                backgroundColor: { fill:'transparent'},
                pieSliceBorderColor : 'transparent',
                pieHole: 0.9,
                legend: 'none',
                pieSliceTextStyle :{fontsize : 16, color: 'transparent'},
                slices: {
                    0: { color: 'red'},
                    1: { color: '#444'}
                },
                chartArea : {width: '90%', height: '90%'}
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart'));

            chart.draw(data, options);
        }

        google.load('visualization', '1', {callback : function(){drawChart();}, 'packages':['corechart']})

    });

</script>

Profil rempliá{{完整性}}
#图表图片{位置：相对；}
#下拉图片{
位置：绝对位置；
最高：50%；
左：50%；
利润上限：-60px；
左边距：-60px；
z指数：0；
}
投资组合价格：

{{形式（组合形式）}
$（函数（）{
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Nom'，'Valeur']，
[“Profil rempliá，{{完备性}]，
['Manque'，{100-完全性}]
]);
变量选项={
背景颜色：{fill:'transparent'}，
颜色：'透明'，
pieHole:0.9，
图例：“无”，
PieSicleTextStyle:{fontsize:16，颜色：'transparent'}，
切片：{
0:{颜色：'红色'}，
1:{颜色：'#444'}
},
图表区：{宽度：“90%”，高度：“90%”
};
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}
load（'visualization'，'1'，{callback:function（）{drawChart（）；}，'packages'：['corechart']}）
});

在隐藏的div中绘制图表会破坏可视化API中的标注检测算法。这就是为什么当div通过

hover

暴露时，一切都正常，但当它被隐藏时，一切都会化为乌有

最简单的解决方案是将图表高度和宽度选项显式设置为像素值，而不是百分比

---

相关：

你们能提供小提琴吗？很好！我必须在javascript选项中设置高度和宽度，而不是div的style属性