Question

我想使用chart.js（版本2.7.0）饼图来可视化网页上的数据。我需要使用通常有用的饼图。如http://www.chartjs.org/samples/latest/charts/pie.html上的示例页面所示，饼图部件上没有可见的数据，仅在鼠标悬停时可见。我希望它直接显示在部件中。我在文档中没有找到任何相关内容。这通常是可能的，如果是的话，我怎样才能做到这一点？

Answer 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。

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

1 个答案: