المخطط الشريطي Plotly: مخططات شريطية تفاعلية باستخدام Python و JavaScript

ما هو Plotly؟

Plotly هي مكتبة تصور تفاعلية متاحة لـ Python و JavaScript و R ولغات أخرى. تعرض المخططات في المتصفح باستخدام D3.js و WebGL، مما يتيح تفاعلية غنية حتى مع مجموعات البيانات الكبيرة. توفر Plotly Express (Python) واجهة برمجة تطبيقات عالية المستوى لإنشاء المخططات بسرعة، بينما يوفر plotly.graph_objects تحكمًا دقيقًا.

• تفاعلي افتراضيًا - تلميحات تمرير، تكبير، تصغير، تحديد
• أصلي للويب - يتم عرضه بشكل جميل في المتصفحات ودفاتر Jupyter
• متعدد المنصات - Python، JavaScript، R، Julia، MATLAB
• تكامل Dash - بناء لوحات معلومات ويب كاملة باستخدام مخططات Plotly
• خيارات التصدير - صور ثابتة (PNG، SVG، PDF) أو HTML تفاعلية

مخطط شريطي أساسي باستخدام Plotly Express (Python)

Plotly Express هي أسرع طريقة لإنشاء مخططات Plotly في Python. يتطلب المخطط الشريطي سطرًا واحدًا فقط من التعليمات البرمجية بعد استيراد البيانات وإعدادها. إليك مثال بسيط: ```python import plotly.express as px data = {'Category': ['A', 'B', 'C', 'D'], 'Values': [23, 45, 56, 78]} fig = px.bar(data, x='Category', y='Values', title='مخطط شريطي أساسي') fig.show() ```

• px.bar() ينشئ أشرطة رأسية افتراضيًا
• يحدد x و y عمود الفئة وعمود القيمة
• fig.show() يعرض المخطط التفاعلي
• يعمل في دفاتر Jupyter و Colab و VS Code والنصوص البرمجية
• أضف color='اسم_العمود' لأشرطة ملونة حسب الفئة

مخطط شريطي أفقي في Plotly

اقلب الاتجاه عن طريق تعيين orientation='h' ومبادلة تعيينات x و y. تعمل المخططات الشريطية الأفقية بشكل أفضل لأسماء الفئات الطويلة أو عندما يكون لديك العديد من الفئات. ```python fig = px.bar(data, x='Values', y='Category', orientation='h', title='مخطط شريطي أفقي') fig.show() ```

مخطط شريطي مجمع (متجاور)

اعرض سلاسل متعددة جنبًا إلى جنب باستخدام معامل اللون. يقوم Plotly تلقائيًا بتجميع الأشرطة لكل فئة. ```python import plotly.express as px df = px.data.medals_long() # مجموعة بيانات نموذجية fig = px.bar(df, x='nation', y='count', color='medal', barmode='group', title='الميداليات الأولمبية حسب الدولة') fig.show() ```

• barmode='group' يضع الأشرطة جنبًا إلى جنب
• يقسم معامل اللون البيانات إلى سلاسل شريطية منفصلة
• يصبح كل لون عنصرًا في وسيلة الإيضاح
• يُظهر التمرير تفاصيل الشريط الفردي

مخطط شريطي مكدس باستخدام Plotly

غيّر barmode إلى 'stack' لإنشاء مخططات شريطية مكدسة. السلوك الافتراضي عند استخدام اللون بدون تحديد barmode هو التكديس. ```python fig = px.bar(df, x='nation', y='count', color='medal', barmode='stack', title='الميداليات الأولمبية المكدسة') fig.show() ```

تخصيص المخططات الشريطية في Plotly

يقدم Plotly تخصيصًا واسعًا من خلال طريقتَي update_layout() و update_traces(). يمكنك تعديل الألوان والخطوط والمحاور والتعليقات التوضيحية والمزيد.

• fig.update_layout(title_font_size=24) - ضبط تنسيق العنوان
• fig.update_traces(marker_color='blue') - تغيير ألوان الأشرطة
• fig.update_xaxes(tickangle=45) - تدوير تسميات المحور
• color_discrete_sequence=['#1f77b4', '#ff7f0e'] - لوحة ألوان مخصصة
• fig.add_annotation() - إضافة تعليقات توضيحية نصية في أي مكان

مخطط شريطي Plotly في JavaScript

barChartGuides.guides.plotly-bar-chart.content.sections.6.content

إضافة التفاعلية والرسوم المتحركة

عزز تجربة المستخدم باستخدام الرسوم المتحركة والميزات التفاعلية التي يتيحها Plotly افتراضيًا أو بتكوين بسيط.

• تلميحات التمرير - مُفعّلة افتراضيًا، قم بتخصيصها باستخدام hovertemplate
• أحداث النقر - استخدم حدث plotly_click في JavaScript لإجراءات مخصصة
• الرسوم المتحركة - أضف معامل animation_frame لانتقالات متحركة
• شريط تمرير النطاق - أضف rangeslider لاستكشاف السلاسل الزمنية
• أزرار / قوائم منسدلة - أضف عناصر تحكم واجهة المستخدم باستخدام updatemenus

متى تستخدم Plotly مقابل ChartGen.ai

يتفوق Plotly للمطورين الذين يقومون ببناء لوحات معلومات تفاعلية أو تطبيقات بيانات حيث يكون التحكم البرمجي ضروريًا. ومع ذلك، للتصورات السريعة أو عندما لا تريد كتابة التعليمات البرمجية، يوفر ChartGen.ai مسارًا أسرع للمخططات الاحترافية.

• اختر Plotly عندما: بناء تطبيقات / لوحات معلومات، تحتاج إلى تحديثات برمجية، تتطلب تفاعلية معقدة
• اختر ChartGen.ai عندما: مخططات سريعة لمرة واحدة، تفضل عدم البرمجة، تحتاج إلى تصدير فوري، عروض تقديمية للعملاء
• ميزة ChartGen.ai: الصق البيانات، احصل على المخطط في ثوانٍ - بدون إعداد مكتبة
• ميزة Plotly: تحكم كامل، رسوم متحركة، معالجات نقر مخصصة