ApexChart를 사용한 데이터 시각화

ApexCharts는 개발자가 간단한 API로 웹 페이지를위한 아름답고 대화 형 시각화를 만들 수 있으며, Reach-Apexcharts는 Apexchart의 ApexCharts를 사용하여 응용 프로그램에서 ApexCharts를 사용할 수 있도록하는 데 도움이되는 현대적인 차트화 라이브러리입니다. 이 기사는 고객에게 복잡한 그래픽 데이터를 표시 해야하는 사람들에게 유익합니다.

시작하기

먼저 React-ApexCharts 구성 요소를 React Application에 설치하고 React- react-apexcharts 를 가져 오십시오.

 npm i react-apexcharts apexcharts import ReactApexCharts from 'react-apexcharts'

ApexChart의 핵심 구성 요소는 구성 개체입니다. 구성 객체에서는 차트의 series 및 options 속성을 정의합니다. series 는 차트에서 시각화하려는 데이터입니다. 시리즈에서는 데이터와 데이터 이름을 정의합니다. 데이터 배열의 값은 차트의 y축에 표시됩니다. 차트 위로 마우스를 가져가면 데이터 이름이 나타납니다. 단일 또는 다중 데이터 시리즈를 가질 수 있습니다. options 에서 차트가 어떻게 보이길 원하는지, 차트에 추가할 기능과 도구, 차트의 x 및 y 축 레이블을 정의합니다. 구성 개체의 series 및 options 속성에서 정의한 데이터는 각각 ReactApexChart 구성 요소의 series 및 options 소품에 전달하는 데이터입니다.

다음은 ApexChart의 구성 요소가 함께 작동하는 방식에 대한 샘플입니다. (이 기사의 뒷부분에서 자세히 살펴보겠습니다.)

 const config = { series: [1, 2, 3, 4, 5], options: { chart: { toolbar: { show: true }, } } } return ( <ReactApexChart options={config.options} series={config.series} type="polarArea" /> )

문서를 살펴보면 너비, 높이 및 차트 유형이 아래 코드 조각과 같이 options 개체에 정의되어 있음을 알 수 있습니다.

 const config = { series: [44, 55, 13, 43, 22], chart: { width: 380, type: 'pie' } },

이는 문서가 바닐라 자바 ​​스크립트 응용 프로그램을 염두에두고 작성 되었기 때문입니다. React로 작업하고 있으므로 ReactApexCharts 구성 요소에 소품으로 전달하여 너비, 높이 및 유형을 정의합니다. 이것이 어떻게 작동하는지 다음 섹션에서 살펴보겠습니다.

라인 차트

시간이 지남에 따라 변하는 정보를 표시하는 데 사용되는 차트 유형입니다. 우리는 직선으로 연결된 여러 점을 사용하여 선을 그립니다. 꺾은선형 차트를 사용하여 시간이 지남에 따라 데이터가 어떻게 변하는지 시각화합니다. 예를 들어, 금융 애플리케이션에서 이를 사용하여 일정 기간 동안 구매가 어떻게 증가했는지 사용자에게 보여줄 수 있습니다.

이 차트는 다음 구성 요소로 구성됩니다.

• 제목
  이는 차트 상단에 있으며 차트가 나타내는 데이터에 대해 사용자에게 알려줍니다.
• 도구 모음
  도구 모음은 위 이미지의 오른쪽 모서리에 있습니다. 차트의 확대/축소 수준을 제어합니다. 도구 모음을 통해 문자를 내보낼 수도 있습니다.
• 축 레이블
  왼쪽과 오른쪽 축에는 각 축에 대한 레이블이 있습니다.
  
• 데이터 레이블
  데이터 레이블은 선의 각 플롯 포인트에서 볼 수 있습니다. 차트에서 데이터를 더 쉽게 볼 수 있습니다.

꺾은선형 차트의 모양과 다양한 구성 요소를 살펴보았습니다. 이제 하나를 만드는 단계를 살펴보겠습니다.

우리는 series 로 시작합니다. 여기에서 시리즈의 데이터와 이름을 정의합니다. 그런 다음 options 과 series 를 ReactApexChart 구성 요소의 소품에 전달합니다. 또한 type prop에서 차트 유형을 정의하고 line 으로 설정합니다.

 const config = { series: [{ name: "Performance", data: [10, 21, 35, 41, 59, 62, 79, 81, 98] }], options: {} } return ( <ReactApexChart options={config.options} series={config.series} type="line" /> )

ApexChart의 중요한 부분은 series 데이터입니다. options 속성에 정의된 구성은 선택 사항입니다. options 에서 정의를 설정하지 않으면 데이터가 계속 표시됩니다. 그러나 가장 읽기 쉬운 차트는 아닐 수 있습니다. options 에서 사용자 정의 정의를 설정하지 않기로 결정한 경우 여전히 빈 오브젝트로 존재해야합니다.

