时间戳

首页 > 解决方案 > 可重用组件中的 AnyChart 未出现在正确的 DOM 位置（Angular 9.1.3、Bootstrap 4.4.1、Anychart 8.7.1）

html - 可重用组件中的 AnyChart 未出现在正确的 DOM 位置（Angular 9.1.3、Bootstrap 4.4.1、Anychart 8.7.1）

问题描述

我正在使用两个引导卡做一个简单的测试仪表板，每个卡都包含一个 Anychart 柱形图。目标是使用可重用的组件。

这是Stackblitz上代码的链接

当我运行代码时，我希望在第二张卡片的正文中看到第二张图表。但是，当我通过浏览器 (Chrome) 中的开发工具检查 DOM 时，我看到第二个图表似乎绘制在第一张卡片<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)

提前感谢您的任何想法，指示和建议！

标签： htmlangulartypescriptbootstrap-4anychart

解决方案

我不了解 TS，但是是的，我知道 JS 是如何工作的，所以从 JS 的角度来看，我给了你一个答案。

这个问题来自TS，当你调用

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

上面的代码，它呈现卡片组件并进入组件，它会在你想要绘制时bar-chart找到 该代码，它会在 DOM 中找到并在之后分配该图表，你调用this.chart.container("chartContainer");anychartchartContainer

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

并且将发生我上面描述的相同过程。

所以每次，你调用app-card-component它会将你的图表分配到你之前的图表下方，所以

解决方案是为每个 id 提供一个索引并使其成为 dynamic chartContainer。像chartContainer1，chartContainer2等等。。

推荐阅读