React Google 차트 사용

재무 추적 응용 프로그램에서 작업하는 동안 모든 데이터를 표시할 방법이 필요하다는 것을 깨달았습니다. 그래서 차트 라이브러리에 대한 검색을 시작했습니다. 몇 가지를 시도한 후 200달러가 넘는 라이브러리를 발견했습니다. 나는 마침내 React Google Charts을 사용하기로 결정했습니다.

확실히 다른 많은 라이브러리만큼 강력하거나 화려하지는 않지만 다른 라이브러리에는 없는 한 가지가 있었습니다. 그것은 무료였고 실제로 그것을 사용하는 방법을 알아낼 수 있었습니다.

위의 링크를 클릭하면 공식 웹사이트로 이동합니다. 여기에는 많은 예제, 시작하기 위한 빠른 가이드, 더 많은 예제, 구성 요소 소품에 대한 정보 및 많은 예제가 있습니다.

당신이 나와 같은 사람이라면 예제를 좋아할 것입니다. 실제로 어떻게 작동하는지 배우는 대신 충분히 가까운 이미 존재하는 것을 복사하고 원하는 대로 조정할 수 있기 때문입니다. 어떤 것이 어떻게 작동하는지 알지 못함).


(이것Gradient Generator에 큰 박수를 보냅니다. 색상 그라디언트, 색상 구성표 및 모든 색상 요구사항을 생성하는 데 매우 유용합니다.)

<Chart
          chartType="PieChart"
          width="100%"
          height="400px"
          data={budgetPieData}
          options={{
            pieSliceText: "none",
            pieHole: 0.6,
            backgroundColor: "none",
            colors: [
              "#26cd4d",
              "#00c065",
              "#00b377",
              "#00a483",
              "#00958a",
              "#00858b",
              "#007685",
              "#00667b",
              "#0f576b",
              "#2a4858",
              "#28687d",
              "#168ba0",
              "#00b0be",
              "#00d6d6",
              "#05fce8",
              "#00fed9",
              "#00ffc6",
              "#00ffb0",
              "#00ff96",
              "#00ff78",
            ],
          }}
        />

확실히 기능적이고 상당한 양의 사용자 정의 기능을 제공하지만 더 복잡한 요구 사항을 처리하는 것이 점점 더 어려워진다는 것을 알았습니다(누적 세로 막대형 차트의 데이터 형식을 지정하는 것은 약간 악몽입니다). 전반적으로 충분히 잘 작동했습니다.

React Google Charts를 사용해 보셨습니까? 더 나은 것을 알고 있습니까? 나는 그것에 대해 듣고 싶습니다. 하지만 그 동안 행운을 빌며 코딩을 해보세요!