Comment visualiser un graphique à barres avec une étiquette affichant le graphique de réaction sur la barre

Pour créer un graphique à barres dans React à l'aide de React-chartjs-2 et afficher les étiquettes directement sur les barres (pas dans l'info-bulle), vous pouvez utiliser la bibliothèque React-chartjs-2 combinée avec le plugin Chart.js DataLabels.

Étapes de mise en œuvre

1. Installez les bibliothèques requises : assurez-vous que React-chartjs-2 et chart.js sont installés dans votre projet. De plus, installez le plugin chartjs-plugin-datalabels :

npm install react-chartjs-2 chart.js chartjs-plugin-datalabels

1. Importez les composants nécessaires : importez le composant graphique, le plugin et enregistrez-les avec Chart.js.

2. Configurer la configuration du graphique : configurez l'objet d'options pour inclure le plugin datalabels.

3. afficher le graphique : utilisez le composant Bar de React-chartjs-2 pour afficher votre graphique.

Exemple de code

Voici un exemple pour créer un graphique à barres avec des étiquettes affichées directement sur les barres :

importer React depuis "react" ;
importer {Bar} depuis "react-chartjs-2" ;
importer {
  Graphique en tant que ChartJS,
  Échelle de catégorie,
  Échelle Linéaire,
  BarElement,
  Titre,
  Info-bulle,
  Légende,
} à partir de "chart.js" ;
importer ChartDataLabels depuis "chartjs-plugin-datalabels" ;

// Enregistrer les composants et plugins Chart.js
ChartJS.register(
  Échelle de catégorie,
  Échelle Linéaire,
  BarElement,
  Titre,
  Info-bulle,
  Légende,
  ChartDataLabels // Enregistrez le plugin DataLabels
);

const BarChartWithLabels = () => {
  // Données du graphique
  données const = {
    étiquettes : ["Janvier", "Février", "Mars", "Avril", "Mai"],
    ensembles de données : [
      {
        étiquette : "Ventes",
        données : [30, 20, 50, 40, 60],
        Couleur d'arrière-plan : "rgba(75, 192, 192, 0,6)",
        borderColor : "rgba(75, 192, 192, 1)",
        largeur de bordure : 1,
      },
    ],
  } ;

  // Options du graphique
  options const = {
    réactif : vrai,
    plugins : {
      légende: {
        affichage : vrai,
        position : "haut",
      },
      étiquettes de données : {
        couleur : "noir", // Couleur de l'étiquette
        Anchor: "end", // Positionne le label près du bord de la barre
        align: "top", // Aligne l'étiquette en haut de la barre
        formateur : (valeur) => value, // Formater l'étiquette (par exemple, afficher la valeur)
      },
    },
    échelles : {
      oui : {
        startAtZero : vrai,
      },
    },
  } ;

  retour (
    <div>



<p>AQ pour vous :</p>

• Comment personnaliser les étiquettes de données pour chaque ensemble de données lors de l'utilisation de barres empilées ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!