7개의 최적 반응 도표/도형 라이브러리 및 사용 방법(프레젠테이션 첨부)

이 글은 처음에 에 발표되었다
도표나 도형은 데이터 시각화에 사용되는 웹 응용 프로그램의 흔한 구성 요소입니다.그것은 원시 데이터를 의사결정에 사용할 수 있는 정보로 전환시킨다.
처음부터 웹 응용 프로그램에서 도표 구성 요소를 만드는 것은 어렵고 시간이 오래 걸린다.따라서 https://www.devaradise.com/best-react-chart-graph-libraries은 일반적으로 외부 라이브러리를 사용하여 도표 구성 요소를 만듭니다.
React에서는 외부 라이브러리를 사용하여 차트 구성 요소를 만들 수도 있습니다.많은 React 차트 라이브러리를 선택할 수 있습니다.
여기서 7개의 최고급 반응도/그래픽 라이브러리를 검토하고 검토하여 프로젝트에 가장 적합한 항목을 선택하고 결정할 수 있습니다.

관련 강좌

web developers

React Datepicker Tutorial with Top 2 Datepicker Libraries

우리는 이 라이브러리들 하나하나가 무엇을 할 수 있는지, 그 라이브러리의 사용과 맞춤형이 얼마나 쉬운지, 그리고 개발자들 사이에서 얼마나 유행하는지 보게 될 것이다.
용법에 대한 상세한 정보에 관해서, 나는 모든 라이브러리에 코드 세션과 작업 예시를 제공했다.각 프레젠테이션 예제에는 비교할 때 공평하도록 동일한 데이터와 사례가 있습니다.
우리는 1월부터 6월까지의 판매 및 잠재 고객 데이터를 절선도와 막대도를 사용하여 가시화할 것이다.
아래 링크에서 모든 프레젠테이션 예시를 볼 수 있습니다.
React Tabs Tutorial: 3 Ways to Implement
전체 코드는 Demo Examples을 참조하십시오.다른 튜토리얼 데모를 포함하는 저장소를 복제할 수도 있습니다.만약 네가 그것이 유용하다고 생각한다면, 그것에 별표를 붙이는 것을 잊지 마라:D.
이제 아래의react 도표 라이브러리 7개를 살펴보겠습니다.

1. Recharts 회사

here on github

/ 레차트

React 및 D3를 사용하여 재정의된 차트 라이브러리

Rechart는 React에 사용되는 간단하고 간단하며 고도로 맞춤형 개원 도표 라이브러리입니다.js.그것은 접선도, 스트라이프도, 원환도, 떡도 등을 지원한다.
Rechart는github에 14k개가 넘는 별을 가지고 있으며, React와 D3 위에 구축된 가장 인기 있는 도표 라이브러리입니다.
Recharts 기록이 양호하여 구현이 쉽습니다.그것도 어떤 디자인 스타일에도 가장 작은 미리 디자인된 도표가 있다.

recharts 사용 방법

recharts를 사용하려면 React 프로젝트에 설치해야 합니다.

npm install recharts

설치 후, 다음 그림과 같이 Recharts 구성 요소를 사용하여 쉽게 도표를 만들 수 있습니다.

import React from 'react'
import { ResponsiveContainer, LineChart, Line, BarChart, Bar, CartesianGrid, XAxis, YAxis, Tooltip, Legend } from 'recharts';

const data = [
  { label: 'January', sales: 21, leads: 41 },
  { label: 'February', sales: 35, leads: 79 },
  { label: 'March', sales: 75, leads: 57 },
  { label: 'April', sales: 51, leads: 47 },
  { label: 'May', sales: 41, leads: 63 },
  { label: 'June', sales: 47, leads: 71 }
];

