Диаграмма AngularJS Kendo не использует все пространство экрана

Я использовал AngularJS, KendoCharts и Bootstrap в своем проекте. Я использовал навигационные вкладки и добавил три вкладки на свой экран, которые отображают три разные диаграммы кендо. Все работает хорошо, но я столкнулся с одной проблемой. Когда я нажимаю на вторую вкладку, диаграмма кендо не отображается на весь экран, но если я добавляю на экран кнопку, которая обновляет диаграмму, она работает нормально и занимает все пространство. Но почему это не занимает все пространство в первый раз, когда это показано. Я пробовал различные решения/обходные пути, но ни один из них не соответствует моим критериям.

-- Я добавил ширину в области диаграммы на диаграмме, и это работает, но затем это мешает отзывчивости диаграммы.

-- Я попытался обновить/перерисовать диаграмму после ее создания в контроллере/службе angular, но это также не удалось и выдало ошибку, что идентификатор диаграммы не определен.

Как я могу обновить/перерисовать диаграмму после ее создания в angular. Мне не нужен какой-либо код в html, он должен происходить в угловых файлах. Или можно решить эту проблему как-то иначе.


angularjs twitter-bootstrap kendo-ui kendo-chart
person pogo22    schedule 18.02.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать Bootstrap Grid System. В своем HTML создайте строку, затем столбец с диапазоном 12. В этот столбец поместите свою диаграмму. например.:

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <!-- your chart goes here -->
    </div>
</div>

Он должен работать.

person Ishan Anand    schedule 18.02.2015
comment
Я пробовал, что он хорошо работает на экране ноутбука, но когда я захожу в инструмент разработчика Chrome и меняю размер на маленький экран, он не работает. Я не могу увидеть полную диаграмму на маленьком экране. То же самое работает с первой активной вкладкой. - person pogo22; 18.02.2015
comment
вы использовали класс столбцов как col-xs-12?? - person Ishan Anand; 18.02.2015

arrow_upward
0
arrow_downward

Как сделать диаграмму кендо адаптивной для мобильных устройств?

Я сделал небольшую директиву:

app.directive("chartAligner", function ($window) {
    return function (scope, element) {
        var _kChart;

        angular.element($window).bind('resize', function () {
            if (_kChart) {
                _kChart.resize();
            } else {
                _kChart = element.getKendoChart()
            }
        });
    };
});
person Andrei Shostik    schedule 25.05.2015