在 Chart.js 饼图部件中显示值

【问题标题】：Show values in Chart.js Pie chart parts在 Chart.js 饼图部件中显示值
【发布时间】：2017-10-24 11:40:45
【问题描述】：

我想使用chart.js（版本2.7.0）饼图来可视化网页上的数据。我需要使用通常有效的饼图。正如在http://www.chartjs.org/samples/latest/charts/pie.html 的示例页面上看到的那样，饼图部分上没有可见的数据，只有鼠标悬停。我想让它直接显示在零件中。我在文档中没有找到任何关于此的内容。这通常是可能的吗？如果可以，我该如何实现？

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

是的，这是可能的。您可以使用名为 - Chart.PieceLabel.js 的 Chart.js 插件来实现。

这是一个基本的例子：

var chart = new Chart(ctx, {
   type: 'pie',
   data: {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{
         data: [30, 40, 25],
         backgroundColor: 'rgba(0,119, 220, 0.2)'
      }]
   },
   options: {
      pieceLabel: {
         render: 'value' //show values
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>

<canvas id="ctx"></canvas>

要了解有关此插件及其的用例的更多信息，请参阅here。

【讨论】：