如何显示美国-d3-图表-甜甜圈?

Question

我实现了amexio-d3-chart-donut，但图表没有显示。之后，我得到了正确的数组值。在这里，我提到了我的堆栈链接"https://stackblitz.com/edit/angular-sjesqn"。有人帮我！！

Answer 1

你的Stackblitz有很多问题。首先：您尝试从JSON加载数据的方式在Stackblitz中不起作用。您尝试加载../assets/data/snapDonutData.json但snapDonutData.json不在assets文件夹中。有关在 Stackblitz 中读取数据的更多信息，请参阅这篇文章：Reading data.json with HttpClient on Stackblitz？。

然后，将数据放入donutArray的方式不正确。你应该用键、值数组创建一个数组。这是你想要的：

[
[
"Assetclass",
"Percentage"
],
[
"Cash and Short Term Fixed Income",
5.4
],
[
"Fixed Income",
20.72
],
[
"International Equity",
12.71
],
[
"US Equity",
53.58
],
[
"Alternative Investments",
7.59
]
]

您可以使用以下代码执行此操作：

data.donutDatas.forEach(item => {
this.data.push([item.assetClass, item.currentPercent]);
});

然后还有一件事，因为您正在使用异步数据，因此在加载页面时数据不会立即可用。因此，您应该等到数据加载完毕后再显示图表。我在以下工作示例中为此添加了一个 isLoaded 属性：https://stackblitz.com/edit/angular-tdx5ob

附言。我还删除了所有未使用的变量;)