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

Question

Я пытаюсь использовать рекламный щит. js библиотека диаграмм с Angular 6 и проблема в размере диаграммы. Когда страница загружается в первый раз, размер диаграммы больше, чем у ее контейнера div, а когда я меняю размер окна браузера, размер диаграммы автоматически настраивается в соответствии с контейнером div.

См. Снимок экрана до и после изменения размера окна.

До

После

I Я пытался лениво загрузить график, как указано здесь , но он не работает.

Любая помощь будет оценена.

Answer 1

Импорт AfterViewInit и добавьте этот метод в класс. Эта строка кода изменяет размеры диаграммы после ее визуализации.

ngAfterViewInit() {
  this.charts[0].resize();    
}

Вы также можете указать высоту и ширину для функции изменения размера, чтобы изменить размер диаграммы до указанного c размера.

resize({height: '200px', width: '400px'});

Проверьте документацию здесь - https://naver.github.io/billboard.js/release/latest/doc/Chart.html#resize