React Js: Создание гистограммы Google в приложении React js

Из этого руководства вы узнаете, как создать гистограмму Google в приложении react js.

Библиотека диаграмм Google предлагает надежный и эффективный способ визуализации данных в веб-приложениях. Будь то простые диаграммы или более сложные диаграммы, не беспокойтесь, в диаграммах Google нет недостатка.

Как создать гистограммы Google в приложении React Js

Выполните следующие шаги и создайте гистограммы в приложении React js: 

Шаг 1 - Создайте приложение React

На этом шаге откройте свой терминал и выполните следующую команду, чтобы создать новое приложение для React:

npx create-react-app my-react-app

Чтобы запустить приложение React, выполните на своем терминале следующую команду: 

npm start

Проверьте свое приложение React по этому URL-адресу: localhost:3000

Шаг 2 - Установите пакет Bootstrap и react-google-charts

Выполните следующую команду, чтобы установить пакет response-bootstrap и google charts в свое приложение React:

npm install bootstrap

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Шаг 3 - Создайте компонент Google Stacked bar Charts 

Посетите каталог src вашего приложения React js, создайте компонент google stacked bar chart с именем GoogleBarChart.js и добавьте в него следующий код: 

import React, { Component } from "react";
import Chart from "react-google-charts";
 
const data = [
  ['City', '2010 Population', '2000 Population'],
  ['New York City, NY', 8175000, 8008000],
  ['Los Angeles, CA', 3792000, 3694000],
  ['Chicago, IL', 2695000, 2896000],
  ['Houston, TX', 2099000, 1953000],
  ['Philadelphia, PA', 1526000, 1517000],
];
 
class GoogleBarChart extends Component {
   
  constructor(props) {
    super(props)
  }
 
  render() {
      return (
          <div className="container mt-5">
              <h2>React Basic Bar Chart with Multiple Series</h2>
 
              <Chart
                  width={'700px'}
                  height={'320px'}
                  chartType="BarChart"
                  loader={<div>Loading Chart</div>}
                  data={data}
                  options={{
                    title: 'Population of Largest U.S. Cities',
                    chartArea: { width: '50%' },
                    hAxis: {
                      title: 'Total Population',
                      minValue: 0,
                    },
                    vAxis: {
                      title: 'City',
                    },
                  }}
                  rootProps={{ 'data-testid': '1' }}
                />              
          </div>
      )
  }
}
 
export default GoogleBarChart;

Шаг 4 - Добавьте компонент в App.js

На этом этапе вам нужно добавить файл GoogleBarChart.js в файл src/App.js: 

import React from 'react';
 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import GoogleBarChart from './components/GoogleBarChart';
 
 
function App() { 
  return (
    <div className="App">
      <GoogleBarChart />
    </div>
  );
}
 
export default App;

Из этого руководства вы узнали, как создать компонент гистограммы в приложении React js с помощью библиотеки диаграмм Google.