показать метку внутри диаграммы - angular.js и chart.js

Я пытаюсь показать информацию о диаграмме без необходимости пользователю наводить указатель мыши на любую часть диаграммы. Я использую Chart.js с Angular.js.

Мои сомнения такие же, как и в этом вопросе здесь!

html код:

<div class="wrapper-chart" >
        <canvas
            id="pie"
            class="chart chart-pie"
            chart-data="data"
            chart-labels="labels"
            chart-options="options"
            chart-colors="colors"
            legend = "true"
            chart-series="series">
    </canvas>
</div>

угловой код:

angular
    .module('myBeeApp.controllers')
    .controller('chartHome', chartHome);

chartHome.$inject = [
    '$scope'
];
function chartHome(
    $scope
){
        $scope.labels = ["Primavera", "VerÃ£o", "Outono", "Inverno"];
        $scope.data = [32, 53, 14, 79];
        $scope.options = {
            showToolTips: true,
            tooltipEvents: [],
            onAnimationComplete: function() {
                this.showTootip(this.datasets[0].bars,true);
            },
            title: {
                display: true,
                text: 'Quantidade por EstaÃ§Ã£o',
                fontColor: '#ff8c1b',
                fontFamily: 'HelveticaNeue',
                fontSize: 26,
            },
            legend: {
                display: true
            },
            cutoutPercentage: 50,
        };
        $scope.colors = ["#FF7400", "#C85B00", "#FFB77B", "#E3831E"];
}

Диаграмма сформирована правильно, однако информация уже не отображается.

Сгенерированная диаграмма (моя диаграмма):

Как бы я хотел, чтобы это было (с ярлыками):

Я уже пробовал этот фрагмент кода, но он не у меня работал!

$scope.options = {
    tooltipEvents: [],
    showTooltips: true,
    tooltipCaretSize: 0,
    onAnimationComplete: function () {
        this.showTooltip(this.segments, true);
    },
};

Я также пробовал выполнить следующие шаги! Совершенно не сработало! (поэтому я считаю, что это не повторяющийся вопрос)

версия: angular - v1.6.6; угловая диаграмма - v1.1.1 ; диаграмма.js — v2.7.1

Спасибо за все!

Wesley Redfield 29.01.2018 источник

Ответы (1)

arrow_upward
1
arrow_downward

Я следил за тем же сообщением, которое вы упомянули. Я изменил тип диаграммы, метки, цвета и данные. Он показывает метку на диаграмме без наведения по мере необходимости.

angular.module('App', ["chart.js"]);


angular.module('App').controller('Controller', ['$scope', '$http', '$location', '$window',

  function($scope, $http, $location, $window) {
    $scope.options = {
      tooltipEvents: [],
      showTooltips: true,
      tooltipCaretSize: 0,
      onAnimationComplete: function() {
        this.showTooltip(this.segments, true);
      },
    };

    var diskDataJson = {
      "data": [32, 53, 14, 79],
      "labels": ["Primavera", "VerÃ£o", "Outono", "Inverno"],
      "colours": ["#FF7400", "#C85B00", "#FFB77B", "#E3831E"]
    };

    $scope.pieDiskData = diskDataJson;
  }
]);

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script>



<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.css">


<div ng-app="App">
  <div ng-controller="Controller">
    <canvas id="pie33" chart-options="options" class="chart chart-doughnut chart-xs ng-isolate-scope" height="120" width="240" chart-data="pieDiskData.data" chart-labels="pieDiskData.labels" chart-colours="pieDiskData.colours" chart-legend="true"></canvas>
  </div>
</div>

Демонстрация Fiddle

Deep 3015 30.01.2018

показать метку внутри диаграммы - angular.js и chart.js

Ответы (1)

Вопросы по теме