كيفية استخدام Plotly.js لإظهار الرسومات على صفحة الويب؟

Ahmed Ebrahim11 · 27 أبريل 2023

var data = [{x:[phi], y:[h], type: 'curve'}];
var layout = {fileopt : "overwrite", filename : "simple-node-example"};

plotly.plot(data, layout, function (err, msg) {
	if (err) return console.log(err);
	console.log(msg);
});

السلام عليكم لدي استفساران

1- بعد دخولي علي ploty.js كما بالصوره كنت اجرب اظهار والتعديل عل الرسومات واريد معرفه كيفيفه ازالتها اي ان عددها الان 4 ف هذه المكتبه كما بالصوره

2-لماذا لا تظهر الرسمه مع انه بيانات x وy موجوده كما بالرسمه ولماذا لا تظهر عل output ف vscode بدلا من ان اراها عل الموقع

وهذا هو كود لرسمه وphi و h متغيرات وقيمهما تظهر ف الجدول بالاسفل كلا منهم لهم 16 قيمه

تم التعديل في 27 أبريل 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 27 أبريل 2023

بالنسبة لسؤالك الأول، فإذا أردت إزالة الرسومات التي تم إنشاؤها باستخدام Plotly.js ، تستطيع استخدام الأمر التالي:

Plotly.purge()

وهذا الأمر يمكنه إزالة جميع الرسومات من المنطقة النشطة.

أما بالنسبة لسؤالك الثاني، فهناك العديد من الأسباب التي قد تؤدي إلى عدم ظهور الرسمة وهذا يتطلب التحقق من عدة عوامل،

مثلاً، إذا كانت قيم x و y تم تمريرها بشكل صحيح وإذا كان لديك أيضًا عناصر HTML و CSS اللازمة لعرض الرسمة في صفحتك.

حاول استخدام Console log للتحقق من الأخطاء في الكود الذي تم إنشاؤه ويمكنك أيضًا استخدام محرر النصوص المدمج في المستعرض للتحقق من أي أخطاء في HTML أو CSS.

وتأكد من أن كل من phi و h هي مصفوفات من الأعداد التي تحتوي على 16 عنصرًا، حيث يبدو أن عدد العناصر في كلا المصفوفتين يجب أن يكون متساويًا لأنهما تم تمريرهما كقيم x و y في مصفوفة البيانات.

كما يجب التأكد من أن لديك أيضًا الرمز اللازم لعرض الرسمة في صفحتك HTML/CSS، وعلى سبيل المثال، يمكنك إضافة عنصر div إلى صفحتك HTML وتحديد الارتفاع والعرض الخاص بالرسمة، ثم تحديد معرف العنصر الخاص بـ div كـ id للمصفوفة layout ، مثل هذا الشكل:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div id="plotly-div" style="width: 600px; height: 400px;"></div>
	<script>
		var data = [{x:[phi], y:[h], type: 'curve'}];
		var layout = {
			fileopt : "overwrite",
			filename : "simple-node-example",
			// إعدادات أخرى مثل عنوان المخطط وأي إعدادات أخرى يمكن إضافتها هنا
		};
		Plotly.newPlot('plotly-div', data, layout);
	</script>
</body>
</html>

و سيتم إنشاء عنصر div بمعرف plotly-div حيث يتم تعيين العرض والارتفاع. بعد ذلك، يتم إنشاء مصفوفة data ومصفوفة layout ويتم استخدام Plotly.newPlot() لرسم الرسمة داخل العنصر div المحدد بمعرف plotly-div.

وإذا كنت تستخدم الكود في محرر الأكواد VScode فلا تنسى استيرد أو تثبيت المكتبة، ويمكنك استخدام CDN كالتالي:

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

Ahmed Ebrahim11 · 27 أبريل 2023

بتاريخ 5 ساعة قال Mustafa Suleiman:
بالنسبة لسؤالك الأول، فإذا أردت إزالة الرسومات التي تم إنشاؤها باستخدام Plotly.js ، تستطيع استخدام الأمر التالي:
Plotly.purge()
وهذا الأمر يمكنه إزالة جميع الرسومات من المنطقة النشطة.