export default function Recharts() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Charts with recharts library</h2>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content">
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={data} margin={{ top: 15, right: 0, bottom: 15, left: 0 }}>
              <Tooltip />
              <XAxis dataKey="label" />
              <YAxis />
              <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
              <Legend/>
              <Line type="monotone" dataKey="sales" stroke="#FB8833" />
              <Line type="monotone" dataKey="leads" stroke="#17A8F5" />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content">
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={data} margin={{ top: 15, right: 0, bottom: 15, left: 0 }}>
              <XAxis dataKey="label" />
              <YAxis />
              <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
              <Tooltip />
              <Legend/>
              <Bar dataKey="sales" fill="#FB8833" />
              <Bar dataKey="leads" fill="#17A8F5" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

    </div>
  )
}

보시다시피 도표에 제공된 데이터 대상은 간단합니다(5-12줄).그것은 다른 도표 라이브러리처럼 옵션 대상과 혼합되지 않는다.이것은 Recharts를 더욱 쉽게 실현할 수 있게 한다.
recharts에서 대부분의 도표 요소 (예를 들어 그림, 격자, 도구 알림) 도 자신의 구성 요소가 있습니다.따라서 만약 우리가 그것들을 표시하고 싶다면, include-in-JSX 태그를 호출할 수 있습니다.
더 많은 Recharts 예시를 보려면 go recharts 을 보십시오.

2. React-chartjs-2(React의 Chart.js 패키지)

the official recharts examples page

/ 회사 명

도표를 반응 포장하다.회사 명

react-chartjs-2는 react-chartjs-2 의 포장기일 뿐, Chart.js은 Github에서 가장 유행하는 도표와 도형javascript 라이브러리로 50k여 개의 별이 있다.
도표js는 매우 좋은 라이브러리로 고도의 맞춤형 도표를 만들 수 있습니다.그것은 여러 종류의 도표와 많은 사용자 정의 옵션이 있다.그것은 접선도, 스트라이프도, 도넛튀김, 산란도, 레이더도 등을 지원한다.
react-chartjs-2를 사용하여 도표를 실현합니다.React의 js가 더 쉬워졌습니다.React-chartjs-2는 JSX에서 사용할 수 있는 기존 React 차트 구성 요소를 만듭니다.

도표를 어떻게 사용합니까?반응 중인 js

도표를 사용하다.js, 도표를 설치해야 합니다.js와react-chartjs-2는 다음과 같습니다.

npm install --save react-chartjs-2 chart.js

다음에 구현할 도표 구성 요소를 가져오고 사용할 수 있습니다.너는 아래의 코드를 볼 수 있다.

import React from 'react'
import { Line, Bar } from 'react-chartjs-2';

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June'],
  datasets: [
    {
      label: 'Sales',
      data: [21, 35, 75, 51, 41, 47],
      fill: false, // for Line chart
      backgroundColor: '#FB8833',
      borderColor: '#FB8833' // for Line chart
    },
    {
      label: 'Leads',
      data: [41, 79, 57, 47, 63, 71],
      fill: false, // for Line chart
      backgroundColor: '#17A8F5',
      borderColor: '#17A8F5' // for Line chart
    }
  ]
};

const options = {
  scales: {
      yAxes: [{
          ticks: {
              beginAtZero: true
          }
      }]
  }
}

export default function ReactChartjs2() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Chart.js charts wrapped with react-chartjs-2</h2>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content">
          <Line data={data} options={options}/>
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content">
          <Bar data={data} options={options}/>
        </div>
      </div>

    </div>
  )
}

도표를 달다.js, 도표에 제공된 데이터 대상은 fill, backgroundColor과 borderColor 등 사용자 정의 속성을 가지고 있다.
옵션 대상은 도표 레이아웃, 도례, 애니메이션 등 데이터와 무관한 모든 설정을 설정하는 데 사용됩니다.
도표를 사용하여 도표를 사용자 정의할 수 있는 옵션이 많다.js.너는 Chart.js official docs을 볼 수 있다.

3.Nivo

프로크 / 니보

nivo는 좋은 d3와Reactjs 라이브러리에 구축된 풍부한 데이터viz 구성 요소를 제공합니다

