时间戳

首页 > 解决方案 > 如何显示 amexio-d3-chart-donut？

angular - 如何显示 amexio-d3-chart-donut？

问题描述

我实现了 amexio-d3-chart-donut，但图表没有显示。之后，我得到了正确的数组值。在此，我提到了我的 stackblit 链接“ https://stackblitz.com/edit/angular-sjesqn ”。谁帮帮我！！

标签： angular

解决方案

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

然后，您将数据放入的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

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

推荐阅读