React Js: Создание календарной диаграммы используя библиотеку диаграмм Google
В этом руководстве вы узнаете, как создать календарную диаграмму в приложении React js, используя библиотеку диаграмм Google React.
Как создать гистограммы Google в приложении React Js
Выполните следующие шаги и создайте диаграммы календаря Google в приложении react js:
Шаг 1 - Создайте приложение React
На этом этапе откройте свой терминал и выполните следующую команду, чтобы создать новое приложение для react js:
npx create-react-app my-react-app
Чтобы запустить приложение React, выполните на своем терминале следующую команду:
npm start
Проверьте свое приложение React по этому URL-адресу: localhost:3000
Шаг 2 - Установите пакет Bootstrap и react-google-charts
Выполните следующую команду, чтобы установить пакет response-bootstrap и google charts в ваше приложение:
npm install bootstrap
# npm
npm install react-google-charts
# yarn
yarn add react-google-charts
Шаг 3. Создайте компонент "Диаграммы календаря Google"
Посетите каталог src вашего приложения react js и создайте компонент диаграммы календаря Google с именем GoogleCalendarChart.js и добавьте в него следующий код:
import React, { Component } from "react";
import Chart from "react-google-charts";
const data = [
[{ type: 'date', id: 'Date' }, { type: 'number', id: 'Won/Loss' }],
[new Date(2012, 3, 13), 37032],
[new Date(2012, 3, 14), 38024],
[new Date(2012, 3, 15), 38024],
[new Date(2012, 3, 16), 38108],
[new Date(2012, 3, 17), 38229],
[new Date(2013, 1, 4), 38177],
[new Date(2013, 1, 5), 38705],
[new Date(2013, 1, 12), 38210],
[new Date(2013, 1, 13), 38029],
[new Date(2013, 1, 19), 38823],
[new Date(2013, 1, 23), 38345],
[new Date(2013, 1, 24), 38436],
[new Date(2013, 2, 10), 38447],
];
class GoogleCalendarChart extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="container mt-5">
<h2>React Js Calendar Chart Example</h2>
<Chart
width={1000}
height={400}
chartType="Calendar"
loader={<div>Loading Chart</div>}
data={data}
options={{
title: 'Red Sox Attendance',
}}
rootProps={{ 'data-testid': '1' }}
/>
</div>
)
}
}
export default GoogleCalendarChart;
Шаг 4 - Добавьте компонент в App.js
На этом этапе вам нужно добавить файл GoogleCalendarChart.js в файл src/App.js:
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import GoogleChart from './components/GoogleCalendarChart';
function App() {
return (
<div className="App">
<GoogleCalendarChart />
</div>
);
}
export default App;
В этом руководстве вы узнали, как создать компонент диаграммы календаря в приложении React js с помощью библиотеки диаграмм Google.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.