Material UI 是一個(gè)流行的 CSS 庫(kù)，我們可以用它來(lái)設(shè)計(jì) React 應(yīng)用程序的樣式。它包含各種預(yù)先設(shè)計(jì)樣式的 React 組件，我們可以通過(guò)將它們導(dǎo)入到代碼中來(lái)直接在應(yīng)用程序中使用它們。
‘dx-react-chart-material-ui’是Devexpress的一個(gè)NPM包，可以連接devexpress的material-ui和‘dx-react-chart’庫(kù)。 “dx-react-chart”用于創(chuàng)建圖表，Material UI 用于設(shè)置圖表樣式。
用戶可以執(zhí)行以下命令在React應(yīng)用程序中安裝Material UI。
npm install @mui/material @emotion/react @emotion/styled
登錄后復(fù)制
此外，執(zhí)行以下命令來(lái)安裝 Devexpress NPM 包。
npm i @devexpress/dx-react-chart
登錄后復(fù)制
語(yǔ)法
用戶可以按照以下語(yǔ)法使用 Devexpress 創(chuàng)建條形圖。
<Chart data = {data}>
<BarSeries valueField = "price" argumentField = "fruit" />
<Title text = "Fruit price" />
</Chart>
登錄后復(fù)制
在上面的語(yǔ)法中，我們使用了 DevExpress 的“Chart”、“BarSeries”和“Title”組件。 “Chart”組件顯示圖表，“BarSeries”組件顯示條形圖，“Title”組件顯示標(biāo)題。
示例 1（簡(jiǎn)單條形圖）
在下面的示例中，我們從 Material UI 導(dǎo)入了“Paper”組件。此外，我們還從“devexpress”NPM 包中導(dǎo)入了所需的組件。
我們還定義了包含圖表數(shù)據(jù)的 data[] 數(shù)組。它包含水果的名稱和價(jià)格。我們創(chuàng)建一個(gè)簡(jiǎn)單的條形圖來(lái)比較水果價(jià)格。在輸出中，用戶可以觀察條形圖。
import React, { useState } from "react";
import Paper from "@mui/material/Paper";
import {
Chart,
BarSeries,
Title,
ArgumentAxis,
ValueAxis,
} from "@devexpress/dx-react-chart-material-ui";
import { Animation } from "@devexpress/dx-react-chart";
const data = [
{ fruit: "Apple", price: 150 },
{ fruit: "Orange", price: 250 },
{ fruit: "Banana", price: 100 },
{ fruit: "Mango", price: 200 },
{ fruit: "Grapes", price: 50 },
{ fruit: "Pineapple", price: 90 },
{ fruit: "Watermelon", price: 170 },
{ fruit: "Papaya", price: 120 },
{ fruit: "Guava", price: 80 },
];
function App() {
return (
<div>
<h2>
Creating the{" "}
bar chart using the <i> devexpress NPM package and material UI </i>
</h2>
<Paper>
<Chart data = {data}>
<ArgumentAxis />
<ValueAxis max = {200} />
<BarSeries valueField = "price" argumentField = "fruit" />
<Title text = "Fruit Price" />
<Animation />
</Chart>
</Paper>
</div>
);
}
export default App;
登錄后復(fù)制
輸出
示例 2（并排條形圖）
在下面的示例中，我們演示了如何創(chuàng)建并排條形圖。該數(shù)據(jù)包含根據(jù)顏色的材料名稱和價(jià)格。
該圖表包含單一材料的一系列 3 個(gè)條形圖，每個(gè)條形圖代表不同的顏色。我們使用“Barseries”組件為每種材料創(chuàng)建一個(gè)條形。此外，我們還設(shè)置了組件的標(biāo)題。
在輸出中，用戶可以觀察并排的條形圖，每個(gè)條形根據(jù)顏色比較不同材料的價(jià)格。
import React from "react";
import Paper from "@mui/material/Paper";
import {
Chart,
BarSeries,
Title,
ArgumentAxis,
ValueAxis,
Legend,
} from "@devexpress/dx-react-chart-material-ui";
import { Stack, Animation } from "@devexpress/dx-react-chart";
const chartData = [
{ material: "Aluminium", yellow: 3000, silver: 3200, grey: 2900 },
{ material: "Copper", yellow: 2300, silver: 2700, grey: 1900 },
{ material: "Steel", yellow: 1400, silver: 2100, grey: 1700 },
{ material: "Iron", yellow: 2200, silver: 1700, grey: 2800 },
];
function App() {
return (
<div>
<h2>
Creating the{" "}
stacked bar chart using the <i> devexpress NPM package and material UI </i>
</h2>
<Paper>
<Chart data = {chartData}>
<ArgumentAxis />
<ValueAxis />
<BarSeries
Name = "yellow color"
valueField = "yellow"
argumentField = "material"
color = "#ffd700"
/>
<BarSeries
Name = "Silver color"
valueField = "silver"
argumentField = "material"
color = "#c0c0c0"
/>
<BarSeries
Name = "grey color"
valueField = "grey"
argumentField = "material"
color = "grey"
/>
<Animation />
<Legend position = "bottom" />
<Title text = "Price of Materials" />
<Stack />
</Chart>
</Paper>
</div>
);
}
export default App;
登錄后復(fù)制
輸出
示例 3（堆疊條形圖）
在下面的示例中，我們演示了如何創(chuàng)建堆積條形圖。我們根據(jù)各州準(zhǔn)備了人口、車輛、房屋和商店數(shù)據(jù)，以創(chuàng)建條形圖。
在下面的示例中，我們演示了如何創(chuàng)建堆積條形圖。我們根據(jù)各州準(zhǔn)備了人口、車輛、房屋和商店數(shù)據(jù)，以創(chuàng)建條形圖。
import React from "react";
import Paper from "@mui/material/Paper";
import {
Chart,
BarSeries,
Title,
ArgumentAxis,
ValueAxis,
Legend,
} from "@devexpress/dx-react-chart-material-ui";
import { Stack, Animation } from "@devexpress/dx-react-chart";
const chartData = [
{ state: "Gujarat", population: 3938223, vehicles: 3456800, houses: 2535447, shops: 454464 },
{ state: "Maharashtra", population: 2446456, vehicles: 3864500, houses: 6485534, shops: 344654 },
{ state: "Rajasthan", population: 2332543, vehicles: 4756549, houses: 981496, shops: 545621 },
{ state: "Punjab", population: 3434657, vehicles: 5686564, houses: 4569847, shops: 448734 },
];
function App() {
return (
<div>
<h2>
Creating the{" "}
<i>
Stacked bar chart using the devexpress NPM package and Material UI.
</i>
</h2>
<Paper>
<Chart data = {chartData}>
<ArgumentAxis />
<ValueAxis max = {50000000} />
<BarSeries
name = "Population"
valueField = "population"
argumentField = "state"
color = "#8884d8"
/>
<BarSeries
name = "Vehicles"
valueField = "vehicles"
argumentField = "state"
color = "#82ca9d"
/>
<BarSeries
name = "Houses"
valueField = "houses"
argumentField = "state"
color = "#ffc658"
/>
<BarSeries
name = "Shops"
valueField = "shops"
argumentField = "state"
color = "#ff7f50"
/>
<Animation />
<Legend position = "bottom" />
<Title text = "State-wise Data" />
<Stack stacks = {[{ series: ["Population", "Vehicles", "Houses", "Shops"] }]} />
</Chart>
</Paper>
</div>
);
}
export default App;
登錄后復(fù)制
輸出
我們學(xué)習(xí)了使用 Devexpress 和 Material UI 庫(kù)來(lái)創(chuàng)建和設(shè)計(jì)圖表。 Devexpress NPM 包是 Material UI 和 Devexpress 圖表庫(kù)之間的橋梁。此外，我們?cè)诒窘坛讨袑W(xué)習(xí)了創(chuàng)建各種類型的條形圖。
以上就是如何使用 Material UI 和 Devexpress 在 React 中創(chuàng)建條形圖？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
