Question

我使用angular-chart.js创建了一个饼图，它的工作原理非常好。现在我需要在饼图的每个部分显示数据值，这不起作用。

我尝试使用Chart.PieceLabel.js并在选项部分添加了以下代码。它没用。我不知道如何将它与angular-chart.js一起使用，因为它最初是为chart.js

编写的

pieceLabel: {
            render: 'label'
        }

我使用了onAnimationComplete，但它似乎不起作用。我没有收到任何错误消息。这是我的代码。我哪里错了？感谢您的帮助！ :)

HTML

 <canvas id="pie" class="chart chart-pie"
                    chart-data="data" chart-labels="labels" chart-options="options" width="500" height="300" chart-colors="colors"></canvas>

JS代码

$scope.options = {
    legend: {
        display: true,
        position: "bottom"
    },
    tooltipEvents: [],
    showTooltips: true,
    tooltipCaretSize: 0,
    onAnimationComplete: function () {
        this.showTooltip(this.segments, true);
    }
};
$scope.data = tempData;
$scope.labels = tempLabels;

Plunker链接： https://embed.plnkr.co/zlBWzJ/

Answer 1

在你的plunker中，我更换了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-title">
  <a>Project Title #0</a>
</div>

<br>

<div class="title" id="title1">
  <a>Project Title #1</a>
</div>

<br>

<button class="replace-btn">
  Replace Title (with delay)
</button>

<button class="replace-btn2">
  Replace Title (without delay)
</button>

使用

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>

</script>
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script>

(function(angular) {
  'use strict';
  angular.module('myApp', ['chart.js'])

    .controller('myController', [function() {
      var ctrl = this;


      ctrl.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
      ctrl.data = [300, 500, 100];
      ctrl.data.label = [300, 500, 100];

      ctrl.options = {
        legend: {
          display: true,
          position: "bottom"
        },
        tooltipEvents: [],
        showTooltips: true,
        tooltipCaretSize: 0,
        onAnimationComplete: function() {
          this.showTooltip(this.segments, true);
        },
      };


    }]);


})(window.angular);

在angular-chart.js中在饼图上显示数据标签

1 个答案: