Bagaimana untuk menggambarkan carta bar dengan label yang menunjukkan carta tindak balas pada bar

Untuk mencipta carta bar dalam React menggunakan react-chartjs-2 dan memaparkan label terus pada bar (bukan dalam petua alat), anda boleh menggunakan gabungan perpustakaan react-chartjs-2 dengan pemalam Chart.js DataLabels.

Langkah-Langkah untuk Melaksanakan

1. Pasang Pustaka yang Diperlukan: Pastikan anda telah memasang react-chartjs-2 dan chart.js dalam projek anda. Selain itu, pasang pemalam chartjs-plugin-datalabels:

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

1. Import Komponen Yang Diperlukan: Import komponen carta, pemalam dan daftarkannya dengan Chart.js.

2. Sediakan Konfigurasi Carta: Konfigurasikan objek pilihan untuk memasukkan pemalam label data.

3. ender Carta: Gunakan komponen Bar daripada react-chartjs-2 untuk memaparkan carta anda.

Contoh Kod

Berikut ialah contoh untuk membuat carta bar dengan label ditunjukkan terus pada bar:

import React daripada "react";
import { Bar } daripada "react-chartjs-2";
import {
  Carta sebagai ChartJS,
  Skala Kategori,
  Skala Linear,
  BarElement,
  Tajuk,
  Petua alat,
  Lagenda,
} daripada "chart.js";
import ChartDataLabels daripada "chartjs-plugin-datalabels";

// Daftar komponen dan pemalam Chart.js
ChartJS.register(
  Skala Kategori,
  Skala Linear,
  BarElement,
  Tajuk,
  Petua alat,
  Lagenda,
  ChartDataLabels // Daftar pemalam DataLabels
);

const BarChartWithLabels = () => {
  // Data carta
  data const = {
    label: ["Januari", "Februari", "Mac", "April", "Mei"],
    set data: [
      {
        label: "Jualan",
        data: [30, 20, 50, 40, 60],
        Warna latar belakang: "rgba(75, 192, 192, 0.6)",
        Warna sempadan: "rgba(75, 192, 192, 1)",
        lebar sempadan: 1,
      },
    ],
  };

  // Pilihan carta
  pilihan const = {
    responsif: benar,
    pemalam: {
      lagenda: {
        paparan: benar,
        kedudukan: "atas",
      },
      label data: {
        warna: "hitam", // Warna label
        anchor: "end", // Letakkan label berhampiran tepi bar
        align: "top", // Jajarkan label ke bahagian atas bar
        pemformat: (nilai) => nilai, // Formatkan label (cth., tunjukkan nilai)
      },
    },
    penimbang: {
      y: {
        beginAtZero: benar,
      },
    },
  };

  kembali (
    <div>



<p>QA untuk anda:</p>

• Bagaimana untuk menyesuaikan label data untuk setiap set data apabila menggunakan bar bertindan ?

Atas ialah kandungan terperinci Bagaimana untuk menggambarkan carta bar dengan label yang menunjukkan carta tindak balas pada bar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!