147- دروس جافا سكربت – JS Plotly

Plotly.js هي مكتبة مفتوحة المصدر في JavaScript تُستخدم لإنشاء الرسوم البيانية التفاعلية عالية الجودة. تُعد هذه المكتبة جزءًا من نظام Plotly الذي يتيح للمطورين والعلماء إنشاء تصورات بيانية غنية ومتنوعة بسهولة وفعالية. سوف نستعرض في هذا المقال بعض الخصائص الأساسية لمكتبة Plotly.js مع بعض الأمثلة التوضيحية.

### مميزات Plotly.js

1. **تفاعلية عالية**: توفر Plotly.js تفاعلية متقدمة مثل التكبير والتصغير، وتحريك البيانات، وعرض المعلومات عند التمرير فوق النقاط البيانية.

2. **دعم واسع للرسوم البيانية**: تدعم المكتبة مجموعة كبيرة من أنواع الرسوم البيانية مثل الرسوم الخطية والعمودية والدائرية والخرائط الحرارية والمخططات ثلاثية الأبعاد وغيرها.

3. **تكامل سهل**: يمكن دمج Plotly.js [شركة برمجة مصرية] بسهولة مع تطبيقات الويب المختلفة، سواء كانت مبنية باستخدام React، Angular، أو Vue.js.

4. **تخصيص عالي**: تتيح المكتبة خيارات تخصيص واسعة للنمط والتنسيق، مما يسمح للمطورين بتكييف الرسوم البيانية لتتناسب مع متطلباتهم الخاصة.

### كيفية استخدام Plotly.js

#### 1. إعداد البيئة

يمكنك تضمين Plotly.js في مشروعك عن طريق إضافة رابط إلى مكتبة Plotly من شبكة CDN في ملف HTML:

“`html

// JavaScript code will go here

“`

#### 2. إنشاء رسم بياني بسيط

لنبدأ بإنشاء رسم بياني خطي بسيط:

var trace1 = {
    x: [1, 2, 3, 4, 5],
    y: [10, 15, 13, 17, 21],
    type: 'scatter'
};

var data = [trace1];

Plotly.newPlot('myPlot', data);

هذا المثال ينشئ رسمًا بيانيًا خطيًا باستخدام بيانات بسيطة. محور x يحتوي على الأرقام من 1 إلى 5، ومحور y يحتوي على مجموعة من القيم.

#### 3. إضافة أكثر [شركة برمجة مصرية] من تتبع

يمكنك إضافة عدة تتبعات (أو سلاسل بيانات) إلى نفس الرسم البياني:

var trace1 = {
    x: [1, 2, 3, 4, 5],
    y: [10, 15, 13, 17, 21],
    type: 'scatter',
    name: 'تتبع 1'
};

var trace2 = {
    x: [1, 2, 3, 4, 5],
    y: [16, 5, 11, 9, 15],
    type: 'scatter',
    name: 'تتبع 2'
};

var data = [trace1, trace2];

Plotly.newPlot('myPlot', data);

#### 4. إنشاء مخطط دائري

يمكنك أيضًا إنشاء مخطط دائري بسهولة:

var data = [{
    values: [19, 26, 55],
    labels: ['أ', 'ب', 'ج'],
    type: 'pie'
}];

Plotly.newPlot('myPlot', data);

في هذا المثال، لدينا مخطط دائري بثلاث قطع، مع نسب مئوية محددة لكل منها.

### الخلاصة

Plotly.js هي مكتبة قوية ومرنة تُسهّل إنشاء الرسوم البيانية المعقدة والتفاعلية في تطبيقات الويب. بفضل دعمها الواسع للعديد من أنواع الرسوم البيانية وخيارات التخصيص المتعددة، تُعد اختيارًا مثاليًا للمطورين الذين يسعون لإضافة تصورات بيانات غنية إلى مشاريعهم. سواء كنت تعمل على مشروع شخصي صغير أو نظام تحليلات معقد، فإن Plotly.js توفر الأدوات التي تحتاجها لتحقيق أهدافك بكفاءة وفعالية.