بناء الرسوم البيانية الديناميكية بسرعة على D3 مع Plottable.js

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

لهذا Plottable.js مثل هذه المكتبة القيمة. إنه مشروع مجاني مفتوح المصدر بنيت على رأس D3.js, مما يسهل على أي شخص إنشاء الرسوم البيانية البيانات التفاعلية من الصفر.

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

كل مخطط له مكونه الخاص في Plottable حيث يمكنك نسخ / لصق رمز القالب لإعادة بناء المخطط بنفسك. اعتبارا من هذه الكتابة ، يمكنك الاختيار من بينها 10 أنماط الرسم البياني الرسم, بما في ذلك الرسوم البيانية الشريطية ، الرسوم البيانية الدائرية ، المؤامرات المبعثرة ، والمؤامرات المنطقة.

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

ال مكتبة كاملة متاح على GitHub إذا كنت ترغب في تصفح التعليمات البرمجية المصدر وتنزيل نسخة.

ولكن أفضل طريقة للتعلم هي من خلال القدوة. لهذا السبب يجب أن نلقي نظرة على الرسوم البيانية عينة تشغيل Plottable لنرى كيف يعمل في العمل.

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

لديّ اثنان من المفضلات الشخصية من موقعهما: التقويم Heatmap على غرار مجلس النشاط جيثب و المخططات المتزامنة مع ميزات الاختيار الديناميكي.

إذا لم تستخدم D3.js من قبل ، فستجد صعوبة في تعلم هذه المكتبة. خاصة ، لأنه مكتوب في TypeScript, لذلك ربما تريد اختيار هذا الأمر أيضًا. الرمز النهائي هو جمعت في ES5 جافا سكريبت, لذلك يجب أن العمل في جميع المتصفحات الرئيسية.

إذا كنت على استعداد للغوص في إلقاء نظرة على صفحة الدروس مليئة بالموارد في متناول يدي. سوف تتعلم كل ما تحتاجه للبدء مع Plottable و إنشاء الرسوم البيانية الديناميكية على شبكة الإنترنت من الصفر.