AnyChart в повторно используемом компоненте не отображается в правильном положении DOM (Angular 9.1.3, Bootstrap 4.4.1, Anychart 8.7.1) - PullRequest
Новая
       40

AnyChart в повторно используемом компоненте не отображается в правильном положении DOM (Angular 9.1.3, Bootstrap 4.4.1, Anychart 8.7.1)

0 голосов
/ 28 апреля 2020

Я делаю простую тестовую панель с двумя Bootstrap картами, каждая из которых содержит столбчатую диаграмму Anychart. Цель состоит в том, чтобы поиграть с повторно используемыми компонентами.

Вот ссылка на код Stackblitz

Когда я запускаю код, я ожидаю увидеть вторую диаграмму в тело второй карты. Однако, когда я проверяю DOM с помощью Dev Tools в браузере (Chrome), я вижу, что вторая диаграмма отображается под первым графиком в теге <app-bar-chart> первой карты. И ни один график не отображается в теге <app-bar-chart> второй карты. Вы можете видеть вторую диаграмму, заполняющую пространство позади двух карт.

Я пытался использовать Bootstrap "container", а также "row/col-12" теги классов на нескольких уровнях, но не повезло.

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

  app.component               (dashboard)
  |--card.component           (reusable card, data 1)
     |--bar-chart.component   (reusable chart)
  |--card.component           (reusable card, data 2)
     |--bar-chart.component   (reusable chart)

Спасибо за любые мысли, указатели и предложения заранее!

1 Ответ

0 голосов
/ 28 апреля 2020

Я не знаю о TS, но да, я знаю, как работает JS, поэтому с точки зрения JS я дал вам ответ.

Эта проблема возникает из TS, когда вы звоните

<app-card-component [dataSet]="dataSet1" [title]="'Data Set 1'"></app-card-component>

выше кода, он отображает компонент карты и идет для компонента bar-chart, и он найдет this.chart.container("chartContainer"); этот код, когда вы хотите нарисовать anychart так, он найдет в DOM и назначит эту диаграмму в chartContainer, и после этого вы позвоните

<app-card-component [dataSet]="dataSet2" [title]="'Data Set 2'"></app-card-component>

, и тот же процесс произойдет, что я как описано выше.

поэтому каждый раз, когда вы звоните, app-card-component будет назначать ваш график ниже вашего предыдущего графика, поэтому

Решение состоит в том, чтобы присвоить индекс каждому идентификатору и сделать динамические c chartContainer. как chartContainer1, chartContainer2 и т. д.

...