Chart.js Wyświetl etykiety na wykresie kołowym

Question

Niedawno zaktualizowałem moją bibliotekę charts.js do najnowszej wersji (2.5.0). Ta wersja nie wyświetla etykiet na wykresie.

Mam przykład pracy na skrzypce: http://jsfiddle.net/g6fajwg8.

Jednak zdefiniowałem mój wykres dokładnie tak, jak w przykładzie, ale nadal nie widzę etykiet na wykresie.

Uwaga: Istnieje wiele takich pytań w Google i Stackoverflow, ale większość z nich dotyczy wcześniejszych wersji, które działają dobrze na ich temat.

var config = { 
    type: 'pie', 
    data: { 
     datasets: [{ 
      data: [ 
       1200, 
       1112, 
       533, 
       202, 
       105, 
      ], 
      backgroundColor: [ 
       "#F7464A", 
       "#46BFBD", 
       "#FDB45C", 
       "#949FB1", 
       "#4D5360", 
      ], 
      label: 'Dataset 1' 
     }], 
     labels: [ 
      "Red", 
      "Green", 
      "Yellow", 
      "Grey", 
      "Dark Grey" 
     ] 
    }, 
    options: { 
     responsive: true, 
     legend: { 
      position: 'top', 
     }, 
     title: { 
      display: true, 
      text: 'Chart.js Doughnut Chart' 
     }, 
     animation: { 
      animateScale: true, 
      animateRotate: true 
     } 
    } 
}; 

window.pPercentage = new Chart(ChartContext, config); 

Answer 1

Wydaje się, że nie ma takiej opcji w kompilacji.

Istnieje jednak specjalna biblioteka dla tej opcji, która wywołuje: "Chart PieceLabel".

Oto ich demo.

Po dodaniu ich skrypt do swojego projektu, możesz dodać inną opcję o nazwie: „pieceLabel” i określenie wartości właściwości, jak chcesz:

pieceLabel: { 
    // mode 'label', 'value' or 'percentage', default is 'percentage' 
    mode: (!mode) ? 'value' : mode, 

    // precision for percentage, default is 0 
    precision: 0, 

    // font size, default is defaultFontSize 
    fontSize: 18, 

    // font color, default is '#fff' 
    fontColor: '#fff', 

    // font style, default is defaultFontStyle 
    fontStyle: 'bold', 

    // font family, default is defaultFontFamily 
    fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" 
}