Chart.js Afficher les étiquettes sur le graphique à secteurs

J'ai récemment mis à jour mon charts.js de la bibliothèque à la version la plus récente (2.5.0).
Cette version n'est pas afficher les étiquettes sur le graphique.

J'ai un exemple de travail sur fiddler: http://jsfiddle.net/g6fajwg8 .

Cependant, j'ai défini mon graphique, exactement comme dans l'exemple, mais ne peut toujours pas voir les noms sur la carte.

Remarque: Il y a beaucoup de questions de ce genre sur Google et Stackoverflow mais la plupart d'entre eux sont sur les versions précédentes qui fonctionne bien sur eux.

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);

Chart.js Afficher les étiquettes sur le graphique à secteurs

OriginalL'auteur Jacob | 2017-02-10

  1. 51

    Il semble comme il n'est pas du genre à être construit dans l'option.

    Cependant, il n'y a bibliothèque spéciale pour cette option, il s'appelle: "Graphique PieceLabel".

    Voici leur démo.

    Après l'ajout de leur script à votre projet, vous voudrez peut-être ajouter une autre option, appelé: "pieceLabel", et de définir les valeurs des propriétés que vous le souhaitez:

    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"
}
    Je l'utilise et il fonctionne très bien. Il change les valeurs de filtration et de le faire avec de jolies animations.
    Est-il possible d'utiliser ce plugin dans Angular2. Je suis à l'aide du graphique js dans mon angulaire 2 projet : stackoverflow.com/a/42556725/2879146 je suis de l'importation de plugin, mais ça ne fonctionne pas. Il n'y a pas d'erreur sur la console.
    Il n'a pas l'air comme s'il était fait comme un module. En téléchargeant le fichier à l'aide de mnp comprend également un min.js fichier build/. J'ai copié ça à mon public/assets/js/vendor/ dossier et référencé le fichier à partir de là.
    Cela a été utile merci (y)
    morceau de l'étiquette est une grande bibliothèque et devrait faire partie de la fonctionnalité de base

    OriginalL'auteur Jacob