config 개체에 있는 options 개체에 몇 가지 값을 추가하여 차트의 옵션을 구성해 보겠습니다.

options 개체의 chart 속성에서 차트의 구성을 정의합니다. 여기에서 show 속성을 true 로 설정하여 차트에서 도구 모음을 추가합니다. 도구 모음은 차트의 확대/축소 수준을 제어하고 차트를 다른 파일 형식으로 내보낼 수 있는 도구를 제공합니다. 도구 모음은 기본적으로 표시됩니다.

 options: { chart: { toolbar: { show: true }, }, }

차트의 데이터 레이블을 활성화하여 차트를 읽기 쉽게 만들 수 있습니다. 이를 수행하려면 dataLabels 속성을 options 개체에 추가하고 enabled 속성이 true 로 설정됩니다. 이렇게 하면 차트의 데이터를 더 쉽게 해석할 수 있습니다.

 dataLabels: { enabled: true },

기본적으로 꺾은선형 차트의 획은 직선입니다. 그러나 우리는 그것을 곡선으로 만들 수 있습니다. stroke 속성을 options 에 추가하고 curve 을 smooth 설정합니다.

 stroke: { curve: "smooth" }

모든 차트의 중요한 부분은 제목입니다. 차트 제목을 지정하기 위해 options 에 title 속성을 추가합니다.

 title: { text: 'A Line Chart', align: 'left' },

차트의 x 및 y 축에 레이블을 추가할 수 있습니다. 이렇게하려면 yaxis xaxis 을 options 과 거기에 추가하면 각 축의 title 을 정의합니다.

 xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], title: { text: 'Month' } }, yaxis: { title: { text: 'Performance' } }

결국 코드는 다음과 같아야 합니다. 이러한 단계를 통해 꺾은선형 차트를 구축했을 뿐만 아니라 정의한 options 이 차트를 향상시킬 수 있는 방법에 대한 분석도 보았습니다.

 import ReactApexCharts from 'react-ApexCharts' const config = { series: [{ name: "Performance", data: [10, 21, 35, 41, 59, 62, 79, 81, 98] }], options: { chart: { toolbar: { show: true }, }, dataLabels: { enabled: true }, stroke: { curve: "smooth" } title: { text: 'A Line Chart', align: 'left' }, xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], title: { text: 'Month' } }, yaxis: { title: { text: 'Performance' } } } } return ( <ReactApexChart options={config.options} series={config.series} type="line" /> )

영역 차트

영역 차트는 데이터 값이 차트에 그려지고 선 세그먼트를 사용하여 연결되는 방식의 꺾은선형 차트와 같습니다. 유일한 차이점은 영역 차트에서 데이터 요소로 표시된 영역이 음영 또는 색상으로 채워진다는 것입니다. 꺾은선형 차트와 마찬가지로 영역형 차트는 시간 경과에 따라 데이터가 어떻게 변하는지 보여줍니다. 그러나 꺾은선형 차트와 달리 볼륨을 시각적으로 나타낼 수도 있습니다. 일련의 데이터에서 그룹이 어떻게 교차하는지 표시하는 데 사용할 수 있습니다. 예를 들어, 다양한 브라우저를 통해 애플리케이션에 액세스하는 사용자 수를 보여주는 차트가 있습니다.

위 이미지에는 영역 차트의 예가 있습니다. 꺾은선형 차트와 마찬가지로 제목, 데이터 레이블 및 축 레이블이 있습니다. 표시된 영역 차트의 음영 처리된 부분은 데이터의 볼륨을 보여줍니다. 또한 series1 의 데이터가 series2 의 데이터와 어떻게 교차하는지 보여줍니다. 영역 차트의 또 다른 사용 사례는 둘 이상의 데이터 조각 간의 관계와 교차 방식을 보여주는 것입니다.

누적 영역 차트를 작성하는 방법과 데이터 레이블을 추가하는 방법을 살펴보겠습니다.

영역 차트를 만들려면 차트 유형을 area 과 획으로 smooth 설정합니다. 이것은 영역 차트의 기본 획입니다.

 const config = { options: { stroke: { curve: 'smooth' } } } return ( <ReactApexChart options={config.options} series={config.series} type="area" /> )

