Angular nvd3 Автоматическая корректировка линейной диаграммы
Я использую директивы angular 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 comportement?
Мой вопрос до сих пор: как имитировать этот тип события для изменения размера графика?
Ответы
Ответ 1
Вы можете попробовать запустить другое событие изменения размера, которое могло бы перерисовать график. window.dispatchEvent(new Event('resize'));
Аналогичный подход работал у меня с Chart.js. Это странно, когда видимая консоль меняет страницу - все еще не совсем понятно, как это работает, но она регулярно появляется с динамическими макетами.
Ответ 2
Я не уверен, что это поможет вам или нет, но я думаю, вы можете обновить график, пока ваш размер div изменится в моем случае: -
Например: -
$('#my_div').bind('resize', function(){
for (var i = 0; i < nv.graphs.length; i++) {
nv.graphs[i].update();
}
});
Ответ 3
Вы можете добавить обработчик события jquery resize, если вы не используете jquery, тогда вы можете присоединить обработчик событий, используя только angular.
Использование jQuery
$(document).on('resize', function() {
for (var i = 0; i < nv.graphs.length; i++) {
nv.graphs[i].update();
}
});