[英]Google Pie chart rendered outside of div area when inside a dropdown
我的餅形圖位於下拉列表中時,在其父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>
隱藏的div內的繪圖表破壞了Visualization API中的尺寸檢測算法。 這就是為什么當div通過hover
一切正常,但是當它隱藏時一切都變為地獄。
最簡單的解決方案是將圖表的高度和寬度選項顯式設置為像素值,而不是百分比。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.