쌓인 차트를 사용하려면 options 개체의 chart 속성에서 우리는 true 로 stacked 을 설정합니다.

 const config = { options: { stroke: { curve: 'smooth' }, chart: { stacked: true } } return ( <ReactApexChart options={config.options} series={config.series} type="area" /> )

막대 차트

막대 차트를 사용하여 나타내는 값에 비례하는 높이 또는 길이의 직사각형 막대로 데이터를 표시합니다. 사람들이 가지고 있는 자동차 유형이나 매장의 고객 수와 같은 다양한 카테고리를 비교하는 데 가장 적합합니다.

가로 막대는 막대 차트의 주요 구성 요소입니다. 그들은 우리가 쉽게 다른 범주의 값을 쉽게 비교할 수 있습니다.

막대 차트를 작성할 때 차트의 계열 데이터를 정의하고 ReactApexChart 구성 요소의 type 을 bar 로 설정하는 것으로 시작합니다.

 const config = { series: [{ data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380] }], options: {} } return ( <ReactApexChart options={config.options} series={config.series} type="bar" /> )

막대에 더 많은 생명과 구별을 추가합시다. 기본적으로 막대 차트는 세로입니다. 수평으로 만들려면 술집이 plotOptions 속성을 보려는 방법을 정의합니다. horizontal 소품을 true 로 설정하여 막대를 가로로 만듭니다. dataLabels 의 위치를 bottom 으로 설정했습니다. top 또는 center 로 설정할 수도 있습니다. distributed 소품은 막대에 구별을 더해줍니다. 이것이 없으면 막대에 뚜렷한 색상이 적용되지 않으며 차트 하단에 범례가 표시되지 않습니다. 또한 startingShape 및 endingShape 속성을 사용하여 막대의 모양을 정의합니다.

 options{ plotOptions: { bar: { distributed: true, horizontal: true, startingShape: "flat", endingShape: "rounded", dataLabels: { position: 'bottom', }, } }, }

다음으로 범주, 레이블 및 제목을 차트에 추가합니다.

 xaxis: { categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'India'] }, title: { text: 'A bar Chart', align: 'center', },

기둥형 차트

세로 막대형 차트는 각 범주가 표시된 값에 비례하는 직사각형 높이와 함께 각 범주가 직사각형으로 표시되는 데이터 시각화입니다. 막대 차트와 마찬가지로 세로 막대형 차트는 다양한 데이터 범주를 비교하는 데 사용됩니다. 세로 막대형 차트는 세로 막대형 차트라고도 합니다. 위의 막대 차트를 세로 막대형 차트로 변환하려면 plotOptions 에서 horizontal 을 false 로 설정하기만 하면 됩니다.

세로 열을 사용하면 시각화한 데이터를 쉽게 해석할 수 있습니다. 또한 각 열의 상단에 추가 된 데이터 레이블은 차트의 가독성을 증가시킵니다.

기본 열 차트를 작성하고 쌓은 열 차트로 변환하는 방법을 살펴 보겠습니다.

항상 그렇듯이 series 데이터로 시작하고 차트 type 을 "막대"로 설정합니다.

 const config = { series: [{ name: 'Net Profit', data: [44, 55, 57, 56, 61, 58, 63, 60, 66] }, { name: 'Revenue', data: [76, 85, 101, 98, 87, 105, 91, 114, 94] }, { name: 'Free Cash Flow', data: [35, 41, 36, 26, 45, 48, 52, 53, 41] }], options: {} } return ( <ReactApexChart options={config.options} series={config.series} type="bar" /> )

이것은 우리가 상자에서 얻은 것입니다. 그러나 사용자 정의할 수 있습니다. plotOptions 속성에서 막대의 너비와 모양을 정의합니다. 또한 dataLabel 의 위치를 top 으로 설정합니다.

 options: { plotOptions: { bar: { columnWidth: '75%', endingShape: 'flat', dataLabels: { position: "top" }, }, }, }

그런 다음 데이터 레이블의 스타일과 글꼴 크기와 그래프와의 거리를 정의합니다. 마지막으로 x 및 y 축에 대한 레이블을 추가합니다.

 options: { dataLabels: { offsetY: -25, style: { fontSize: '12px', colors: ["#304758"] } }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], }, yaxis: { title: { text: '$ (thousands)' } }, }

이것을 누적 차트로 변환하려면 chart 에 stacked 속성을 추가하고 true 로 설정하기만 하면 됩니다. 또한 누적 차트로 전환 endingShape 막대의 끝 모양을 flat 으로 변경하여 곡선을 제거합니다.

 options: { chart: { stacked: true, }, plotOptions: { bar: { endingShape: 'flat', } } }

파이와 도넛 차트

