هناك شيء سحري حول الرسوم البيانية. يكشف منحنى المنحنى على الفور عن الوضع برمته - تاريخ تطور الوباء أو الذعر أو فترة الازدهار. هذا الخط ينير ويثير الخيال ويقنع.
- هنري. د. هوبارد
يزداد حجم البيانات التي تحتاجها للعمل باستمرار. وكلما زادت المعلومات ، زادت صعوبة معالجتها. لهذا السبب أصبح موضوع تخيل البيانات شائعًا بشكل خاص الآن - في شكل رسوم بيانية ومخططات ولوحات معلومات ويفضل أن يكون تفاعليًا. يتيح العرض المرئي للبيانات لنا ، نحن الأشخاص ، قضاء وقت وجهد أقل في عرضها وتحليلها وفهمها ، وكذلك في اتخاذ القرارات الصحيحة المستنيرة بناءً على ذلك.
من غير المحتمل أن ينكر أي شخص أن جافا سكريبت في شبكة الويب الحديثة HTML5 هي التكنولوجيا الأكثر عالمية وبسيطة لتصور البيانات. لذا ، إذا كنت منخرطًا في تطوير الواجهة الأمامية ، فمن الأرجح أنك إما تعاملت بالفعل مع إنشاء مخططات JS ، أو ستواجه هذا في المستقبل (القريب).
هناك
العديد من مكتبات JavaScript لإنشاء الرسوم البيانية والمخططات ، ولكل منها (مثل أي أدوات أخرى) مزاياها وعيوبها. لجعل حياتك أسهل ، قررت أن أتحدث عن أولئك الذين أحبهم أكثر. أعتقد أن المكتبات العشر التالية هي أفضل مكتبات JS لإنشاء الرسوم البيانية ، ويمكنها حقًا المساعدة في حل أي مهمة تقريبًا لتصور البيانات. دعنا نذهب إلى القائمة معا وتأكد من أنك تعرفهم بشكل أساسي على الأقل وأنك لم تغفل عن أي مكتبة جيدة قد تكون مفيدة في المشاريع الكبيرة الحالية أو المستقبلية.
حسنًا ، لنبدأ: إليك أفضل مكتبات JS لتصور البيانات!
amCharts
amCharts هي إحدى مكتبات JavaScript المفيدة لأولئك الذين يبحثون عن حل بسيط ومرن في الوقت نفسه لتصور البيانات.
الميزات الرئيسية
- العديد من أنواع الرسوم البيانية المختلفة ، بما في ذلك الخرائط التفاعلية ومخططات جانت.
- القدرة على تحليل البيانات "بعمق" (البحث) وغيرها من الخيارات التفاعلية المصممة بشكل جيد.
- الوثائق التي تصف جميع الطرق اللازمة مكتوبة بشكل جيد ، على الرغم من أن ذوقي ، ليست مريحة للغاية للاستخدام.
- الرسوم المتحركة بارد من الرسوم البيانية.
- التكامل مع React ، الزاوي ، Vue ، Ember ، إلخ.
- البرنامج المساعد الجاهزة لورد.
- تصدير المخططات إلى صورة أو ملف PDF.
- رسومات حية ، تخصيص كامل ، ميزات خاصة وفقًا لمعايير W3C.
- الدعم الفني الكامل لجميع المستخدمين والأولوية للعملاء مع ترخيص.
- العملاء: Microsoft ، Amazon ، Ebay ، NASA ، Samsung ، Yandex ، AT&T ، إلخ.
تكلفة
العلامة التجارية مع الإشارة في النسخة المجانية. لإزالة العلامة التجارية ، تحتاج إلى شراء ترخيص مدفوع (من 180 دولارًا) ، بالإضافة إلى توفير إمكانية الوصول إلى دعم الأولوية.
تعرف على المزيد حول amCharts
AnyChart
AnyChart هي مكتبة JS متطورة وخفيفة الوزن ومتعددة الوظائف لتصور البيانات مع التقديم في SVG / VML. يسمح لمطوري الويب بإنشاء جميع أنواع الرسوم البيانية والرسوم البيانية لاتخاذ مزيد من القرارات بناءً عليها.
الميزات الرئيسية
- أكثر من 80 نوعًا من الرسوم البيانية ، بما في ذلك المخططات التقليدية ومخططات الأسهم والجغرافيا الجغرافية (الخرائط) ، بالإضافة إلى مخططات جانت ومخططات شبكة بيرت.
- هناك العديد من الخيارات لتحميل البيانات: XML ، JSON ، CSV ، JS API ، جداول بيانات Google ، جداول HTML.
- القدرة على "الخوض" في البيانات الموجودة على المخطط (التدرج).
- المؤشرات الفنية للتحليل والشروح الفنية (أدوات الرسم) "خارج الصندوق".
- وثائق شاملة ووصف API ، ودعم استجابة.
- التكامل مع Angular و Oracle APEX و React و Elasticsearch و Vue.js و Android و iOS ، إلخ. لمطوري التطبيقات ولوحات المعلومات في Qlik ، هناك امتداد خاص جاهز لـ Qlik Sense.
- هناك الكثير من الأمثلة الجاهزة للرسومات البيانية والمخططات ولوحات المعلومات ، بالإضافة إلى صندوق رمل خاص به مزود برمز الإكمال التلقائي.
- دعم للمتصفحات القديمة.
- تصدير البيانات في أشكال مختلفة ، بما في ذلك تقارير PDF ؛ jpg ، png ، svg image ؛ ملفات بيانات Excel (XLSX) أو CSV مع الرسوم البيانية.
- العملاء: Oracle و Microsoft و Citi و Samsung و Nokia و AT&T و Ford و Volkswagen و Lockheed Martin ، إلخ.
تكلفة
إصدار العلامة المائية مجاني. للتخلص من العلامة التجارية وإتاحة الفرصة لاستخدام AnyChart في المشاريع التجارية ، تحتاج إلى شراء ترخيص (من 49 دولارًا).
تعرف على المزيد حول AnyChart
Chart.js
Chart.js هي مكتبة جافا سكريبت بسيطة ومرنة للغاية في نفس الوقت لتصور البيانات ، وهي شائعة بين مصممي الويب ومطوري البرامج. إنه حل أساسي ممتاز لأولئك الذين لا يحتاجون إلى مجموعة واسعة من أنواع الرسوم البيانية والإعدادات الفردية ، ولكنهم يحتاجون إلى ما يكفي لجعل الرسوم البيانية تبدو أنيقة وواضحة وغنية بالمعلومات.
الميزات الرئيسية
- 8 أنواع من الرسوم البيانية والرسوم البيانية: الخطية (الخط) ، الخطية مع المناطق (المنطقة) ، حكمت (بار) ، دائرية (فطيرة) ، البتلة "الرادار" (الرادار) ، القطبية (القطبية) ، الفقاعة (الفقاعة) والمؤامرة مبعثر ( مبعثر).
- يمكن تخصيص جميع أنواع الرسوم البيانية وتزويدها بالرسوم المتحركة ، وكلها قابلة للتكيف عند العمل على الشبكة.
- يمكن تحسين الوظيفة من خلال استخدام الإضافات.
- وثائق جيدة.
- الدعم من خلال تجاوز سعة المكدس.
- دعم لمتصفحات IE9 +.
تكلفة
مكتبة مجانية مفتوحة المصدر. نشرت تحت رخصة معهد ماساتشوستس للتكنولوجيا.
تعرف على المزيد حول Chart.js
Chartist.js
Chartist.js هي مكتبة JS بسيطة ومفتوحة المصدر والتي يمكن استخدامها أيضًا لإنشاء رسوم بيانية ورسوم بيانية تكيفية أنيقة. بشكل عام ، إنها مناسبة تمامًا لأولئك الذين يحتاجون فقط إلى المخططات الأولية للخط أو شريط أو دائري ولا يحتاجون إلى الكثير فيما يتعلق بتصور البيانات. مظهر جميل ، وليس هناك حاجة لعدد كبير من جميع أنواع الميزات.
الميزات الرئيسية
- فقط 3 أنواع من الرسوم البيانية: الخط ، بار ، فطيرة.
- الرسوم المتحركة كبيرة.
- تحتوي وثائق واجهة برمجة التطبيقات (API) على جميع المعلومات الضرورية ، ولكنها ليست ملائمة للغاية لاستخدامها (الاستعداد للتمرير كثيرًا).
- للسماح باستخدام المكونات الإضافية لتوسيع الوظيفة.
- يستخدم SVG لرسم الرسوم البيانية.
- دعم للمتصفحات القديمة.
تكلفة
مفتوح المصدر ، واستخدام مجاني لأي غرض من الأغراض.
تعلم المزيد عن Chartist.js
D3.js
D3.js عبارة عن
مكتبة قوية لتصور بيانات JavaScript مفتوحة المصدر. لديه أكثر من 20 ألف شوك على جيثب. في جوهره ، يشبه D3 إطار عمل أكثر منه مكتبة. العمل معها ليس بالأمر السهل ، خاصة في البداية. ولكن هناك العديد من موارد المعلومات المفيدة على D3. وفي النهاية ، بمساعدة هذه المكتبة ، يمكنك إنشاء تصورات أصلية مذهلة وأي رسومات من البداية ، مما يجعل D3 أداة جديرة بالاهتمام حقًا.
الميزات الرئيسية
- يدعم أنواعًا عديدة من الرسوم البيانية ، أكثر من الغالبية العظمى من مكتبات JavaScript الأخرى (بما في ذلك ، على سبيل المثال ، مخطط فورونوي).
- يستغرق وقتا طويلا لإتقان. أقل وضوحًا وضوحًا من بعض المكتبات التجارية في القائمة (على سبيل المثال ، AnyChart). تعويض من قبل عدد كبير من الدروس و API رائع حقا.
- يجمع بين مكونات التصور قوية مع النهج القائم على البيانات لمعالجة DOM.
- تصحيح الأخطاء بسهولة باستخدام أداة متصفح.
- الكثير من الأمثلة.
- وظائف منحنى الجيل.
- السحب والإفلات واجهة المستخدم الرسومية.
تكلفة
D3 هي مكتبة مفتوحة المصدر لإنشاء رسوم بيانية ومخططات ، وهي مجانية تمامًا للاستخدام لأي غرض من الأغراض.
تعلم المزيد عن D3.js
FusionCharts
FusionCharts هي مكتبة جيدة أخرى لبناء الرسوم البيانية والرسوم البيانية التفاعلية ، مع مئات من الأمثلة الجاهزة. تدعم مخططات FusionCharts كلاً من بيانات JSON و XML. التقديم - عبر HTML5 / SVG و VML.
الميزات الرئيسية
- العشرات من أنواع المخططات ، ثنائية الأبعاد وثلاثية الأبعاد ، وأكثر من 950 خريطة تغطي جميع القارات.
- الرسوم المتحركة والخرائط التفاعلية بالكامل.
- خادم API ل ASP.NET ، PHP ، روبي أون ريلز.
- متوافق مع jQuery ، Angular ، PHP ، ASP.NET ، React Native ، Django ، React ، Ruby on Rails ، Java ، إلخ.
- دليل المستخدم مفصل إلى حد ما ووصف API.
- العديد من الأمثلة على المخططات ولوحات المعلومات.
- دعم للمتصفحات القديمة.
- تصدير إلى PNG و JPG و PDF.
- الدعم - من خلال قاعدة المعرفة ومنتدى المجتمع.
- دعم أولوية غير محدود للمستخدمين الذين يشترون ترخيصًا.
- العملاء: Apple و IBM و Google و Intel و Microsoft و PayPal و Oracle و Adobe وغيرها.
تكلفة
مجاني للاستخدام غير التجاري. تراخيص مدفوعة للاستخدام التجاري (من 497 دولار).
تعرف على المزيد حول FusionCharts
خرائط جوجل
تعد مخططات Google خيارًا ممتازًا لتلك المشاريع التي تفضل فيها بساطة المخططات واستقرارها على إعدادات التخصيص المعقدة التفصيلية.
الميزات الرئيسية
- تقديم الرسومات في HTML5 / SVG و VML.
- العديد من الأمثلة على الرسوم البيانية ، الرسوم البيانية ، لوحات المعلومات.
- جميع الرسوم البيانية تفاعلية ، بعضها يمكن أن يكون تقريبًا وعمومًا.
- وثائق كاملة.
- دعم للمتصفحات القديمة.
- الدعم عبر الأسئلة الشائعة و GitHub والمنتدى.
تكلفة
رخصة حرة ، ولكن شفرة المصدر ليست مفتوحة. لا يسمح لك باستضافة ملفات Google JS على الخادم الخاص بك ، لذلك قد لا يكون مناسبًا لك إذا كنت تعمل مع بيانات حساسة.
تعرف على المزيد حول مخططات Google
Highcharts
تعد
Highcharts واحدة من مكتبات JavaScript الأكثر تنوعًا وشعبية لإنشاء الرسوم البيانية والمخططات في HTML5 ، مع التقديم في SVG (VML). إنه خفيف الوزن ، ويدعم مجموعة واسعة من أنواع مختلفة من المرئيات ويوفر أداءً عاليًا.
الميزات الرئيسية
- يستخدم جافا سكريبت النقي. يمكن تنزيل البيانات من الخارج.
- جدير بالوثائق ووثائق API الوصف ، وحالات المستخدم.
- التفاعل ، بما في ذلك الحفر (القدرة على تحليل البيانات "في العمق").
- يمكن استخدامها مع React ، Angular ، Meteor ، .NET ، iOS ، إلخ.
- تصدير إلى تنسيقات PNG و JPG و PDF و SVG.
- دعم لمستخدمي الإصدار المجاني من خلال المنتدى و Stack Overflow. يتوفر البريد الإلكتروني المتميز ودعم Skype فقط للمستخدمين التجاريين الذين لديهم الترخيص المناسب.
- العملاء: Visa و Yahoo! و Facebook و Twitter و Groupon و Nokia و Ericsson و Mastercard و Yandex وما إلى ذلك.
تكلفة
مجاني للاستخدام غير التجاري. للاستخدام التجاري ، يجب عليك شراء ترخيص (من 50 دولارًا).
تعرف على المزيد حول Highcharts
Plotly.js
Plotly.js هي مكتبة جافا سكريبت عالية المستوى ومجانية ومفتوحة المصدر. مبني على D3.js و WebGL. يمكن استخدامه لإنشاء العديد من الأنواع المختلفة لتصور البيانات ، بما في ذلك ، على سبيل المثال ، الرسوم البيانية الإحصائية ثلاثية الأبعاد.
الميزات الرئيسية
- 20 نوعًا من الرسوم البيانية والمخططات التي يمكن تضمينها في الموقع أو استخدامها لإنشاء عروض تقديمية ديناميكية.
- يتم استخدامه كمكتبة قائمة على المستعرض لـ Python، R، MATLAB ، لاستخلاص الرسوم البيانية في بنية JSON تعريفية.
- وثائق API واسعة النطاق.
- الرسوم المتحركة لطيفة.
- يستخدم الرد.
- تصدير المخططات إلى PNG و JPG. يتوفر التصدير إلى EPS و SVG و PDF عن طريق الاشتراك.
- العديد من الأمثلة الجاهزة.
- يمكن أن تعمل مع جداول البيانات إكسل أو مباشرة مع قاعدة البيانات الخاصة بك.
- منتدى الدعم.
تكلفة
مكتبة مجانية مفتوحة المصدر.
تعلم المزيد عن Plotly.js
ZingChart
ZingChart هي أداة مفيدة لإنشاء مخططات تفاعلية وقابلة للتكيف. هذه مكتبة سريعة ومرنة تجعل من السهل للغاية التعامل مع البيانات الضخمة وإنشاء رسوم بيانية بكميات كبيرة من البيانات.
الميزات الرئيسية
- يدعم أكثر من 30 نوعا من الرسوم البيانية والرسوم البيانية.
- قابلة للتخصيص بالكامل ، مع إعدادات التصميم la CSS.
- متوافق مع jQuery ، Angular ، Node.js ، PHP ، إلخ.
- العمل مع البيانات في الوقت الحقيقي ، مما يجعل تقديم مجموعات البيانات بسرعة من أي حجم.
- يمكن تحميل البيانات عبر كائنات JS و JSON و CSV و PHP و AJAX و MySQL.
- وثائق API مفصلة وقابلة للقراءة إلى حد ما.
- دعم مجاني ومميز من خلال مركز مساعدة ZingChart و Stack Overflow والبريد الإلكتروني والدردشة.
- العملاء: Microsoft و Boeing و Adobe و Apple و Cisco و Google و Alcatel ، إلخ.
تكلفة
يوفر الترخيص ذو العلامة التجارية حق الوصول الكامل إلى مكتبة ZingChart مجانًا. للاستخدام التجاري ، مطلوب ترخيص مدفوع (من 199 دولار).
تعرف على المزيد حول ZingChart
استنتاج
لذلك ، لقد أدرجت أفضل مكتبات JavaScript لبناء الرسوم البيانية والمخططات ، على الأقل تلك المكتبات التي أعتبرها من أعلى المستويات. سيكون من الصعب للغاية مقارنة هذه العناصر معًا بشكل شامل ، مع مراعاة جميع المعلمات تمامًا. لكل منها إيجابيات وسلبيات ، ويعتمد الاختيار إلى حد كبير على مهارات المطور ، وكذلك المهمة المحددة.
بالطبع ، هناك بعض الميزات ، والميزات التي تجعل مكتبة واحدة أسرع ، أو أجمل من حيث التصميم ، أو أكثر مرونة من غيرها. ولكن ، في النهاية ، ليس من المهم تحديد المكتبات الموجودة في القائمة ، لأن الأفضل في النهاية هو الأكثر تلبيًا لمتطلباتك المحددة كجزء من مهمة واحدة.
نصيحتي هي التعرف على كل هذه المكتبات الرائدة على الأقل بشكل أوثق: عندما تحتاج إلى مخططات JS لتصور البيانات في مشروع معين ، فمن المحتمل جدًا أن واحدة أو أكثر منها ستناسبك بشكل أفضل. إذا كنت ترغب في التعامل مع القائمة بشكل أكثر أصالة ، فافعل ذلك
على سبيل المقارنة مع ويكيبيديا .
إذا كنت بحاجة إلى تصور البيانات على الخرائط التفاعلية ، حيث تتسم الاتجاهات الجغرافية والعلاقات والعلاقات والتدفقات وما إلى ذلك بأهمية قصوى ، اقرأ مقالتي السابقة عن
أفضل مكتبات جافا سكريبت لتصور البيانات الجغرافية في شكل خرائط (توجد
ترجمة إلى الروسية على Habré) .
أتمنى لك يومًا سعيدًا والتمتع بتصور البيانات باستخدام جافا سكريبت!
هذه هي ترجميتي لأفضل مكتبات جافا سكريبت لتخطيط كل بيانات تحتاج إلى مقال نشرته سابقًا على Hacker Noon .