gpt4 book ai didi

angular - D3 表格内图表( Angular 2)

转载 作者:行者123 更新时间:2023-12-02 20:46:46 25 4
gpt4 key购买 nike

我需要在表格内显示 d3 条形图。表行是动态的,我使用 ngFor 动态创建行。由于某种原因,图表没有显示。请看一下这个笨蛋。 https://plnkr.co/edit/IIfkLYS4iFlcj7d7SGlO?p=preview

<tr *ngFor="let item of itemsList">
<td>{{item.firstName}}</td>
<td>{{item.lastName}}</td>
<td><bar-chart [chartData]="item.cData"></bar-chart></td>
</tr>

表格上方的条形图显示良好。但表中重复的图表是未显示的图表。

我还检查过,如果我注释掉表格上方的条形图,则会显示表格第一行中的图表,但不会显示第二行中的图表。需要您的帮助吗?如果我在这里遗漏了什么,请告诉我。

最佳答案

您始终将第一个元素与类 chart 一起使用

const chart = d3.select('.chart')

为了区分每个图表,我将执行以下操作:

bar-chart.component.html

<svg class="chart" #chart></svg> // add #chart

条形图.component.ts

@ViewChild('chart') chart: ElementRef;
...
const chart = d3.select(this.chart.nativeElement);

<强> Modified Plunker

关于angular - D3 表格内图表( Angular 2),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44104324/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com