web-dev-qa-db-fra.com

Les étiquettes de données de Chartjs changent la police et la couleur du texte affiché à l'intérieur du graphique à secteurs

J'utilise chartjs

et étiquettes de données

J'ai réalisé tout ce dont j'avais besoin avec chartjs et son plugin. Voici ma sortie finale enter image description here

Voici mon code

  ( function ( $ ) {
            "use strict";
            /////////////Pie chart START here//////////////////////////////
            var ctx = document.getElementById( "pieChart" );
            ctx.height = 130;
            var myChart = new Chart( ctx, {
            type: 'pie',
            data: {
            datasets: [ {   
            data: [ 40, 20, 10, 3, 7, 15, 4, 52 ],
            backgroundColor: [
            "rgba(0,128,128)",
            "rgba(255,20,147)",
            "rgba(0,0,128)",
            "rgba(0,128,0)",
            "rgba(128,0,0)",
            "rgba(255,0,0)",
            "rgba(218,112,214)",
            "rgba(70,130,180)"
            ],
            hoverBackgroundColor: [
            "rgba(0,128,128)",
            "rgba(255,20,147)",
            "rgba(0,0,128)",
            "rgba(0,128,0)",
            "rgba(128,0,0)",
            "rgba(255,0,0)",
            "rgba(218,112,214)",
            "rgba(70,130,180)"
            ]
            } ],
            labels: [
            "Open",
            "On-Hold (Need Spares)",
            "In-Process",
            "Closed",
            "Re-Open",
            "On-Hold (Condemnation)",
            "On-Hold (For Decision)",
            "On-Hold (For Revision)"
            ]
            },
            options: {
            responsive: true,
                legend: {
                position: 'left',     
                    labels: {
                        fontSize:17,  
                    }
                }
            }

            } );
            /////////////Pie chart END here//////////////////////////////

        } )( jQuery );

Maintenant, je dois changer la taille de la police et la couleur du texte (données) affiché à l'intérieur de chaque tranche du graphique à secteurs. De l'aide ?

P.s: J'utilise chart.js v2.7.2

chartschart.jspie-chart
4
Muhammad Asif Raza

J'utilise Chart js et datalebels pour, et je peux le faire comme ceci:

plugins: {
      datalabels: {
        color: #ffffff,
        formatter: function (value) {
          return Math.round(value) + '%';
        },
        font: {
          weight: 'bold',
          size: 16,
        }
      }
    }

Bien sûr, dans mon exemple, j'ajoute le "%", c'est pourquoi j'utilise cette fonction dans le formateur.

N'oubliez pas que les "plugins" font partie des "options" du graphique.

Ici est la page des bases de données du plugin avec plus de choses que vous pouvez faire

9
Sandy Veliz