Material UI 및 Devexpress를 사용하여 React에서 막대 차트를 만드는 방법은 무엇입니까?

Material UI는 React 애플리케이션의 스타일을 지정하는 데 사용할 수 있는 널리 사용되는 CSS 라이브러리입니다. 여기에는 코드로 가져와 애플리케이션에서 직접 사용할 수 있는 미리 스타일이 지정된 다양한 React 구성 요소가 포함되어 있습니다.

'dx-react-chart-material-ui'는 devexpress의 Material-ui와 'dx-react-chart' 라이브러리를 연결할 수 있는 Devexpress의 NPM 패키지입니다. "dx-react-chart"는 차트를 생성하는 데 사용되며 Material UI는 차트 스타일을 지정하는 데 사용됩니다.

사용자는 다음 명령을 실행하여 React 애플리케이션에 Material UI를 설치할 수 있습니다.

으아아아

또한 다음 명령을 실행하여 Devexpress NPM 패키지를 설치하세요.

으아아아

문법

사용자는 다음 구문에 따라 Devexpress를 사용하여 막대 차트를 만들 수 있습니다.

으아아아

위 구문에서는 DevExpress의 “Chart”, “BarSeries” 및 “Title” 구성 요소를 사용했습니다. "Chart" 구성 요소는 차트를 표시하고 "BarSeries" 구성 요소는 막대 차트를 표시하며 "Title" 구성 요소는 제목을 표시합니다.

예제 1(간단한 막대 차트)

아래 예에서는 Material UI에서 "Paper" 구성 요소를 가져왔습니다. 또한 "devexpress" NPM 패키지에서 필수 구성요소를 가져왔습니다.

차트 데이터가 포함된 data[] 배열도 정의합니다. 과일의 이름과 가격이 들어있습니다. 과일 가격을 비교하기 위한 간단한 막대 차트를 만들어 보겠습니다. 출력에서 사용자는 막대 그래프를 관찰할 수 있습니다.

으아아아

출력

예 2(나란한 막대 차트)

아래 예에서는 병렬 막대 차트를 만드는 방법을 보여줍니다. 데이터에는 색상에 따른 재료명과 가격이 포함되어 있습니다.

이 차트에는 단일 재료에 대한 일련의 3개 막대가 포함되어 있으며, 각 막대는 서로 다른 색상을 나타냅니다. "Barseries" 구성 요소를 사용하여 각 재료에 대한 막대를 만듭니다. 또한 구성 요소의 제목을 설정합니다.

출력에서 사용자는 각 막대가 색상을 기준으로 다양한 재료의 가격을 비교하는 나란히 막대 차트를 볼 수 있습니다.

으아아아

출력

예 3(누적 막대 차트)

아래 예에서는 누적 막대 차트를 만드는 방법을 보여줍니다. 막대그래프를 만들기 위해 주별 인구, 차량, 주택, 매장 데이터를 준비했습니다.

아래 예에서는 누적 막대 차트를 만드는 방법을 보여줍니다. 막대그래프를 만들기 위해 주별 인구, 차량, 주택, 매장 데이터를 준비했습니다.

으아아아

출력

Devexpress 및 Material UI 라이브러리를 사용하여 다이어그램을 만들고 디자인하는 방법을 배웠습니다. Devexpress NPM 패키지는 Material UI와 Devexpress 차트 라이브러리 간의 브리지입니다. 또한 이 튜토리얼에서는 다양한 유형의 막대 차트를 만드는 방법을 배웠습니다.

위 내용은 Material UI 및 Devexpress를 사용하여 React에서 막대 차트를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!