Угловая диаграмма, показывающая ряды, но без данных

Когда я пытался использовать структуру угловых диаграмм, я мог видеть ряды, которые я определил, но не метки и данные. Я включил следующие три файла в свой index.html

<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>

Это переменные, которые я определяю в своем $scope

$scope.series = ["First", "Second"];
$scope.labels = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
$scope.data = [
    [12, 13, 8, 4, 29],
    [6, 12, 9, 8, 25]
];

И он отображает только это: Отображает только серии

Что я делаю не так?

РЕДАКТИРОВАТЬ: после дальнейшего исследования я заметил, что график отображается, когда я делал переход назад -> вперед на странице. Таким образом, обновляя, вы теряете диаграмму...

Я могу нарисовать диаграмму после обновления, откладывая переменные области видимости следующим образом:

setTimeout(function (){
        $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
        $scope.series = ['Series A', 'Series B'];
        $scope.data = [
            [65, 59, 80, 81, 56, 55, 40],
            [28, 48, 40, 19, 86, 27, 90]
        ];
    }, 0);

Это подразумевает проблему синхронизации, которую я не могу решить.


chart.js angularjs angular-chart
person Arninja    schedule 16.07.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Находится ли ваша диаграмма в скрытом/отображаемом элементе/иерархии (например, ng-show или замененный класс, панель начальной загрузки...)?

кажется, что происходит, так это то, что Chart.js получает высоту холста (когда он инициализируется угловой диаграммой, что, в свою очередь, происходит при изменении данных области видимости) как близкое к 0.

По той же причине работает отложенное изменение переменной - потому что любой родитель/стиль, вызывающий маленькую высоту холста, теперь имеет полную высоту.

person potatopeelings    schedule 16.07.2015
comment
Спасибо за вашу информацию, но нет ng-show или любого класса, который заменяется... он должен отображаться, как только angular загружает страницу... - person Arninja; 16.07.2015
comment
не могли бы вы опубликовать свой полный HTML-код для страницы - там может быть что-то еще, что определяет размер диаграммы (вкладки / аккордеоны Bootstrap? даже если это вкладка / аккордеон по умолчанию...). Или просто продолжайте удалять HTML, пока у вас не будет минимального рабочего примера. - person potatopeelings; 17.07.2015