Nivo는 D3 위에 구축된 React의 또 다른 최상의 데이터 시각화 라이브러리입니다.그것은 very good documentation을 포함한 많은 데이터 시각화 구성 요소를 포함하여 고도의 맞춤형 구성을 가지고 있다.
이것은 접선도, 막대도, 기포도, 열도, 떡도, 레이더도 등을 지원하고 SVG, Canvas, HTTP API를 사용하여 그것들을 만드는 옵션을 제공한다.
Nivo는 서버 측의 렌더링 능력과 완전한 성명 도표도 제공합니다.

어떻게 니보를 사용합니까

Nivo는 모듈식입니다.따라서 프로젝트에 모든 패키지를 설치할 필요가 없습니다.yarn을 사용하여 추가할 구성 요소만 설치하십시오.모든 구성 요소 목록 here을 찾을 수 있습니다.

yarn add @nivo/bar @nivo/line

다음에 다음nivo 도표를 만들 수 있습니다.

import React from 'react'
import { ResponsiveLine } from '@nivo/line'
import { ResponsiveBar } from '@nivo/bar'

const data = [
  {
    id: 'sales',
    color: '#FB8833',
    data: [
      { x: "January", y: 21 },
      { x: "February", y: 35 },
      { x: "March", y: 75 },
      { x: "April", y: 51 },
      { x: "May", y: 41 },
      { x: "June", y: 47 }
    ]
  },
  {
    id: 'leads',
    color: '#17A8F5',
    data: [
      { x: "January", y: 41 },
      { x: "February", y: 79 },
      { x: "March", y: 57 },
      { x: "April", y: 47 },
      { x: "May", y: 63 },
      { x: "June", y: 71 }
    ]
  }
];

const databar = [
  { label: 'January', sales: 21, leads: 41 },
  { label: 'February', sales: 35, leads: 79 },
  { label: 'March', sales: 75, leads: 57 },
  { label: 'April', sales: 51, leads: 47 },
  { label: 'May', sales: 41, leads: 63 },
  { label: 'June', sales: 47, leads: 71 }
]

export default function Nivo() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Charts with nivo library</h2>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content" style={{height:'300px'}}>
          {/* 
          // make sure parent container have a defined height when using
          // responsive component, otherwise height will be 0 and
          // no chart will be rendered. */}
          <ResponsiveLine
            data={data}
            margin={{ top: 30, right: 60, bottom: 60, left: 30 }}
            axisBottom={{
              orient: 'bottom',
              tickSize: 5,
              tickPadding: 5,
              tickRotation: 0,
              legend: 'Month',
              legendOffset: 36,
              legendPosition: 'middle'
            }}
            colors={d => d.color}
            pointSize={7}
            pointBorderWidth={2}
            pointLabelYOffset={-12}
            useMesh={true}
            legends={[
              {
                anchor: 'bottom-right',
                direction: 'column',
                justify: false,
                translateX: 100,
                translateY: 0,
                itemsSpacing: 0,
                itemDirection: 'left-to-right',
                itemWidth: 80,
                itemHeight: 20,
                itemOpacity: 0.75,
                symbolSize: 12,
                symbolShape: 'circle',
                symbolBorderColor: 'rgba(0, 0, 0, .5)',
              }
            ]}
          />
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content" style={{height:'300px'}}>
          {/* 
          // make sure parent container have a defined height when using
          // responsive component, otherwise height will be 0 and
          // no chart will be rendered. */}
          <ResponsiveBar
            data={databar}
            keys={[ 'sales', 'leads' ]}
            indexBy="label"
            groupMode="grouped"
            margin={{ top: 30, right: 130, bottom: 50, left: 30 }}
            padding={0.3}
            colors={['#FB8833', '#17A8F5']}
            legends={[
              {
                dataFrom: 'keys',
                anchor: 'bottom-right',
                direction: 'column',
                justify: false,
                translateX: 120,
                translateY: 0,
                itemsSpacing: 2,
                itemWidth: 100,
                itemHeight: 20,
                itemDirection: 'left-to-right',
                itemOpacity: 0.85,
                symbolSize: 20,
              }
            ]}
            animate={true}
          />
        </div>
      </div>

    </div>
  )
}

