Я хочу, чтобы моя круговая диаграмма 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>
And here's my 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"
}
]
}
Не могли бы вы указать на мою ошибку?
Спасибо за внимание, ваша помощь будет очень признательна..