диаграмма amcharts не отображается, когда div изначально закрыт ng-show

У меня есть amchart в div, отображение / скрытие которого управляется angularjs. Иногда он отображает данные, которые уже находятся в памяти. В этом случае открывается блок div, отображается диаграмма, а SVG-файл имеет ширину 10. В результате диаграмма не отображается на экране. Измените размер окна немного, и диаграмма появится, потому что, я думаю, amcharts слушает события изменения размера. Я думаю, что это известная проблема - я видел несколько сообщений о них, и я надеюсь, что одна из них подойдет мне. Я подозреваю, что угловая машина не получает циклов для запуска div до того, как amcharts сможет нарисовать свою магию (просто догадка, никаких веских доказательств).

Далее я добавил наблюдателя за событиями

piechart.write(divs.chart_div.attr('id'));
divs.chart_div.on('yes', 'snowy', function(){ // same with 'shown','resize'
    console.info('============= woah ========');
});

Теперь случилось странное. Я вижу в консоли следующий стек ошибок

Error: [jqLite:onargs] jqLite#on() does not support the `selector` or `eventData` parameters http://errors.angularjs.org/1.3.13/jqLite/onargs
at REGEX_STRING_REGEXP (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8762:12)
at jqLiteOn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11733:39)
at Object.JQLite.(anonymous function) (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11951:17)
at Object.makePieChart (http://localhost:8100/common/services/graphinghelperService.js:528:34)
at obj.controller.$scope.myExt.renderFunc (http://localhost:8100/directives/boxRenderers2.js:179:24)
at _render_it (http://localhost:8100/modules/dashboard/dashboard.js:246:30)
at $scope.showBox.deferred.promise.then.workarea.showChild (http://localhost:8100/modules/dashboard/dashboard.js:310:17)
at processQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21888:27)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:21904:27
at Scope.$get.Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23100:28)

И этого напуганного поведения больше нет! Диаграмма появляется, если я щелкаю, чтобы перерисовать ее из кешированных данных, скрывается при повторном щелчке, и все в порядке. Больше не будет тусклых фоновых цветов div, на которые можно было бы смотреть !!.

Однако, если я изменю часы на divs.chart_div.on('shown', function(){, тогда обработчик событий не будет вызван, и диаграмма не появится при рендеринге из кэшированных данных.

Интересно, что происходит.


person Dinesh    schedule 08.05.2015    source источник
comment
watch - это способность angular реагировать на изменение данных, наблюдая за ними. Вы используете события, а не часы. Совсем другое дело.   -  person HankScorpio    schedule 08.05.2015
comment
включите jquery в свои зависимости, ошибка ясно говорит, почему она выбрасывается. angular внутренне использует jqLite, который не поддерживает селекторы для события on.   -  person Manish Kr. Shukla    schedule 08.05.2015
comment
amCharts не полагается на jQuery, поэтому он не может быть связан с его загрузкой или отсутствием. Рассмотрите возможность обновления до самой последней версии библиотеки amCharts (3.14.2), которая содержит автоматическое отслеживание изменений размера / видимости контейнера (в отличие от отслеживания изменений размера окна в более ранних версиях). Если это не удается, попробуйте нажать на события Angular и вызвать invalidateSize () для объекта диаграммы, когда открывается контейнер диаграммы.   -  person martynasma    schedule 08.05.2015
comment
Спасибо. Обновление изменяет поведение, как предлагается, без необходимости задействовать какие-либо события или invalidateSize ()   -  person Dinesh    schedule 08.05.2015


Ответы (1)


Похоже, что-то (может быть, библиотека armchart?) Ожидает, что jQuery будет доступен для привязки к событию. Angular поставляется с jqLite, урезанной версией jQuery, поэтому вы получаете это исключение.

Я предполагаю, что это что-то здесь, на этой линии.

at Object.makePieChart (http://localhost:8100/common/services/graphinghelperService.js:528:34)

Вместо этого используйте полную версию jQuery, чтобы решить эту проблему: http://www.bennadel.com/blog/2752-using-jquery-instead-of-jqlite-in-angularjs.htm

person HankScorpio    schedule 08.05.2015
comment
Вы, конечно, правы (и я не хочу использовать полный jQuery), но мне действительно любопытно, почему моя диаграмма внезапно начала появляться ... - person Dinesh; 08.05.2015
comment
Я предполагаю, что размеры элемента html не могут быть вычислены в этот момент, потому что они не отображаются на экране. Я столкнулся с этой проблемой с некоторыми другими библиотеками. В качестве альтернативы ngShow один из способов обойти это - создать класс CSS, который разместит вашу диаграмму где-нибудь за пределами экрана. Используйте ngClass, чтобы применить правило, используя то же условие, что и ваш ngShow. HTML: <div ng-class="{'hide-chart': !isChartVisible}">chart here!</div> CSS: .hide-chart { position:absolute; top:-9999px; left:-9999px; } - person HankScorpio; 09.05.2015