원형 차트는 개별 범주를 전체의 조각 또는 백분율로 표시하는 원형 그래프입니다. 도넛형 차트는 중앙에 구멍이 있는 원형 차트의 변형이며 범주를 슬라이스가 아닌 호로 표시합니다. 둘 다 부분 대 전체 관계를 한 눈에 파악하기 쉽게 만듭니다. 원형 차트 및 도넛 차트는 일반적으로 선거 및 센서스 결과, 제품 또는 부서의 수익, 데이터 재활용, 설문 조사 응답, 예산 고장, 교육 통계, 지출 계획 또는 인구 분할을 위해 일반적으로 사용됩니다.

원형 및 도넛형 차트에서 series 은 백분율로 계산됩니다. 이것은 series 값의 합이 100이어야 함을 의미합니다.

먼저 원형 차트를 작성해 보겠습니다. 차트 type 을 pie 로 설정했습니다. 또한 차트의 series 을 정의하고 options 에서 레이블을 정의합니다. 레이블의 순서는 series 배열의 값과 일치합니다.

 const config = { series: [20, 10, 35, 12, 23], options: { labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'], } } return ( <ReactApexChart options={config.options} series={config.series} type="pie" /> )

차트의 반응 특성을 제어할 수 있습니다. 이를 위해 차트의 options 에 responsive 속성을 추가합니다. 여기에서 max-width 중단점을 480px 로 설정합니다. 그런 다음 차트의 width 를 450px 로 설정하고 범례의 position 를 bottom 으로 설정합니다. 이제는 480px 이하의 화면 크기에서 범례가 차트 하단에 나타납니다.

 options: { labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'], responsive: [{ breakpoint: 480, options: { chart: { width: 450 }, legend: { position: 'bottom' } } }] },

원형 차트를 도넛 형 차트로 변환하려면 구성 요소 type 을 donut 형으로 변경하는 것입니다.

 <ReactApexChart options={config.options} series={config.series} type="donut" />

혼합 차트

혼합 차트를 사용하면 둘 이상의 차트 유형을 단일 차트로 결합할 수 있습니다. 데이터의 숫자가 데이터 계열에서 데이터 계열에 따라 크게 다르거나 데이터 유형(예: 가격 및 볼륨)이 혼합된 경우 혼합 차트를 사용할 수 있습니다. 혼합 된 차트를 사용하면 다른 데이터 유형을 동일한 형식으로 쉽게 시각적으로 시각적으로 시각적으로 시각적으로 시각적으로 설정할 수 있습니다.

꺾은선형, 영역형, 세로 막대형 차트를 조합하여 만들어 보겠습니다.

각 차트의 series 데이터와 type 을 정의합니다. 혼합 차트의 경우 각 차트의 유형은 ReactApexChart 구성 요소의 type 속성이 아니라 series 에 정의됩니다.

 const config = { series: [{ name: 'TEAM A', type: 'column', data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30] }, { name: 'TEAM B', type: 'area', data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43] }, { name: 'TEAM C', type: 'line', data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39] }], options: {} }

다음으로 획 유형을 smooth 설정하고 너비를 정의합니다. 각 차트의 너비를 정의하기 위해 값 배열을 전달합니다. 배열의 값은 series 로 정의 된 차트의 순서와 일치합니다. 또한 각 차트 채우기의 불투명도를 정의합니다. 이를 위해 배열도 전달합니다. 이런 식으로 각 차트의 불투명도를 개별적으로 제어할 수 있습니다.

마지막으로 x 및 y 축에 대한 레이블을 추가합니다.

 options: { stroke: { width: [2,2,4], curve: 'smooth' }, fill: { opacity: [0.7, 0.3, 1], }, labels: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov'], yaxis: { title: { text: 'Points', }, }, }

차트 사용자 정의

차트의 색상을 변경하는 것 외에도 우리는 사용자 정의 수준을 추가 할 수 있습니다.

차트에 그리드를 추가하고 스타일을 지정할 수 있습니다. grid 속성에서는 차트의 행과 열의 색상을 정의합니다. 차트에 그리드를 추가하면 더 쉽게 이해할 수 있습니다.

 options: { grid: { row: { colors: ['#f3f3', 'transparent'], opacity: 0.5 }, column: { colors: ['#dddddd', 'transparent'], opacity: 0.5 }, }, }

차트의 획을 조정하고 색상을 정의할 수 있습니다. 세로 막대형 차트로 이를 수행해 보겠습니다. colors 배열의 각 색은 series 배열의 데이터에 해당합니다.

 options: { stroke: { show: true, width: 4, colors: ['red', "blue", "green" ] }, }

결론

ApexCharts가 제공하는 일부 차트 유형을 살펴보고 한 차트 유형에서 다른 차트 유형으로 전환하는 방법을 배웠습니다. 또한 차트의 모양을 사용자 정의하는 몇 가지 방법을 보았습니다. 아직도 발견 할 수있는 많은 것들이 있으므로 ePexcharts 문서를 즉시 다이빙합니다.