web-dev-qa-db-fra.com

Légende du graphique à secteurs - Chart.js

J'ai besoin d'aide pour mettre le numéro du camembert dans la légende

Image du graphique

Si je survole le graphique avec la souris, je peux voir le nombre relatif à chaque élément

je veux l'afficher dans la légende soit

le code important jusqu'à présent:

var tempData = {
    labels: Status,
    datasets: [
        {
            label: "Status",
            data: Qtd,
            backgroundColor: randColor
        },

    ]
};

var ctx = $("#pieStatus").get(0).getContext("2d");
var chartInstance = new Chart(ctx, {
    type: 'pie',
    data: tempData,
    options: {
         title: {
            display: true,
            fontsize: 14,
            text: 'Total de Pedidos por Situação'
        },
        legend: {
            display: true,
            position: 'bottom',

        },
        responsive: false
    }

});

"Qtd", "randColor" sont "var" déjà avec des valeurs

chart.jspie-chartlegend-properties
16
dpanegassi

Je voulais laisser l'utilisateur choisir parmi plus de 100 ensembles de données, mais plutôt que de les ajouter/supprimer de mon Graphique j'ai décidé de définir le showLine: false sur tout jeu de données que je souhaite masquer. Malheureusement, la valeur par défaut légende afficherait tous les 100+. Donc, dans ma solution, je génère la légende manuellement, en filtrant tout ensemble de données qui a showLine: false.

Vos paramètres auront ceci:

legend: {
  labels: {
    generateLabels: (a) => {
      return a.data.labels
    }
  }

Et vous générerez vos propres étiquettes avec une fonction d'assistance:

function updateAllLabels() {
  const myNewLabels = [];

  myChart.data.datasets.forEach((element) => {
    if (element.showLine) {
      myNewLabels.Push(generateLabel(element));
    }
  });

  myChart.data.labels = myNewLabels;
}

Et vous allez générer l'étiquette avec une autre fonction:

function generateLabel(data) {
  return {
    fillStyle: data.borderColor,
    lineWidth: 1,
    strokeStyle: data.borderColor,
    text: data.countyName, // I attach countryName to my datasets for convenience
  }
}

Maintenant, n'oubliez pas d'appeler la fonction lors de la mise à jour de votre graphique:

updateAllLabels();
myChart.update();

Graphique heureux!

0
Boris Yakubchik