막대에 반응 차트 표시 레이블을 사용하여 막대 차트를 시각화하는 방법

react-chartjs-2를 사용하여 React에서 막대 차트를 만들고 (툴팁이 아닌) 막대에 직접 레이블을 표시하려면 결합된 React-chartjs-2 라이브러리를 사용할 수 있습니다. Chart.js DataLabels 플러그인을 사용하세요.

구현 단계

1. 필수 라이브러리 설치: 프로젝트에 React-chartjs-2와 Chart.js가 모두 설치되어 있는지 확인하세요. 추가적으로, Chartjs-plugin-datalabels 플러그인을 설치하세요:

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

1. 필요한 구성 요소 가져오기: 차트 구성 요소, 플러그인을 가져오고 Chart.js에 등록합니다.

2. 차트 구성 설정: 데이터 라벨 플러그인을 포함하도록 옵션 개체를 구성합니다.

3. 차트 렌더링: React-chartjs-2의 Bar 구성 요소를 사용하여 차트를 렌더링합니다.

예제 코드

다음은 막대에 직접 표시되는 레이블이 있는 막대 차트를 만드는 예입니다.

"react"에서 React를 가져옵니다.
"react-chartjs-2"에서 { Bar }를 가져옵니다.
수입 {
  ChartJS로 차트,
  카테고리규모,
  선형규모,
  바요소,
  제목,
  툴팁,
  전설,
} "chart.js"에서;
"chartjs-plugin-datalabels"에서 ChartDataLabels를 가져옵니다.

// Chart.js 구성 요소 및 플러그인 등록
ChartJS.등록(
  카테고리규모,
  선형규모,
  바요소,
  제목,
  툴팁,
  전설,
  ChartDataLabels // DataLabels 플러그인 등록
);

const BarChartWithLabels = () => {
  // 차트 데이터
  const 데이터 = {
    라벨: ["1월", "2월", "3월", "4월", "5월"],
    데이터세트: [
      {
        라벨: "판매",
        데이터: [30, 20, 50, 40, 60],
        배경색상: "rgba(75, 192, 192, 0.6)",
        borderColor: "rgba(75, 192, 192, 1)",
        국경 폭: 1,
      },
    ],
  };

  // 차트 옵션
  const 옵션 = {
    반응형: 사실,
    플러그인: {
      전설: {
        디스플레이: 사실,
        위치: "상단",
      },
      데이터 라벨: {
        color: "black", // 라벨 색상
        앵커: "end", // 막대 가장자리 근처에 라벨을 배치합니다.
        align: "top", // 라벨을 막대 상단에 정렬합니다.
        포맷터: (값) => value, // 라벨 형식 지정(예: 값 표시)
      },
    },
    저울: {
      y: {
        startAtZero: 사실,
      },
    },
  };

  반품 (
    <div>



<p>당신을 위한 품질보증:</p>

• 누적 막대를 사용할 때 각 데이터세트의 데이터 라벨을 어떻게 맞춤설정하나요?

위 내용은 막대에 반응 차트 표시 레이블을 사용하여 막대 차트를 시각화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!