如何将 ionic 2 中的图表修改为如下图所示？答案

【问题标题】：How can I modify a chart in ionic 2 to look like the picture below?如何将 ionic 2 中的图表修改为如下图所示？
【发布时间】：2017-08-07 13:26:47
【问题描述】：

我正在使用 import {Chart} from 'chart.js'；创建我的聊天，但我有一些挑战。我想创建一个如下所示的图表。

最好的问候

//Creating the doughth
    this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {


      type: 'doughnut',
      data: {
        labels: ["Cash in Hand", "Cash in Bank", "Cash in Mpesa"],
        datasets: [{
          label: '# of Votes',
          data: [this.naaam, this.naaam1, this.naaam2 ],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          hoverBackgroundColor: [
            "#FF6384",
            "#36A2EB",
            "#FFCE56"
          ]
        }]
      }

    });

【问题讨论】：

"但我有一些挑战"..你能具体说明吗？你是说有什么错误吗？
不是错误@suraj 我怎样才能在中间放一些东西，比如 Total:91 和一些可以不断变化的动画。

标签： angular typescript ionic2

【解决方案1】：

我们还在 Ionic 2 应用程序中使用 Chart.js。为了呈现图表，我们使用ng2-charts 库。

关于将总数放在底部中心的问题，您可以将图表包装在一个 div 中并添加一个包含总数的绝对定位的 span 元素。

【讨论】：

我正在关注这个网址：joshmorony.com/…
ng2-charts 与 Josh 在这里使用的完全不同吗？ joshmorony.com/…
我认为差别不大。 ng2-charts 只提供了一些指令，您可以将它们添加到画布元素中，以便轻松绑定您在打字稿中设置的变量。在 Josh 的教程中，您使用 nativeElement 绑定来自 typescript 的变量。
如何使用 Josh 的示例实现上述方面？谢谢