Home-theater-designers
차트는 사용자에게 데이터를 시각화하는 편리하고 매력적인 방법을 제공합니다. 데이터를 이해하기 쉽게 만들고 앱을 더 대화형으로 만들 수 있습니다.
기본 CSS 또는 React-Vis 또는 React Google Charts와 같은 라이브러리를 사용하는 것을 포함하여 React에서 차트를 만드는 방법에는 여러 가지가 있습니다.
CSS를 사용하여 React에서 차트를 만드는 방법
기본 CSS를 사용하여 React에서 차트를 만드는 것은 비교적 쉽습니다. 너비와 높이가 있는 div 요소를 만든 다음 배경색을 원하는 차트 색상으로 설정하기만 하면 됩니다. 예를 들어:
iTunes 백업 위치를 변경하는 방법오늘의 메이크업 비디오
import React from 'react';
const Chart = () => {
return (
<div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}/>
);
}
export default Chart;위의 코드에서는 React 라이브러리를 가져왔습니다. 그런 다음 너비가 100px, 높이가 300px, 배경색이 #5D6AFF인 div를 반환하는 Chart라는 함수를 만들었습니다. 파란색 배경의 기본 차트가 생성됩니다. 당신은 또한 수 재료 UI 사용 또는 React 앱의 Tailwind CSS 차트를 생성합니다.
div 안에 텍스트나 이미지가 포함된 여러 차트를 만들어 더 복잡한 차트를 만들 수도 있습니다.
import React from 'react';
const Chart = () => {
return (
<div>
<div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}>
<p>Chart 1</p>
</div>
<div style={{width: '100px', height: '300px', backgroundColor: '#FFCF00'}}>
<img src="https://dummyimage.com/40x80/000/0011ff" style={{padding:'100px 30px'}} />
</div>
</div>
);
}
export default Chart; 
React-Vis 라이브러리를 사용한 React 차트
React-Vis는 Uber에서 만든 라이브러리로 React에서 차트와 그래프를 만들 수 있습니다. 다양한 모양, 색상 및 크기로 차트를 쉽게 만들 수 있는 구성 요소 집합을 제공합니다. 또한 차트를 더욱 매력적으로 만드는 데 도움이 되는 애니메이션 및 상호 작용을 지원합니다.
React-Vis를 사용하려면 먼저 기본 React 앱 만들기 그리고 라이브러리를 설치합니다. 다음 명령으로 이 작업을 수행할 수 있습니다.
npm install react-vis라이브러리를 설치하면 다음 코드를 사용하여 기본 차트를 만들 수 있습니다.
import React, { useState } from 'react';
import {
XYPlot,
LineSeries,
VerticalGridLines,
HorizontalGridLines,
XAxis,
YAxis
} from 'react-vis';
const Chart = () => {
const [data] = useState([
{ x: 0, y: 8 },
{ x: 1, y: 5 },
{ x: 2, y: 4 },
{ x: 3, y: 9 },
{ x: 4, y: 1 },
{ x: 5, y: 7 },
{ x: 6, y: 6 },
{ x: 7, y: 3 },
{ x: 8, y: 2 },
{ x: 9, y: 0 }
]);
return (
<XYPlot width={300} height={300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<LineSeries data={data} />
</XYPlot>
);
}
export default Chart;위의 코드는 React 및 React-Vis 라이브러리를 가져옵니다. 그런 다음 VerticalGridLines, HorizontalGridLines, XAxis, YAxis 및 LineSeries가 있는 XYPlot을 반환하는 Chart라는 함수를 정의합니다. LineSeries는 선을 구성하는 점의 x 및 y 좌표를 포함하는 데이터 배열을 사용합니다.
React Google 차트 라이브러리 사용
React Google Charts는 React에서 차트를 쉽게 만들 수 있는 또 다른 라이브러리입니다. 막대 차트, 원형 차트 및 선 그래프와 같은 다양한 유형의 차트를 만들기 위한 구성 요소 집합을 제공합니다. 또한 차트를 더욱 매력적으로 만드는 데 도움이 되는 애니메이션 및 상호 작용을 지원합니다.
React Google Charts를 사용하려면 먼저 라이브러리를 설치해야 합니다. 다음 명령으로 이 작업을 수행할 수 있습니다.
Snapchat 다크 모드 아이폰을 얻는 방법
npm install react-google-charts라이브러리를 설치하면 다음 코드를 사용하여 기본 차트를 만들 수 있습니다.
import React, { useState } from 'react';
import { Chart } from 'react-google-charts';
const MyChart = () => {
const [data] = useState([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
return (
<Chart
width={'400px'}
height={'300px'}
chartType="Bar"
data={data}
/>
);
}
export default MyChart;이 코드는 react 및 react-google-charts 라이브러리를 가져옵니다. 그런 다음 차트 구성 요소를 반환하는 MyChart라는 함수를 만듭니다. 차트 구성 요소는 차트를 구성하는 포인트의 레이블과 값이 포함된 데이터 배열을 사용합니다.
CSS 사용의 단점
CSS를 사용하여 React에서 차트를 만드는 데는 몇 가지 단점이 있습니다.
- 사용하기 어렵다 : 복잡한 차트를 만들고 싶다면 CSS를 사용하기 어려울 수 있습니다.
- 그다지 유연하지 않음: CSS는 그다지 유연하지 않으므로 차트를 변경하기 어려울 수 있습니다.
- 대화형 아님: CSS 차트는 대화형이 아니므로 사용자가 차트와 상호작용할 수 없습니다.
복잡한 차트를 만들고 싶다면 React-vis 및 React-google-charts가 더 나은 선택입니다. 그러나 간단한 차트를 만들고 싶다면 CSS가 좋은 선택일 수 있습니다.
React-Vis 사용의 이점
React-Vis를 사용하여 React에서 차트를 만들면 몇 가지 이점이 있습니다.
- 사용하기 쉬운: React-Vis는 사용하기 쉽기 때문에 복잡한 차트를 쉽게 만들 수 있습니다.
- 매우 유연함: React-Vis는 매우 유연하므로 차트를 쉽게 변경할 수 있습니다.
- 인터렉티브: React-Vis 차트는 대화형이므로 사용자가 차트와 상호작용할 수 있습니다.
- 생기 있는: React-Vis 차트는 애니메이션을 지원하므로 차트를 더욱 매력적으로 만들 수 있습니다.
대화형의 애니메이션이 있는 복잡한 차트를 만들고 싶다면 React-Vis가 좋은 선택입니다.
React Google 차트 사용의 이점
React-Vis와 마찬가지로 React Google Charts를 사용하여 React에서 차트를 만들면 몇 가지 이점이 있습니다.
- 사용하기 쉬운: React Google Charts는 사용하기 쉽기 때문에 복잡한 차트를 쉽게 만들 수 있습니다.
- 다양한 차트 유형: React Google Charts는 다양한 차트 유형을 제공하므로 데이터에 가장 적합한 유형을 선택할 수 있습니다.
- 애니메이션 지원: React Google Charts는 애니메이션을 지원하므로 차트를 더욱 매력적으로 만들 수 있습니다.
차트로 사용자 참여 증대
차트는 데이터를 시각화하는 좋은 방법이지만 이를 사용하여 사용자 참여를 높일 수도 있습니다. 차트에 애니메이션과 상호 작용을 추가하면 차트를 더 매력적으로 만들고 사용자가 데이터를 더 잘 이해하는 데 도움이 될 수 있습니다.
따라서 React 앱에서 사용자 참여를 높일 수 있는 방법을 찾고 있다면 차트 추가를 고려하십시오. Github와 같은 빠르고 안전하며 확장 가능한 플랫폼에 React 앱을 배포할 수도 있습니다.