В этой статье мы узнаем, как создавать диаграммы в приложении React с использованием библиотеки Chart.js. Chart.js — это библиотека JavaScript с открытым исходным кодом для создания диаграмм. Chart.js упрощает рисование различных типов диаграмм, таких как линейные, столбчатые, кольцевые и областные диаграммы. В этой статье мы создадим линейную диаграмму, гистограмму, круговую диаграмму и полярную область, используя React и Web API. Для получения дополнительной информации см . Документацию chart.js .
Предпосылки
- Базовые знания ReactJS и веб-API.
- Visual Studio и Visual Studio Code могут быть установлены.
- SQL Server Management Studio.
Эта статья охватывает:
- Создание базы данных и таблицы.
- Создание проекта ASP.NET Web API.
- Создание проекта ReactJS.
- Установка библиотеки Chart.js
- Установка Bootstrap и Axios.
- Добавление маршрутов в ReactJS.
Создать таблицу в базе данных
Откройте SQL Server Management Studio, создайте базу данных с именем «DemoTest» и в этой базе данных создайте таблицу. Дайте этой таблице такое имя, как «Ipltopscorer».
SQL
1
CREATE TABLE [dbo].[Ipltopscorer](
2
[id] [int] IDENTITY(1,1) NOT NULL,
3
[Playername] [varchar](50) NULL,
4
[Runscore] [int] NULL,
5
CONSTRAINT [PK_Ipltopscorer] PRIMARY KEY CLUSTERED
6
(
7
[id] ASC
8
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
9
) ON [PRIMARY]
10
GO
Добавьте некоторые демонстрационные данные в эту таблицу.
Вам также может понравиться: Cube.js :
полное руководство по платформе с открытым исходным кодом .
Создайте новый проект веб-API Asp.net
Откройте Visual Studio и создайте новый проект.
Измените имя на «ChartDemo» и нажмите « ОК» .
Выберите Web API в качестве шаблона.
Щелкните правой кнопкой мыши папку « Модели » в обозревателе решений и выберите « Добавить» >> «Новый элемент» >> «Данные» .
Выберите параметр « Модель данных объекта ADO.NET» и нажмите « Добавить» .
Выберите EF Designer из базы данных и нажмите кнопку Далее .
Добавьте свойства соединения, выберите имя базы данных на следующей странице и нажмите OK .
Проверьте флажок таблицы . Внутренние параметры будут выбраны по умолчанию. Теперь нажмите кнопку Готово .
Наша модель данных успешно создана. Щелкните правой кнопкой мыши папку « Контроллеры » и добавьте новый контроллер. Назовите это «Chartcontroller».
Добавьте следующее пространство имен в контроллер диаграмм.
C #
xxxxxxxxxx
1
using ChartDemo.Models;
Добавьте новый метод для извлечения данных из базы данных.
C #
xxxxxxxxxx
1
public object Getrecord()
2
{
3
DemoTestEntities DB = new DemoTestEntities();
4
return Json(DB.Ipltopscorers.ToList());
5
}
Заполните код Chartcontroller.
C #
xxxxxxxxxx
1
using System;
2
using System.Collections.Generic;
3
using System.Linq;
4
using System.Net;
5
using System.Net.Http;
6
using System.Web.Http;
7
using ChartDemo.Models;
8
9
namespace ChartDemo.Controllers
10
{
11
[RoutePrefix("API/Charts")]
12
public class ChartController : ApiController
13
{
14
[Route("Getrecord")]
15
[HttpGet]
16
public object Getrecord()
17
{
18
DemoTestEntities DB = new DemoTestEntities();
19
return Json(DB.Ipltopscorers.ToList());
20
}
21
}
22
}
Теперь давайте включим Cors. Перейдите в Инструменты , откройте диспетчер пакетов NuGet , найдите Cors и установите пакет Microsoft.Asp.Net.WebApi.Cors .
C #
xxxxxxxxxx
1
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
2
config.EnableCors(cors);
Создать проект ReactJS
Теперь создайте новый проект React.js с помощью следующей команды:
Оболочка
xxxxxxxxxx
1
npx create-react-app reactcharts
Откройте вновь созданный проект в коде Visual Studio.
Установите библиотеку Chart.js
Теперь установите библиотеку Chart.js в проекте React, введя следующую команду:
Оболочка
xxxxxxxxxx
1
npm install react-chartjs-2 chart.js
Установите Bootstrap в этом проекте с помощью следующей команды:
Оболочка
xxxxxxxxxx
1
npm install --save bootstrap
Теперь откройте файл index.js и импортируйте Bootstrap.
JavaScript
xxxxxxxxxx
1
import 'bootstrap/dist/css/bootstrap.min.css';
Теперь установите библиотеку Axios с помощью следующей команды. Узнайте больше об Аксиосе из их документов.
Оболочка
xxxxxxxxxx
1
npm install --save axios
Теперь перейдите в папку src и добавьте 5 новых компонентов.
- Linechart.js.
- Barchart.js.
- Doughnut.js.
- Piechart.js.
- Polararea.js.
Теперь откройте Linechart.js , импортируйте линейный график из библиотеки Chart.js и добавьте следующий код.
JavaScript
xxxxxxxxxx
1
import React, { Component } from 'react'
2
import axios from 'axios';
3
import { Line } from 'react-chartjs-2';
4
export class Linecharts extends Component {
5
constructor(props) {
6
super(props);
7
this.state = { Data: {} };
8
}
9
componentDidMount() {
10
axios.get(`http://localhost:61022/Api/Charts/Getrecord`)
11
.then(res => {
12
console.log(res);
13
const ipl = res.data;
14
let playername = [];
15
let runscore = [];
16
ipl.forEach(record => {
17
playername.push(record.Playername);
18
runscore.push(record.Runscore);
19
});
20
this.setState({
21
Data: {
22
labels: playername,
23
datasets: [
24
{
25
label: 'IPL 2018/2019 Top Run Scorer',
26
data: runscore,
27
backgroundColor: [
28
"#3cb371",
29
"#0000FF",
30
"#9966FF",
31
"#4C4CFF",
32
"#00FFFF",
33
"#f990a7",
34
"#aad2ed",
35
"#FF00FF",
36
"Blue",
37
"Red"
38
]
39
}
40
]
41
}
42
});
43
})
44
}
45
render() {
46
return (
47
<div>
48
<Line
49
data={this.state.Data}
50
options={{ maintainAspectRatio: false }} />
51
</div>
52
)
53
}
54
}
55
56
export default Linecharts
Теперь откройте Barchart.js и добавьте следующий код:
JavaScript
xxxxxxxxxx
1
import React, { Component } from 'react'
2
import axios from 'axios';
3
import { Bar } from 'react-chartjs-2';
4
export class Barchart extends Component {
5
constructor(props) {
6
super(props);
7
this.state = { Data: {} };
8
}
9
componentDidMount() {
10
axios.get(`http://localhost:61022/Api/Charts/Getrecord`)
11
.then(res => {
12
console.log(res);
13
const ipl = res.data;
14
let playername = [];
15
let runscore = [];
16
ipl.forEach(record => {
17
playername.push(record.Playername);
18
runscore.push(record.Runscore);
19
});
20
this.setState({
21
Data: {
22
labels: playername,
23
datasets: [
24
{
25
label: 'IPL 2018/2019 Top Run Scorer',
26
data: runscore,
27
backgroundColor: [
28
"#3cb371",
29
"#0000FF",
30
"#9966FF",
31
"#4C4CFF",
32
"#00FFFF",
33
"#f990a7",
34
"#aad2ed",
35
"#FF00FF",
36
"Blue",
37
"Red"
38
]
39
}
40
]
41
}
42
});
43
})
44
}
45
render() {
46
return (
47
<div>
48
<Bar data={this.state.Data}
49
options={{ maintainAspectRatio: false }} ></Bar>
50
</div>
51
)
52
}
53
}
54
55
export default Barchart
Теперь откройте Doughnut.js и добавьте следующий код:
JavaScript
xxxxxxxxxx
1
import React, { Component } from 'react'
2
import axios from 'axios';
3
import {Doughnut} from 'react-chartjs-2';
4
export class Doughnutchart extends Component {
5
render() {
6
return (
7
<div>
8
9
</div>
10
)
11
} constructor(props) {
12
super(props);
13
this.state = { Data: {} };
14
}
15
componentDidMount() {
16
axios.get(`http://localhost:61022/Api/Charts/Getrecord`)
17
.then(res => {
18
console.log(res);
19
const ipl = res.data;
20
let playername = [];
21
let runscore = [];
22
ipl.forEach(record => {
23
playername.push(record.Playername);
24
runscore.push(record.Runscore);
25
});
26
this.setState({
27
Data: {
28
labels: playername,
29
datasets: [
30
{
31
label: 'IPL 2018/2019 Top Run Scorer',
32
data: runscore,
33
backgroundColor: [
34
"#3cb371",
35
"#0000FF",
36
"#9966FF",
37
"#4C4CFF",
38
"#00FFFF",
39
"#f990a7",
40
"#aad2ed",
41
"#FF00FF",
42
"Blue",
43
"Red"
44
]
45
}
46
]
47
}
48
});
49
})
50
}
51
render() {
52
return (
53
<div>
54
<Doughnut data={this.state.Data}
55
options={{ maintainAspectRatio: false }} ></Doughnut>
56
</div>
57
)
58
}
59
}
60
61
export default Doughnutchart
Теперь откройте Piechart.js и добавьте следующий код:
JavaScript
xxxxxxxxxx
1
import React, { Component } from 'react'
2
import axios from 'axios';
3
import { Pie } from 'react-chartjs-2';
4
export class Piechart extends Component {
5
constructor(props) {
6
super(props);
7
this.state = { Data: {} };
8
}
9
componentDidMount() {
10
axios.get(`http://localhost:61022/Api/Charts/Getrecord`)
11
.then(res => {
12
console.log(res);
13
const ipl = res.data;
14
let playername = [];
15
let runscore = [];
16
ipl.forEach(record => {
17
playername.push(record.Playername);
18
runscore.push(record.Runscore);
19
});
20
this.setState({
21
Data: {
22
labels: playername,
23
datasets: [
24
{
25
label: 'IPL 2018/2019 Top Run Scorer',
26
data: runscore,
27
backgroundColor: [
28
"#3cb371",
29
"#0000FF",
30
"#9966FF",
31
"#4C4CFF",
32
"#00FFFF",
33
"#f990a7",
34
"#aad2ed",
35
"#FF00FF",
36
"Blue",
37
"Red"
38
]
39
}
40
]
41
}
42
});
43
})
44
}
45
render() {
46
return (
47
<div>
48
<Pie
49
data={this.state.Data}
50
options={{ maintainAspectRatio: false }} />
51
</div>
52
)
53
}
54
}
55
56
export default Piechart
Теперь откройте Polararea.js и добавьте следующий код:
JavaScript
xxxxxxxxxx
1
import React, { Component } from 'react'
2
import { Polar } from 'react-chartjs-2';
3
import axios from 'axios';
4
5
export class Polararea extends Component {
6
constructor(props) {
7
super(props);
8
this.state = { Data: {} };
9
}
10
componentDidMount() {
11
axios.get(`http://localhost:61022/Api/Charts/Getrecord`)
12
.then(res => {
13
console.log(res);
14
const ipl = res.data;
15
let playername = [];
16
let runscore = [];
17
ipl.forEach(record => {
18
playername.push(record.Playername);
19
runscore.push(record.Runscore);
20
});
21
this.setState({
22
Data: {
23
labels: playername,
24
datasets: [
25
{
26
label: 'IPL 2018/2019 Top Run Scorer',
27
data: runscore,
28
backgroundColor: [
29
"#3cb371",
30
"#0000FF",
31
"#9966FF",
32
"#4C4CFF",
33
"#00FFFF",
34
"#f990a7",
35
"#aad2ed",
36
"#FF00FF",
37
"Blue",
38
"Red"
39
]
40
}
41
]
42
}
43
});
44
})
45
}
46
render() {
47
return (
48
<div>
49
<Polar data={this.state.Data}
50
options={{ maintainAspectRatio: false }} />
51
</div>
52
)
53
}
54
}
55
56
export default Polararea
Добавить маршрутизацию в ReactJS
Установите пакетact-router-dom с помощью следующей команды:
Машинопись
xxxxxxxxxx
1
npm install react-router-dom --save
Теперь откройте файл app.js и импортируйте все пять компонентов и компонент маршрутизатора React. Добавьте следующий код в файл app.js :
JavaScript
xxxxxxxxxx
1
import React from 'react';
2
import './App.css';
3
import Piechart from './piechart'
4
import Doughnutchart from './Doughnutchart'
5
import Barchart from './Barchart'
6
import Linecharts from './linecharts'
7
import Polararea from './Polararea'
8
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
9
function App() {
10
return (
11
<div className="App">
12
<Router>
13
<div>
14
<div class="row" className="hdr">
15
<div class="col-sm-12 btn btn-warning">
16
Charts in ReactJS
17
</div>
18
</div>
19
<div class="row"> >
20
<div class="col-sm-1">
21
</div>
22
<div class="col-sm-2">
23
<Link to={'/Piechart'} className="nav-link btn btn-info">Piechart</Link>
24
</div>
25
<div class="col-sm-2">
26
<Link to={'/Barchart'} className="nav-link btn btn-info">Bar Chart</Link>
27
</div>
28
<div class="col-sm-2">
29
<Link to={'/Linecharts'} className="nav-link btn btn-info">Line Chart</Link>
30
</div>
31
<div class="col-sm-2">
32
<Link to={'/Doughnut'} className="nav-link btn btn-info">Doughnut Chart</Link>
33
</div>
34
<div class="col-sm-2">
35
<Link to={'/Polararea'} className="nav-link btn btn-info">Polar Chart</Link>
36
</div>
37
<div class="col-sm-1">
38
</div>
39
</div>
40
</div>
41
<div className="container">
42
<Switch>
43
<Route exact path='/Piechart' component={Piechart} />
44
<Route path='/Barchart' component={Barchart} />
45
<Route path='/Polararea' component={Polararea} />
46
<Route path='/Doughnut' component={Doughnutchart} />
47
<Route path='/Linecharts' component={Linecharts} />
48
</Switch>
49
</div>
50
</Router>
51
</div>
52
);
53
}
54
export default App;
Теперь запустите проект с помощью npm startкоманды и проверьте результат. Нажмите на кнопки, чтобы увидеть каждый график.
Резюме
В этой статье мы узнали о Chart.js и о том, как добавить его в приложения ReactJS для создания диаграмм. В этой статье мы обсудили линейную диаграмму, гистограмму, круговую диаграмму, кольцевую диаграмму и диаграмму полярной области. Мы также можем использовать другие библиотеки Chart в ReactJS для создания большего количества визуализаций.