So visualisieren Sie ein Balkendiagramm mit der Beschriftung React-Chart auf dem Balken

Um ein Balkendiagramm in React mit „react-chartjs-2“ zu erstellen und Beschriftungen direkt auf den Balken (nicht im Tooltip) anzuzeigen, können Sie die Bibliothek „react-chartjs-2“ kombiniert verwenden mit dem Chart.js DataLabels-Plugin.

Schritte zur Implementierung

1. Installieren Sie die erforderlichen Bibliotheken: Stellen Sie sicher, dass sowohl „react-chartjs-2“ als auch „chart.js“ in Ihrem Projekt installiert sind. Installieren Sie außerdem das Plugin chartjs-plugin-datalabels:

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

1. Importieren Sie die erforderlichen Komponenten: Importieren Sie die Diagrammkomponente und das Plugin und registrieren Sie sie bei Chart.js.

2. Diagrammkonfiguration einrichten: Konfigurieren Sie das Optionsobjekt so, dass es das Datalabels-Plugin enthält.

3. Diagramm rendern: Verwenden Sie die Bar-Komponente von „react-chartjs-2“, um Ihr Diagramm zu rendern.

Beispielcode

Hier ist ein Beispiel zum Erstellen eines Balkendiagramms mit Beschriftungen, die direkt auf den Balken angezeigt werden:

React aus „react“ importieren;
import { Bar } from „react-chartjs-2“;
importieren {
  Diagramm als ChartJS,
  KategorieSkala,
  LinearScale,
  BarElement,
  Titel,
  Tooltip,
  Legende,
} von „chart.js“;
Importieren Sie ChartDataLabels aus „chartjs-plugin-datalabels“;

// Chart.js-Komponenten und Plugins registrieren
ChartJS.register(
  KategorieSkala,
  LinearScale,
  BarElement,
  Titel,
  Tooltip,
  Legende,
  ChartDataLabels // Registrieren Sie das DataLabels-Plugin
);

const BarChartWithLabels = () => {
  // Diagrammdaten
  const data = {
    Etiketten: ["Januar", "Februar", "März", "April", "Mai"],
    Datensätze: [
      {
        Etikett: „Verkäufe“,
        Daten: [30, 20, 50, 40, 60],
        Hintergrundfarbe: „rgba(75, 192, 192, 0,6)“,
        borderColor: "rgba(75, 192, 192, 1)",
        borderWidth: 1,
      },
    ],
  };

  // Diagrammoptionen
  const-Optionen = {
    reaktionsfähig: wahr,
    Plugins: {
      Legende: {
        Anzeige: wahr,
        Position: „oben“,
      },
      Datenbeschriftungen: {
        Farbe: „schwarz“, // Etikettenfarbe
        Anker: „Ende“, // Positionieren Sie die Beschriftung in der Nähe der Leistenkante
        align: "top", // Richten Sie die Beschriftung am oberen Rand der Leiste aus
        Formatierer: (Wert) => value, // Formatieren Sie die Beschriftung (z. B. zeigen Sie den Wert an)
      },
    },
    Skalen: {
      y: {
        beginAtZero: wahr,
      },
    },
  };

  zurückkehren (
    <div>



<p>Qualitätssicherung für Sie:</p>

• Wie kann ich Datenbeschriftungen für jeden Datensatz anpassen, wenn ich eine gestapelte Leiste verwende?

Das obige ist der detaillierte Inhalt vonSo visualisieren Sie ein Balkendiagramm mit der Beschriftung React-Chart auf dem Balken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!