Блог

Главная - Вопросы по программированию - адаптивная круговая диаграмма с диаграммами слияния

адаптивная круговая диаграмма с диаграммами слияния

#javascript #php #responsive-design #fusioncharts

#javascript #php #адаптивный дизайн #диаграммы слияния

Вопрос:

Я хочу сделать свою круговую диаграмму 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 amp; 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.227r",
                "link":"newchart-jsonurl-naero.json"
            },
            {
                "label":"Aeronautika",
                "value":"960.429.586.179r",
                "link":"newchart-jsonurl-aero.json"
            }
    ]

}

Не могли бы вы указать на мою ошибку?

Спасибо за ваше внимание, ваша помощь будет высоко оценена..

Ответ №1:

Использование 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'
        }]
    };

Ответ №2:

Является ли эта проблема специфичной для любого браузера? Работает в Chrome / FireFox

Пожалуйста, найдите ссылку на DropBox: https://dl.dropboxusercontent.com/u/44972996/pie.rar

Комментарии:

1. ваш код работает отлично, но не могли бы вы указать, где моя ошибка?

Метки: