饼图使用chart.js

Question

我试图使用箭头使用箭头显示数据值，如上图所示。但是，我没有找到任何文件。 请帮忙！

Answer 1

使用Chart.PieceLabel.js plugin，你可以获得不完全符合预期的东西但类似的东西：切片外的标签。

angular.module("app", ["chart.js"]).controller("ChartCtrl", function($scope) {

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    
    $scope.data = [65, 59, 80, 81, 56, 55, 40];
    
    $scope.options = {
      pieceLabel: {
        render: 'label',
        fontColor: '#000',
        position: 'outside'
      }
    };
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<script src="https://rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>

<div ng-app="app" ng-controller="ChartCtrl">
  <canvas id="pie" class="chart chart-pie"
         chart-data="data" chart-labels="labels" chart-options="options">
  </canvas> 
</div>

<强>更新

使用Chart.PieceLabel.js plugin标签的叉子也有标注箭头。

检查小提琴已更新：https://jsfiddle.net/beaver71/8ytvggcL/