اذهب إلى المحتوى
  • 0

Sankey Diagram with javascript

Ahmed Ebrahim11

السؤال

Recommended Posts

  • 0

نعم يمكن استخدام الجافاسكريبت لذلك، بحيث يتم استخدام العنصر canvas في HTML كحاوية للرسومات التي يتم إنشائها والتحكم بها من خلال الجافاسكريبت وتتيح لك رسم النقاط والخطوط وجميع الأشكال الهندسية دائرة، مربع، مستطيل،..إلخ أو أي شكل هندسي آخر تبعاً لإحداثيات النقاط والوصل فيما بينها. مثال:

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script> 

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

يمكنك الاطلاع أكثر على canvas والتوابع الرسومية المتاحة من خلال البحث على الانترنت. ويوجد أيضاً بعض الطرق الأخرى للرسم من خلال استخدام عنصر SVG أو مكتبات إضافية متاحة للتعامل مع الرسوم والتحريك.

شرح عن العنصر canvas في ويكي حسوب: https://wiki.hsoub.com/HTML/canvas

مقال مفيد عن canvas:

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

نعم يمكنك فعل ذلك، إذا كنت تقصد الشكل المرفق فقط، ولا استطيع بناء الـ diagram من اجلك ولكن يمكنك بنائه باستخدام الـ html مثل svg واضافة التعديلات عليه باستخدام js و css.

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

https://codesandbox.io/s/bpmn-js-properties-panel-forked-648fb

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

بينما هناك مكتبات جاهزة تسهل عمل هذه ال diagram مثل 

  • amCharts : حيث يوجد قسم خاص لتنفيذ ال Sankey Diagram
  •  مكتبة D3 : هي مكتبة كبيرة خاصة بالجافاسكريبت لهذه الرسومات
  • كما يوجد google charts

الروابط السابقة تحتوي على أمثلة على الSankey Diagram لذلك هي الحل المناسب لك حالياً

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...