Chart.js всегда видимые метки

Question

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

это расположение они хотят (так метки должны быть видимыми, отдельные бары, ...)

Так что мой первый вариант был попробовать Chart.js, но я мог бы получить только что-то вроде этого :

Так основно единственное, что должно произойти, это способ, чтобы всегда показывать этикетки.

Данные предоставляются с помощью угловых и представляют собой массив, только если целые числа. Используя следующую директиву для диаграммы: http://jtblin.github.io/angular-chart.js/

Мой текущий HTML:

<canvas id="polar" class="chart chart-polar-area" data="data.values" labels="data.labels" width="200" height="200" 
     options="{animateRotate: false}"></canvas> 

Я нашел это; How to add label in chart.js for pie chart, но я не мог заставить его работать

Answer 1

на основе ChartJS: Change the positions of the tooltips

---

Preview

---

преобразовательного выше угловых-диаграммы легко, потому что мы устанавливают только параметры. Однако нам нужно сделать 2 незначительные изменения (т.е. установить график и CTX переменные из this

// THIS IS REQUIRED AND WAS ADDED 
tooltipEvents: [], 
onAnimationComplete: function() { 
    // THESE 2 LINES ARE NEW 
    var chart = this.chart; 
    var ctx = this.chart.ctx; 

    this.segments.forEach(function (segment) { 
     var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({ 
      // THESE 2 LINES WERE CHANGED 
      x: chart.width/2, 
      y: chart.height/2, 
      startAngle: segment.startAngle, 
      endAngle: segment.endAngle, 
      outerRadius: segment.outerRadius * 2 + 10, 
      innerRadius: 0 
     }) 
    ... 

---

Весь код если у вас есть библиотека скриптов включены выглядит примерно так

HTML

<div ng-app="myApp"> 
    <div ng-controller="myController"> 
     <canvas id="polar-area" class="chart chart-polar-area" data="data" labels="labels" options="options"></canvas> 
    </div> 
</div> 

Сценарий

angular.module('myApp', ["chart.js"]); 
angular.module('myApp').controller('myController', function ($scope) { 
     $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"]; 
     $scope.data = [300, 500, 100, 40, 120]; 
     $scope.options = { 
      scaleOverride: true, 
      scaleStartValue: 0, 
      scaleStepWidth: 40, 
      scaleSteps: 10, 
      tooltipEvents: [], 
      onAnimationComplete: function() { 
       var chart = this.chart; 
       var ctx = this.chart.ctx; 

       this.segments.forEach(function (segment) { 
        var outerEdge = Chart.Arc.prototype.tooltipPosition.apply({ 
         x: chart.width/2, 
         y: chart.height/2, 
         startAngle: segment.startAngle, 
         endAngle: segment.endAngle, 
         outerRadius: segment.outerRadius * 2 + 10, 
         innerRadius: 0 
        }) 

        var normalizedAngle = (segment.startAngle + segment.endAngle)/2; 
        while (normalizedAngle > 2 * Math.PI) { 
         normalizedAngle -= (2 * Math.PI) 
        } 

        if (normalizedAngle < (Math.PI * 0.4) || (normalizedAngle > Math.PI * 1.5)) 
         ctx.textAlign = "start"; 
        else if (normalizedAngle > (Math.PI * 0.4) && (normalizedAngle < Math.PI * 0.6)) { 
         outerEdge.y += 5; 
         ctx.textAlign = "center"; 
        } 
        else if (normalizedAngle > (Math.PI * 1.4) && (normalizedAngle < Math.PI * 1.6)) { 
         outerEdge.y - 5; 
         ctx.textAlign = "center"; 
        } 
        else 
         ctx.textAlign = "end"; 

        ctx.fillText(segment.label, outerEdge.x, outerEdge.y); 
       }) 
      } 
     } 
    } 
); 

---

Fiddle - http://jsfiddle.net/tmzpy7Lt/