각 차트 유형마다 데이터 객체와 옵션이 다릅니다.Nivo 구성 요소에는 많은 맞춤형 도구가 있습니다.
언뜻 보니 이것은 매우 무서운 것 같다.그러나 Nivo 모듈식 및 매우 좋은 문서가 있으므로 이 모든 옵션에 대해 걱정할 필요가 없습니다.

4. Hightcharts react(react의 Highcharts 패키지)

높은 그림 / 고도표 반응

공식 Highcharts 지원 React 패키지

Highchart는 Github에 9k 이상의 별표를 표시하는 데 사용되는 유행하는javascript 라이브러리입니다.React에서 실현하기 편리하도록 개발자는 highcharts React를 highcharts의 React 포장으로 만듭니다.
Highcharts는 각종 접선도, 시간 서열, 면적도, 기둥/스트라이프도, 케이크도, 산점도, 기포도 등을 지원한다.당신은 완전한 demo here을 볼 수 있습니다.

하이차트를 사용하는 방법

highcharts를 사용하려면 우선, npm를 사용하여react 프로젝트에 highcharts와highchartsreactofficial을 패키지로 설치해야 합니다.

npm install highcharts highcharts-react-official

그 다음에 다음과 같은 방식으로 도표를 만들 수 있습니다.

import React from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

const LineChartOptions = {
  title: {
    text: 'Line chart'
  },
  xAxis: {
    categories: ['January', 'February', 'March', 'April', 'May', 'June']
  },
  colors: ['#FB8833', '#17A8F5'],
  series: [
    {
      name: 'Sales',
      data: [21, 35, 75, 51, 41, 47]
    },
    {
      name: 'Leads',
      data: [41, 79, 57, 47, 63, 71]
    }
  ],
  credits: {
    enabled: false
  }
}

const BarChartOptions = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Bar Chart'
  },
  xAxis: {
    categories: ['January', 'February', 'March', 'April', 'May', 'June']
  },
  colors: ['#FB8833', '#17A8F5'],
  series: [
    {
      name: 'Sales',
      data: [21, 35, 75, 51, 41, 47]
    },
    {
      name: 'Leads',
      data: [41, 79, 57, 47, 63, 71]
    }
  ],
  credits: {
    enabled: false
  }
}

export default function HighchartsReactWrapper() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Hightcharts charts with highcharts-react</h2>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content">
          <HighchartsReact
            highcharts={Highcharts}
            options={LineChartOptions}
          />
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content">
          <HighchartsReact
            highcharts={Highcharts}
            options={BarChartOptions}
          />
        </div>
      </div>

    </div>
  )
}

보시다시피, 모든 도표 구성 요소에 혼합 데이터와 옵션 대상을 만들어야 합니다.데이터 대상의 구조는 가독성이 매우 강하다.
사용자 정의를 추가하려면 the official documentation 을 보고 더 많은 옵션을 추가할 수 있습니다.

5.React apexcharts(React의 apexcharts 패키지)

아페크스하트 / 반응apexcharts

📊 APEXCHART의 React 구성 요소

도표를 좋아해요.Apexcharts도 유행하는javascript 도표 라이브러리로 포장기를 통해 실현할 수 있다.Apexcharts는 선, 줄/열, 면적, 시간선, 혼합, 촛대 등을 지원합니다.
다른 6개 도표 라이브러리 중 Apexcharts는 기능이 가장 풍부하고 디자인이 가장 정교한 도표 라이브러리이다.최소 옵션을 사용하면 SVG, PNG 및 CSV 형식의 차트를 확대/축소 기능, 영역 선택 및 가져올 수 있습니다.
하지만 대가가 있다.다른 차트 라이브러리에 비해 Apexcharts의 차트 렌더링 속도가 느립니다.

apexcharts 사용 방법

