קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

תרשימים מספקים למשתמשים שלך דרך נוחה ואטרקטיבית להמחיש נתונים. הם יכולים להקל על הבנת הנתונים ויכולים להפוך את האפליקציה שלך לאינטראקטיבית יותר.

ישנן מספר דרכים ליצור תרשימים ב-React, כולל שימוש ב-CSS בסיסי או ספרייה כמו React-Vis או React Google Charts.

כיצד ליצור תרשימים ב-React עם CSS

יצירת תרשימים ב-React באמצעות CSS בסיסי היא קלה יחסית. כל מה שאתה צריך לעשות הוא ליצור אלמנט div עם רוחב וגובה, ואז להגדיר את צבע הרקע לצבע הרצוי של התרשים. לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
const תרשים = () => {
לַחֲזוֹר (


רוֹחַב: '100px', גוֹבַה: '300px', צבע רקע: '#5D6AFF'}}/>
 );
}
יְצוּאבְּרִירַת מֶחדָל טבלה;

בקוד לעיל, ייבאנו את ספריית React. לאחר מכן יצרנו פונקציה בשם Chart שמחזירה div עם רוחב של 100px, גובה של 300px וצבע רקע של #5D6AFF. פעולה זו תיצור תרשים בסיסי עם רקע כחול. אתה יכול גם השתמש ב-Material UI אוֹ Tailwind CSS באפליקציית React שלך כדי ליצור תרשימים.

אתה יכול גם ליצור תרשימים מרובים עם טקסט או תמונות בתוך ה-divs כדי ליצור תרשימים מורכבים יותר.

instagram viewer 
יְבוּא לְהָגִיב מ'לְהָגִיב';
const תרשים = () => {
לַחֲזוֹר (
<div>


רוֹחַב: '100px', גוֹבַה: '300px', צבע רקע: '#5D6AFF'}}>
<ע>תרשים 1ע>
div>
רוֹחַב: '100px', גוֹבַה: '300px', צבע רקע: '#FFCF00'}}>
<imgsrc=" https://dummyimage.com/40x80/000/0011ff"סִגְנוֹן={{ריפוד:'100 פיקסלים30 פיקסלים'}} />
div>
div>
 );
}


יְצוּאבְּרִירַת מֶחדָל טבלה;

תרשימי תגובה באמצעות ספריית React-Vis

React-Vis היא ספרייה שנוצרה על ידי Uber המאפשרת לך ליצור תרשימים וגרפים ב-React. הוא מספק קבוצה של רכיבים המקלים על יצירת תרשימים עם צורות, צבעים וגדלים שונים. זה גם תומך באנימציות ואינטראקטיביות, מה שיכול לעזור להפוך את התרשימים שלך למושכים יותר.

כדי להשתמש ב-React-Vis, תחילה עליך ליצור אפליקציית React בסיסית ולהתקין את הספרייה. אתה יכול לעשות זאת עם הפקודה הבאה:

npm להתקין להגיב מול

לאחר שהתקנת את הספרייה, תוכל ליצור תרשים בסיסי עם הקוד הבא:

יְבוּא תגובה, { useState } מ'לְהָגִיב';
יְבוּא {
 XYPlot,
 LineSeries,
 VerticalGridLines,
 קווי רשת אופקיים,
 XAxis,
 YAxis
} מ'להגיב מול';


const תרשים = () => {
const [נתונים] = useState([
 { איקס: 0, y: 8 },
 { איקס: 1, y: 5 },
 { איקס: 2, y: 4 },
 { איקס: 3, y: 9 },
 { איקס: 4, y: 1 },
 { איקס: 5, y: 7 },
 { איקס: 6, y: 6 },
 { איקס: 7, y: 3 },
 { איקס: 8, y: 2 },
 { איקס: 9, y: 0 }
 ]);


לַחֲזוֹר (
<XYPlotרוֹחַב={300}גוֹבַה={300}>
<VerticalGridLines />
<קווי רשת אופקיים />
<XAxis />
<YAxis />
<LineSeriesנתונים={נתונים} />
XYPlot>
 );
}
יְצוּאבְּרִירַת מֶחדָל טבלה;

הקוד לעיל מייבא את ספריות React ו-React-Vis. לאחר מכן הוא מגדיר פונקציה בשם Chart שמחזירה XYPlot עם VerticalGridLines, HorizontalGridLines, XAxis, YAxis ו- LineSeries. ה-LineSeries לוקח את מערך הנתונים, המכיל את קואורדינטות x ו-y של הנקודות המרכיבות את הקו.

שימוש בספריית Google Charts React

React Google Charts היא עוד ספרייה שמקלה ליצור תרשימים ב-React. הוא מספק קבוצה של רכיבים ליצירת סוגים שונים של תרשימים, כגון תרשימי עמודות, תרשימי עוגה ותרשימים קוויים. זה גם תומך באנימציות ואינטראקטיביות, מה שיכול לעזור להפוך את התרשימים שלך למושכים יותר.

כדי להשתמש ב-React Google Charts, תחילה עליך להתקין את הספרייה. אתה יכול לעשות זאת עם הפקודה הבאה:

npm להתקין react-google-charts

לאחר שהתקנת את הספרייה, תוכל ליצור תרשים בסיסי עם הקוד הבא:

יְבוּא תגובה, { useState } מ'לְהָגִיב';
יְבוּא { טבלה } מ'react-google-charts';
const MyChart = () => {
const [נתונים] = useState([
['שָׁנָה', 'מכירות', 'הוצאות'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


לַחֲזוֹר (
 רוחב={'400px'}
 גובה={'300px'}
 chartType="בַּר"
 data={נתונים}
 />
 );
}
יְצוּאבְּרִירַת מֶחדָל MyChart;

קוד זה מייבא את ספריות react ו-react-google-charts. לאחר מכן הוא יוצר פונקציה בשם MyChart אשר מחזירה רכיב Chart. רכיב התרשים לוקח את מערך הנתונים, המכיל את התוויות והערכים של הנקודות המרכיבות את התרשים.

החסרונות של שימוש ב-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.