القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

توفر الرسوم البيانية للمستخدمين طريقة مناسبة وجذابة لتصور البيانات. يمكن أن تجعل البيانات أسهل في الفهم ويمكن أن تجعل تطبيقك أكثر تفاعلية.

هناك عدة طرق لإنشاء مخططات في React ، بما في ذلك استخدام CSS الأساسي أو مكتبة مثل React-Vis أو React Google Charts.

كيفية إنشاء الرسوم البيانية في React باستخدام CSS

يعد إنشاء المخططات في React باستخدام CSS الأساسي أمرًا سهلاً نسبيًا. كل ما عليك فعله هو إنشاء عنصر div بعرض وارتفاع ، ثم ضبط لون الخلفية على اللون المطلوب للمخطط. على سبيل المثال:

يستورد تتفاعل من'تتفاعل';
مقدار ثابت مخطط = () => {
يعود (


عرض: "100 بكسل", ارتفاع: "300 بكسل", لون الخلفية: "# 5D6AFF"}}/>
 );
}
يصدّرتقصير جدول؛

في الكود أعلاه ، قمنا باستيراد مكتبة React. قمنا بعد ذلك بإنشاء دالة تسمى Chart تُرجع قيمة div بعرض 100 بكسل وارتفاع 300 بكسل ولون خلفية # 5D6AFF. سيؤدي هذا إلى إنشاء مخطط أساسي بخلفية زرقاء. بامكانك ايضا استخدام واجهة المستخدم المادية أو Tailwind CSS في تطبيق React الخاص بك لإنشاء الرسوم البيانية.

instagram viewer

يمكنك أيضًا إنشاء مخططات متعددة بنص أو صور داخل divs لإنشاء مخططات أكثر تعقيدًا.

يستورد تتفاعل من'تتفاعل';
مقدار ثابت مخطط = () => {
يعود (
<شعبة>


عرض: "100 بكسل", ارتفاع: "300 بكسل", لون الخلفية: "# 5D6AFF"}}>
<ص>الرسم البياني 1ص>
شعبة>
عرض: "100 بكسل", ارتفاع: "300 بكسل", لون الخلفية: "# FFCF00"}}>
<IMGsrc=" https://dummyimage.com/40x80/000/0011ff"أسلوب={{حشوة:'100 بكسل30 بكسل'}} />
شعبة>
شعبة>
 );
}


يصدّرتقصير جدول؛

تفاعل المخططات باستخدام مكتبة React-Vis

React-Vis هي مكتبة أنشأتها Uber تتيح لك إنشاء مخططات ورسوم بيانية في React. يوفر مجموعة من المكونات التي تسهل إنشاء مخططات بأشكال وألوان وأحجام مختلفة. كما أنه يدعم الرسوم المتحركة والتفاعلية ، والتي يمكن أن تساعد في جعل الرسوم البيانية الخاصة بك أكثر جاذبية.

لاستخدام React-Vis ، عليك أولاً أن تقوم بذلك إنشاء تطبيق React أساسي وتثبيت المكتبة. يمكنك القيام بذلك باستخدام الأمر التالي:

npm ثَبَّتَ رد فعل تجاه

بمجرد تثبيت المكتبة ، يمكنك إنشاء مخطط أساسي بالشفرة التالية:

يستورد رد فعل ، {useState} من'تتفاعل';
يستورد {
 XYPlot ،
 سلسلة الخط ،
 VerticalGridLines ،
 خطوط أفقية ،
 المحور X ،
 YAxis
} منرد فعل;


مقدار ثابت مخطط = () => {
مقدار ثابت [البيانات] = useState ([
 { x: 0، ص: 8 },
 { x: 1، ص: 5 },
 { x: 2، ص: 4 },
 { x: 3، ص: 9 },
 { x: 4، ص: 1 },
 { x: 5، ص: 7 },
 { x: 6، ص: 6 },
 { x: 7، ص: 3 },
 { x: 8، ص: 2 },
 { x: 9، ص: 0 }
 ]);


يعود (
<XYPlotعرض={300}ارتفاع={300}>
<VerticalGridLines />
<HorizontalGridLines />
<المحور X />
<YAxis />
<سلسلة الخطبيانات={بيانات} />
XYPlot>
 );
}
يصدّرتقصير جدول؛

تستورد الكود أعلاه مكتبات React و React-Vis. ثم تقوم بتعريف دالة تسمى Chart تقوم بإرجاع XYPlot مع VerticalGridLines و HorizontalGridLines و XAxis و YAxis و LineSeries. تأخذ LineSeries صفيف البيانات ، الذي يحتوي على إحداثيات x و y للنقاط التي يتكون منها الخط.

استخدام مكتبة مخططات جوجل React

React Google Charts هي مكتبة أخرى تسهل إنشاء مخططات في React. يوفر مجموعة من المكونات لإنشاء أنواع مختلفة من المخططات ، مثل المخططات الشريطية والمخططات الدائرية والرسومات البيانية الخطية. كما أنه يدعم الرسوم المتحركة والتفاعلية ، والتي يمكن أن تساعد في جعل الرسوم البيانية الخاصة بك أكثر جاذبية.

لاستخدام React Google Charts ، عليك أولاً تثبيت المكتبة. يمكنك القيام بذلك باستخدام الأمر التالي:

npm ثَبَّتَ رد فعل جوجل الرسوم البيانية

بمجرد تثبيت المكتبة ، يمكنك إنشاء مخطط أساسي بالشفرة التالية:

يستورد رد فعل ، {useState} من'تتفاعل';
يستورد { جدول } من"تفاعل-جوجل-الرسوم البيانية";
مقدار ثابت ماي تشارت = () => {
مقدار ثابت [البيانات] = useState ([
['سنة', 'مبيعات', 'نفقات'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


يعود (
 العرض = {"400 بكسل"}
 الارتفاع = {"300 بكسل"}
 نوع المخطط ="حاجِز"
 البيانات = {data}
 />
 );
}
يصدّرتقصير ماي تشارت

يستورد هذا الرمز مكتبات المخططات التفاعلية والتفاعلية. ثم يقوم بإنشاء دالة تسمى MyChart تقوم بإرجاع مكون الرسم البياني. يأخذ مكون المخطط مصفوفة البيانات ، التي تحتوي على تسميات وقيم النقاط التي يتكون منها المخطط.

عيوب استخدام 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.