أما بالنسبة لسؤالك الثاني، فهناك العديد من الأسباب التي قد تؤدي إلى عدم ظهور الرسمة وهذا يتطلب التحقق من عدة عوامل،

مثلاً، إذا كانت قيم x و y تم تمريرها بشكل صحيح وإذا كان لديك أيضًا عناصر HTML و CSS اللازمة لعرض الرسمة في صفحتك.

حاول استخدام Console log للتحقق من الأخطاء في الكود الذي تم إنشاؤه ويمكنك أيضًا استخدام محرر النصوص المدمج في المستعرض للتحقق من أي أخطاء في HTML أو CSS.

وتأكد من أن كل من phi و h هي مصفوفات من الأعداد التي تحتوي على 16 عنصرًا، حيث يبدو أن عدد العناصر في كلا المصفوفتين يجب أن يكون متساويًا لأنهما تم تمريرهما كقيم x و y في مصفوفة البيانات.

كما يجب التأكد من أن لديك أيضًا الرمز اللازم لعرض الرسمة في صفحتك HTML/CSS، وعلى سبيل المثال، يمكنك إضافة عنصر div إلى صفحتك HTML وتحديد الارتفاع والعرض الخاص بالرسمة، ثم تحديد معرف العنصر الخاص بـ div كـ id للمصفوفة layout ، مثل هذا الشكل:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div id="plotly-div" style="width: 600px; height: 400px;"></div>
	<script>
		var data = [{x:[phi], y:[h], type: 'curve'}];
		var layout = {
			fileopt : "overwrite",
			filename : "simple-node-example",
			// إعدادات أخرى مثل عنوان المخطط وأي إعدادات أخرى يمكن إضافتها هنا
		};
		Plotly.newPlot('plotly-div', data, layout);
	</script>
</body>
</html>
و سيتم إنشاء عنصر div بمعرف plotly-div حيث يتم تعيين العرض والارتفاع. بعد ذلك، يتم إنشاء مصفوفة data ومصفوفة layout ويتم استخدام Plotly.newPlot() لرسم الرسمة داخل العنصر div المحدد بمعرف plotly-div.

وإذا كنت تستخدم الكود في محرر الأكواد VScode فلا تنسى استيرد أو تثبيت المكتبة، ويمكنك استخدام CDN كالتالي:
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

قمت بهذا ولكن يخرج Plotly is not defined

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="plotly-div" style="width: 600px; height: 400px"></div>
    <h1>hello Ahmed</h1>
    <div id="hello">hello</div>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

وهذه الاخري لجافا

var data = [{x:[phi], y:[h], type: 'curve'}];
var layout = {fileopt : "overwrite", filename : "simple-node-example"};
Plotly.newPlot('plotly-div', data, layout);

عبدالباسط ابراهيم · 29 أبريل 2023

لحذف الرسومات في Plotly.js، يمكنك استخدام دالة Plotly.deleteTraces التي تقوم بحذف إحدى الرسومات أو عدة رسومات محددة بواسطة مؤشراتها.

على سبيل المثال، إذا كنت تريد حذف كل الرسومات الموجودة، يمكنك استخدام الأمر التالي:

Plotly.deleteTraces('myDiv', [0, 1, 2, 3]);

حيث أن 'myDiv' هو معرف العنصر النائب الذي تريد حذف الرسومات منه، و [0, 1, 2, 3] هي مؤشرات الرسومات التي تريد حذفها. يمكنك تغيير هذه المؤشرات لحذف مجموعة مختلفة من الرسومات.

أما بالنسبة للخطأ Plotly is not defined الذي يظهر عند تطبيق الخطوات كما في التعليق الأول فحاول نقل ال

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

في قسم ال head

كيفية استخدام Plotly.js لإظهار الرسومات على صفحة الويب؟

السؤال

Ahmed Ebrahim11

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Ahmed Ebrahim11

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عبدالباسط ابراهيم

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية