[英]responsive pie chart with fusioncharts
我想讓我的fusionchart餅圖響應,所以我在這里遵循一些指南: http ://docs.fusioncharts.com/charts/contents/FirstChart/ChangeSize.html我按照“圖表的動態調整大小功能”部分中的說明操作。
但是當頁面加載時,我的圖表變平(沒有高度)。
當我調整瀏覽器大小時,圖表大小響應成功,但我得到一個非常小的餅圖
當頁面首次加載時,為什么我的圖表會變平? (我必須先調整瀏覽器的大小才能看到圖表)。 為什么我得到一個非常小的圖表?
這是我的代碼
<body style="height:100%;">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-12">
<div id="chartContainer" style="height:100%;">
FusionCharts XT will load here!
</div>
</div>
</div>
</div>
<script type="text/javascript">
FusionCharts.ready(function(){
var myChart = new FusionCharts({
"type": "pie2d",
"dataFormat": "jsonurl",
"dataSource": "pie.json",
"width": "100%",
"height": "100%"
});
myChart.render("chartContainer");
});
</script>
這是我的pie.json:
{
"chart":{
"caption":"Rasio Pendapatan Aeronautika & Non-Aeronautika",
"subCaption":"Januari-Juni 2014",
"paletteColors":"#008ee4,#6baa01,#f8bd19,#e44a00,#33bdda",
"bgAlpha":"0",
"borderAlpha":"20",
"use3DLighting":"0",
"showShadow":"0",
"enableSmartLabels":"0",
"startingAngle":"0",
"showPercentValues":"1",
"showPercentInTooltip":"0",
"decimals":"3"},
"data":
[
{
"label":"Non-Aeronautika",
"value":"534.973.345.227\r",
"link":"newchart-jsonurl-naero.json"
},
{
"label":"Aeronautika",
"value":"960.429.586.179\r",
"link":"newchart-jsonurl-aero.json"
}
]
}
你能指出我的錯誤嗎?
感謝您的關注,我們非常感謝您的幫助..
使用AngularJS和Bootstrap。
在我的HTML中,我將width =“300”更改為width =“100%”這使得我的圓環圖響應:
HTML:
<div class="row" data-ng-controller="VariableInvestmentSummaryCtrl">
<div class="col-md-4">
<div fusioncharts
width="100%"
height="300"
type="doughnut2d"
dataSource="{{myDataSource}}" >
</div>
</div>
<div class="col-md-8 datagrid-wrapper investments"></div>
</div>
JSON:
$scope.myDataSource = {
'chart': {
'numberPrefix': '%',
'theme': 'fint',
'bgColor': '#DDDDDD',
'bgAlpha': '0'
},
'data':[{
'showLabel': '0',
'label': 'Some Name',
'showValue': '0',
'value': '25'
},
{
'showLabel': '0',
'label': 'Garden Groove harbour',
'showValue': '0',
'value': '50'
},
{
'showLabel': '0',
'label': 'Los Angeles Topanga',
'showValue': '0',
'value': '10'
},
{
'showLabel': '0',
'label': 'Compton-Rancho Dom',
'showValue': '0',
'value': '10'
},
{
'showLabel': '0',
'label': 'Daly City Serramonte',
'showValue': '0',
'value': '5',
'color': '#FE0000'
}]
};
此問題是否特定於任何瀏覽器? 適用於Chrome / FireFox
請找到DropBox鏈接: https : //dl.dropboxusercontent.com/u/44972996/pie.rar
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.