Отображение меток данных на круговой диаграмме в angular-chart.js

Я создал круговую диаграмму с помощью 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;

Ссылка на планкер: https://embed.plnkr.co/zlBWzJ/


javascript charts chart.js angularjs angular-chart
person Linda    schedule 02.01.2018    source источник
comment
Пожалуйста, предоставьте плунжер.   -  person KiranPurbey    schedule 02.01.2018
comment
что вы имели в виду под значением данных? любой скриншот   -  person zabusa    schedule 02.01.2018
comment
@zabusa я имел в виду данные, которые представляет часть круга. Например, если данные раздела равны 75, мне нужно, чтобы 75 отображались в этом конкретном разделе диаграммы.   -  person Linda    schedule 02.01.2018
comment
@Linda, это отображается, когда вы наводите на него курсор?   -  person zabusa    schedule 02.01.2018
comment
проверьте эту скрипту jsfiddle.net/zuhp8k5f/270   -  person zabusa    schedule 02.01.2018
comment
@KiranPurbey, вот план: embed.plnkr.co/ta3oJf   -  person Linda    schedule 03.01.2018
comment
воспользуйтесь этой ссылкой embed.plnkr.co/zlBWzJ   -  person Linda    schedule 03.01.2018
comment
перейдите по этой ссылке jsfiddle.net/6p545k3z . И дайте мне знать, если это полезно   -  person KiranPurbey    schedule 03.01.2018
comment
Эй, @Linda, полезна ли эта ссылка? Если да, проголосуйте за меня.   -  person KiranPurbey    schedule 04.01.2018
comment
@KiranPurbey Спасибо, Киран! Я уже встречал эту ссылку. Мой код совпадает с ним, за исключением части определения данных. Когда я изменяю определение данных, чтобы оно соответствовало отправленной вами скрипке, мой angular-chart.js ломается. :( Скрипка использует только chart.js. Что бы вы предложили? [определенно голосую за то, что вы нашли время, чтобы помочь! :)]   -  person Linda    schedule 04.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

В твоем плункере я заменил

<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);
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></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>

<!--
    <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> 
    -->


<body ng-app="myApp" ng-controller="myController as ctrl">
  <canvas id="pie" class="chart chart-pie" chart-data="ctrl.data" chart-labels="ctrl.labels" chart-options="ctrl.options">
    </canvas>

</body>

person Deep 3015    schedule 30.01.2018