Угловая линейная диаграмма nvd3 с автоматическим изменением размеров

Я использую угловые директивы nvd3.

в соответствии с примером: https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives/blob/master/examples/lineChart.with.automatic.resize.html

<!--
width and height are removed from the directive for automatic resizing.
-->

Хорошо, если я изменю размер Div на графике. он изменяет размер, но только когда я перемещаю / открываю / закрываю "вид консоли" (Ctrl + Shift + I на FF).

Я проверяю angular-nvd3-директиву, нет вызова события для изменения размера, так что я полагаю, что это компиляция d3 / nvd3?

Мой вопрос до сих пор: как смоделировать такое событие для изменения размера графа?

Источник

3 ответа

Решение

Вы можете попробовать запустить другое событие изменения размера, которое может перерисовать график. window.dispatchEvent(new Event('resize'));

Подобный подход работал для меня с Chart.js. Странно, когда видимая консоль меняет страницу - все еще не до конца понимаю, как это работает, но она регулярно отображается с динамическими макетами.

Источник

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

Например:-

$('#my_div').bind('resize', function(){

            for (var i = 0; i < nv.graphs.length; i++) {
                nv.graphs[i].update();
            }

});
Источник

Вы можете добавить обработчик событий изменения размера jquery, если вы не используете jquery, вы можете присоединить обработчик событий только с использованием угловых параметров.

Использование jQuery

$(document).on('resize', function() {

  for (var i = 0; i < nv.graphs.length; i++) {
    nv.graphs[i].update();
  }

});

Использование только угловых

Вот пример, показывающий, как прикрепить событие к документу, используя angular.

Источник
Другие вопросы по тегам