Apexcharts를 사용하려면 먼저 React 프로젝트와 패키지에 설치해야 합니다.

npm install react-apexcharts apexcharts

그리고 다음 방법으로 도표 구성 요소를 만들 수 있습니다.

import React from 'react'
import Chart from 'react-apexcharts'

const options = {
  chart: {
    id: 'apexchart-example'
  },
  xaxis: {
    categories: ['January', 'February', 'March', 'April', 'May', 'June']
  },
  colors: ['#FB8833', '#17A8F5']
}

const series = [
  {
    name: 'Sales',
    data: [21, 35, 75, 51, 41, 47]
  },
  {
    name: 'Leads',
    data: [41, 79, 57, 47, 63, 71]
  }
]

export default function ReactApexcharts() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Apexcharts.js charts wrapped with react-apexcharts</h2>
      </div>      

      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content">
          <Chart options={options} series={series} type="line"/>
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content">
          <Chart options={options} series={series} type="bar" />
        </div>
      </div>

    </div>
  )
}

도표 구성 요소만 가져오고 JSX에서 호출하는 도구를 사용하십시오.
데이터와 옵션 대상은 하이차트와 유사합니다.사용자 정의에 대한 자세한 내용은 the official documentation으로 이동하십시오.

6.vis 반응

우량 / 반응

데이터 시각화 구성 요소

Reactvis는 React 구성 요소의 집합으로 흔히 볼 수 있는 데이터 시각화 도표를 보여 줍니다.
그것은 선/면적/줄무늬도, 열도, 산점도, 등 고선도, 육각형 열도, 떡도와 도넛도, 태양폭발도, 레이더도, 평행좌표와 나무모양도를 지원한다.
만약 당신이 자신이 설계한 도표를 만들고 싶다면, React vis는 매우 좋다.

React vis 사용 방법

react-vis를 사용하려면,react 프로젝트에 설치해야 합니다.

npm install react-vis --save

설치 후, 당신은 다음과 같은 방식으로 도표를 만들 수 있습니다.

import React from 'react'
import '../../../../node_modules/react-vis/dist/style.css';
import { XYPlot, XAxis, YAxis, HorizontalGridLines, VerticalGridLines, LineMarkSeries, VerticalBarSeries } from 'react-vis';

const data = {
  sales : [
    { x: "January", y: 21 },
    { x: "February", y: 35 },
    { x: "March", y: 75 },
    { x: "April", y: 51 },
    { x: "May", y: 41 },
    { x: "June", y: 47 }
  ],
  leads : [
    { x: "January", y: 41 },
    { x: "February", y: 79 },
    { x: "March", y: 57 },
    { x: "April", y: 47 },
    { x: "May", y: 63 },
    { x: "June", y: 71 }
  ]
}

export default function ReactVis() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Charts with react-vis library</h2>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content">
          <XYPlot 
            xType="ordinal"
            width={500}
            height={300}>
            <XAxis />
            <YAxis />
            <VerticalGridLines />
            <HorizontalGridLines />
            <LineMarkSeries
              data={data.sales}
              color="#FB8833"
              />
            <LineMarkSeries
              data={data.leads}
              color="#17A8F5"
              />
          </XYPlot>
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content">
          <XYPlot 
            xType="ordinal"
            width={500}
            height={300}>
            <XAxis />
            <YAxis />
            <VerticalGridLines />
            <HorizontalGridLines />
            <VerticalBarSeries
              data={data.sales}
              color="#FB8833"
              />
            <VerticalBarSeries
              data={data.leads}
              color="#17A8F5"
              />
          </XYPlot>
        </div>
      </div>

    </div>
  )
}

보시다시피reactvis를 사용하여 도표를 만드는 것은 매우 간단합니다.도표를 위한 데이터도 간단하다.
rechart와 유사하게react-vis도 비교적 작은 도표 요소 집합이 있는데 예를 들어 격자, 직선, XAxis, YAxis 등은 JSX 표기에 사용할 수 있다.
도표 스타일/디자인에 대해서는reactvis css 파일을 수동으로 가져와야 합니다.도표 구성 요소를 사용자 정의하기 위해 자신의 스타일을 추가할 수도 있습니다.

