时间戳

首页 > 解决方案 > 使用 ngFor 和角顶点图的多个图表

angular - 使用 ngFor 和角顶点图的多个图表

问题描述

我正在从这里实现angular的顶点图。仅当图表未动态呈现时，我才能成功使用图表并获得所需的结果（对于单个或多个图表）。

对于 EG - 同一页上的图表 1

                    <div id="chart" class="card-img-top">
                        <apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart"
                            [colors]="chartOptions.colors" [labels]="chartOptions.labels"
                            [responsive]="chartOptions.responsive"></apx-chart>
                    </div>

同一页上的图表 2

                    <div id="charttest" class="card-img-top">
                        <apx-chart [series]="chartOptions.testseries" [chart]="chartOptions.chart"
                            [colors]="chartOptions.colors" [labels]="chartOptions.labels"
                            [responsive]="chartOptions.responsive"></apx-chart>
                    </div>

可以看出，要渲染多个图表，id和[series]需要不同。

当且仅当它不是动态的时，我在渲染多个图表时没有问题，即当我预先知道需要显示多少图表时。

我面临的问题是动态渲染多个图表，即当我不知道需要根据 API 中的某些值显示多少图表时。基本上像

            <div id="chart[x]"></div>

在一个循环内。

对于 EG - 假设我们有 x 个用户，并且对于每个 x 个用户，我们都有一些数据。那些需要显示在图表中。现在 x 是动态的，所以当添加新用户时，我需要为新用户创建图表。

仅供参考，我不限于将 apexcharts 用于 angular，任何图表库都可以，只要它是angular。

帮助将不胜感激

标签： angularchartsapexcharts

解决方案

推荐阅读