Как да добавите диаграми към вашето приложение React

Как да добавите диаграми към вашето приложение React
Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Диаграмите предоставят на вашите потребители удобен и привлекателен начин за визуализиране на данни. Те могат да направят данните по-лесни за разбиране и да направят приложението ви по-интерактивно.





Има няколко начина за създаване на диаграми в React, включително използване на базов CSS или библиотека като React-Vis или React Google Charts.



Как да създавате диаграми в React с CSS

Създаването на диаграми в React с помощта на основен CSS е сравнително лесно. Всичко, което трябва да направите, е да създадете div елемент с ширина и височина, след което да зададете цвета на фона на желания цвят на диаграмата. Например:





MAKEUSEOF ВИДЕО НА ДЕНЯ 
 import React from 'react'; 
 
const Chart = () => { 
 return ( 
  <div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}/> 
 ); 
} 
 
export default Chart;

В горния код импортирахме библиотеката React. След това създадохме функция, наречена Chart, която връща div с ширина 100px, височина 300px и цвят на фона #5D6AFF. Това ще създаде основна диаграма със син фон. Можете също използване на материален потребителски интерфейс или Tailwind CSS във вашето приложение React за създаване на диаграми.

Можете също да създадете множество диаграми с текст или изображения вътре в div, за да създадете по-сложни диаграми.



 import React from 'react'; 
 
const Chart = () => { 
 return ( 
  <div> 
   <div style={{width: '100px', height: '300px', backgroundColor: '#5D6AFF'}}> 
    <p>Chart 1</p> 
   </div> 
   <div style={{width: '100px', height: '300px', backgroundColor: '#FFCF00'}}> 
    <img src="https://dummyimage.com/40x80/000/0011ff" style={{padding:'100px 30px'}} /> 
   </div> 
  </div> 
 ); 
} 
 
export default Chart;
Приложение React с диаграми с помощта на css

Графики на React с помощта на библиотеката React-Vis

React-Vis е библиотека, създадена от Uber, която ви позволява да създавате диаграми и графики в React. Той предоставя набор от компоненти, които улесняват създаването на диаграми с различни форми, цветове и размери. Той също така поддържа анимации и интерактивност, което може да ви помогне да направите вашите диаграми по-ангажиращи.

как да добавите преки пътища към iphone

За да използвате React-Vis, първо трябва създайте основно приложение React и инсталирайте библиотеката. Можете да направите това със следната команда:



 npm install react-vis

След като инсталирате библиотеката, можете да създадете основна диаграма със следния код:

 import React, { useState } from 'react'; 
 
import { 
 XYPlot, 
 LineSeries, 
 VerticalGridLines, 
 HorizontalGridLines, 
 XAxis, 
 YAxis 
} from 'react-vis'; 
 
const Chart = () => { 
 const [data] = useState([ 
  { x: 0, y: 8 }, 
  { x: 1, y: 5 }, 
  { x: 2, y: 4 }, 
  { x: 3, y: 9 }, 
  { x: 4, y: 1 }, 
  { x: 5, y: 7 }, 
  { x: 6, y: 6 }, 
  { x: 7, y: 3 }, 
  { x: 8, y: 2 }, 
  { x: 9, y: 0 } 
 ]); 
 
 return ( 
  <XYPlot width={300} height={300}> 
   <VerticalGridLines /> 
   <HorizontalGridLines /> 
   <XAxis /> 
   <YAxis /> 
   <LineSeries data={data} /> 
  </XYPlot> 
 ); 
} 
 
export default Chart;

Горният код импортира библиотеките React и React-Vis. След това дефинира функция, наречена Chart, която връща XYPlot с VerticalGridLines, HorizontalGridLines, XAxis, YAxis и LineSeries. LineSeries взема масива от данни, който съдържа x и y координатите на точките, които съставят линията.



приложение react с диаграми с помощта на react-viz

Използване на React Google Charts Library