7. 승리

성형 쌍기균 / 승리

대화형 데이터 시각화를 위한 조합 가능한 React 구성 요소 집합

Victory는 React 및 React Native에 사용되는 모듈식 차트 구성 요소입니다.그것은 유연성을 희생하지 않고 쉽게 시작할 수 있다.
Victory는 직선, 스트라이프, 면적도, 케이크, 촛대도, 산점도 등 각종 도표 구성 요소를 지원합니다.

victory 사용 방법

victory를 사용하려면 먼저 React 프로젝트에 설치해야 합니다.

npm i --save victory

설치 후, 당신은 다음과 같은 방식으로 승리 도표를 만들 수 있습니다.

import React from 'react'
import { VictoryChart, VictoryLine, VictoryBar } from 'victory';

const sales = {
  style: {
    data: { 
      stroke: "#FB8833", // for Line chart
    },
    parent: { border: "1px solid #ccc"}
  },
  style2: {
    data: { 
      fill: "#FB8833" // for Bar chart
    },
    parent: { border: "1px solid #ccc"}
  },
  data: [
    { x: "January", y: 21 },
    { x: "February", y: 35 },
    { x: "March", y: 75 },
    { x: "April", y: 51 },
    { x: "May", y: 41 },
    { x: "June", y: 47 }
  ]
};

const leads = {
  style: {
    data: { 
      stroke: "#17A8F5", // for Line chart
    },
    parent: { border: "1px solid #ccc"}
  },
  style2: {
    data: { 
      fill: "#17A8F5" // for Bar chart
    },
    parent: { border: "1px solid #ccc"}
  },
  data: [
    { x: "January", y: 41 },
    { x: "February", y: 79 },
    { x: "March", y: 57 },
    { x: "April", y: 47 },
    { x: "May", y: 63 },
    { x: "June", y: 71 }
  ]
};


export default function Victory() {
  return (
    <div className="row">
      <div className="col-md-12">
        <h2>Charts with victory library</h2>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Line Chart</h3>
        <div className="section-content">
          <VictoryChart padding={30}>
            <VictoryLine
              style={sales.style}
              data={sales.data}
            />
            <VictoryLine
              style={leads.style}
              data={leads.data}
            />
          </VictoryChart>
        </div>
      </div>

      <div className="section col-md-6">
        <h3 className="section-title">Bar Chart</h3>
        <div className="section-content">
          <VictoryChart padding={30}>
            <VictoryBar
              style={leads.style2}
              data={leads.data}
            />
            <VictoryBar 
              style={sales.style2}
              data={sales.data}
            />
          </VictoryChart>
        </div>
      </div>

    </div>
  )
}

victory로 도표 구성 요소를 초기화하는 것은 간단합니다.그러나 예시, 도구 설명 등 미리 정의된 도표 요소가 없습니다.
따라서 이 요소를 도표에 추가하려면 수동으로 이 요소를 추가하고 설계해야 합니다.너는 the official documentation을 볼 수 있다.

결론

상기 7개 라이브러리 중 완전한 기능과 사용하기 쉬운 도표를 원한다면 5개 라이브러리를 추천합니다.단, 매우 맞춤형 도표를 만들고 자체적으로 설계하려면 마지막 두 개의 라이브러리를 시도해 보십시오.
이 글을 다 읽은 후에, 나는 당신들이 지금 어떤 도표 라이브러리가 당신들의 React 프로젝트에 가장 적합한지 선택하고 결정할 수 있기를 바랍니다.
만약 이 글이 매우 유용하다고 생각한다면, 언제든지 개발자 친구와 공유하세요.만약 당신에게 어떤 문제나 건의가 있다면, 아래의 평론 부분에서 저에게 알려주세요!
즐거운 인코딩!