React Google Charts е друга библиотека, която улеснява създаването на диаграми в React. Той предоставя набор от компоненти за създаване на различни типове диаграми, като стълбовидни диаграми, кръгови диаграми и линейни графики. Той също така поддържа анимации и интерактивност, което може да ви помогне да направите вашите диаграми по-ангажиращи.

За да използвате React Google Charts, първо трябва да инсталирате библиотеката. Можете да направите това със следната команда:

 npm install react-google-charts

След като инсталирате библиотеката, можете да създадете основна диаграма със следния код:

има ли xbox one възможности за bluetooth 
 import React, { useState } from 'react'; 
import { Chart } from 'react-google-charts'; 
 
const MyChart = () => { 
 const [data] = useState([ 
  ['Year', 'Sales', 'Expenses'], 
  ['2013', 1000, 400], 
  ['2014', 1170, 460], 
  ['2015', 660, 1120], 
  ['2016', 1030, 540] 
 ]); 
 
 return ( 
  <Chart 
   width={'400px'} 
   height={'300px'} 
   chartType="Bar" 
   data={data} 
  /> 
 ); 
} 
 
export default MyChart;

Този код импортира библиотеките react и react-google-charts. След това създава функция, наречена MyChart, която връща компонент Chart. Компонентът Chart взема масива от данни, който съдържа етикетите и стойностите на точките, съставляващи диаграмата.

защо моето wifi обаждане не работи
приложение за реакция с диаграми с помощта на google-react-charts

Недостатъци на използването на CSS

Има няколко недостатъка на използването на CSS за създаване на диаграми в React:

  • Труден за използване : Ако искате да създадете сложни диаграми, CSS може да бъде труден за използване.
  • Не е много гъвкав: CSS не е много гъвкав, така че може да е трудно да правите промени в диаграмите си.
  • Не е интерактивен: CSS диаграмите не са интерактивни, така че потребителите ви няма да могат да взаимодействат с тях.

Ако искате да създавате сложни диаграми, React-vis и React-google-charts са по-добър избор. Въпреки това, ако искате да създадете прости диаграми, CSS може да бъде добър вариант.

Ползи от използването на React-Vis

Има няколко предимства от използването на React-Vis за създаване на диаграми в React:

  • Лесен за използване: React-Vis е лесен за използване, така че можете да създавате сложни диаграми с лекота.
  • Силно гъвкав: React-Vis е много гъвкав, така че можете лесно да правите промени в диаграмите си.
  • Интерактивен: Диаграмите на React-Vis са интерактивни, така че вашите потребители могат да взаимодействат с тях.
  • анимирани: Диаграмите React-Vis поддържат анимации, така че можете да направите диаграмите си по-ангажиращи.

Ако искате да създавате сложни диаграми, които са интерактивни и анимирани, React-Vis е добър избор.

Предимства от използването на React Google Charts

Точно като React-Vis, има няколко предимства от използването на React Google Charts за създаване на диаграми в React:

  • Лесен за използване: React Google Charts е лесен за използване, така че можете да създавате сложни диаграми с лекота.
  • Различни типове диаграми: React Google Charts предоставя различни типове диаграми, така че можете да изберете най-добрата за вашите данни.
  • Поддръжка за анимация: React Google Charts поддържа анимации, така че можете да направите вашите диаграми по-ангажиращи.

Увеличете ангажираността на потребителите с диаграми

Диаграмите са чудесен начин за визуализиране на данни, но можете също да ги използвате, за да увеличите ангажираността на потребителите. Добавянето на анимации и интерактивност към вашите диаграми може да ги направи по-ангажиращи и може да помогне на потребителите ви да разберат по-добре вашите данни.

Така че, ако търсите начин да увеличите ангажираността на потребителите в приложението си React, помислете за добавяне на диаграми. Можете също така да внедрите приложението си React на бърза, сигурна и мащабируема платформа като Github.