ادخال القيم من خلال واجهة الويب HTML ثم بناء مخطط بيانات باستخدام JavaScript و مكتبة charts

Belkacem Rezzouk · 12 فبراير 2022

في العادة ادخل القيم من خلال الواجهة و استعيدهم في الكود بطريقة عادية ولكن اليوم لم استطع
لمادا الطريقة الاولى تعمل و الثانية لا ؟
شكرا مسبقاا.

الشيفرة:

<!doctype html>
<html>
  <head>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js" type="text/javascript"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-pert.min.js" type="text/javascript"></script>
    <style>
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container">
			<h1>yoo</h1>
<form>
	<fieldset>
		
		<table style="border: 1;">
			
			<th></th>
				
				<tr>
					
					<td><input type="text"   value="1"  name="" id="task11"></td>
					<td><input type="text"   name="" id="task12"></td>
					<td><input type="number" name="" id="task13"></td>
					<td><input type="text"   name="" id="task14"></td>
				</tr>
				
			<th></th>
				
				<tr>	
					
					<td><input type="text"   value="2" name="" id="task21"></td>
					<td><input type="text"   name="" id="task22"></td>
					<td><input type="number" name="" id="task23"></td>
					<td><input type="text"   name="" id="task24"></td>
				</tr>
			
			<th></th>
				
				<tr>
					<td><input type="text"   value="3" name="" id="task31"></td>
					<td><input type="text"   name="task32" id="task32"></td>
					<td><input type="number" name="task33" id="task33"></td>
					<td><input type="text"   name="task34" id="task34"></td>
				</tr>
			
			<th></th>
				
				<tr>
					<td><input type="text"   value="4" name="" id="task41"></td>
					<td><input type="text"   name="task42" id="task42"></td>
					<td><input type="number" name="" id="task43"></td>
					<td><input type="text"   name="task44" id="task44"></td>
				</tr>
			
		</table>


<br>

<button type="button" onclick="jcp()">Insert</button> 

<button type="button" onclick="chart.draw()">Result</button>


	</fieldset>
</form>
		</div>
		
    <script>

//function jcp(){
	
		//console.log(data);}
		
	anychart.onDocumentReady(function () {
   
			

		



  var task11 = document.getElementById('task11').value;
	var task12 = document.getElementById("task12").value;
	var task13 = document.getElementById("task13").value;
	var task14 = document.getElementById("task14").value;

  var task21 = document.getElementById("task21").value;
	var task22 = document.getElementById("task22").value;  
  var task23 = document.getElementById("task23").value;
  var task24 = document.getElementById("task24").value;

  var task31 = document.getElementById("task31").value;
  var task33 = document.getElementById("task33").value;
	var c = task33;  
	var task32 = document.getElementById("task32").value;
  var task34 = document.getElementById("task34").value;

  var task41 = document.getElementById("task41").value;
  var task43 = document.getElementById("task43").value;
	var d = task43;
	var task42 = document.getElementById("task42").value;
  var task44 = document.getElementById("task44").value;

	var data = [{id : task11,duration : task13, name: task12},
	            {id : task21,duration : task23, name: task22},
							{id : task31,duration : task33, name: task32,dependsOn: task21},
							{id : task41,duration : task43, name: task42}
		];

		// data
		/*var data = [
		    {id: "1", duration: 1, name: "Task A"},
		    {id: "2", duration: 4, name:"TASK B" },
		    {id: "3", duration: 3, name: "Task C"},
		    {id: "4", duration: 1, name: "Task D"},
		    {id: "5", duration: 2, name: "Task AD", dependsOn: ["1", "4"]},
		    {id: "6", duration: 2, name: "Task BC", dependsOn: ["2", "3"]}
		];*/
		//console.log(data.duration);

		// create a PERT chart
		chart = anychart.pert();

		// set chart data
		chart.data(data, "asTable");

		// set the title of the chart
		chart.title("PERT Chart");

		// set the container id for the chart
		chart.container("container");

		// initiate drawing the chart
		 
	});
    </script>
  </body>
</html>

صور:

Wael Aljamal · 12 فبراير 2022

بتاريخ 11 دقائق مضت قال Nassim Kq:

تفضل

nvessaie.html

شكرا لك،

بعد تطبيق الملاحظة و فصل قراءة البيانات لتابع منفصل، تم عرض ملف chart بدون ظهور أخطاء

والملف:

nvessaie.html

Wael Aljamal · 12 فبراير 2022

أرجو إرفاق الشيفرة البرمجية لنتستطيع متابعة المشكلة..

كتابة الشيفرة بهذه الطريقة، يتم تنفيذها مباشرة مع تحميل الصفحة فلذلك سوف تكون القيم فارغة لأن قراءة القيم تبدو غير مرتبطة بحدث submit أو. تنفيذ دالة onclick
استخراج القيم من النموذج و تعبئة data يجب أن تتم ضمن دالة يتم تنفيذها لاحقا، مثل ضع زر button و بالخاصية onclick استدعي دالة فيها الشيفرات السابقة

Wael Aljamal · 12 فبراير 2022

بتاريخ 4 دقائق مضت قال Nassim Kq:

حسننا اخي تفضل كود بسيط

لا أستطيع التأكد من الحل إلا بعد الحصول على الملف و التجريب.

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

هل تعمل chat.draw؟ لأنك قمت بتعريفها لاحقاً و ضمن دالة أخرى.

أرجو ضغط الملف و إرفاقه

Belkacem Rezzouk · 12 فبراير 2022

تفضل nvessaie.html

ادخال القيم من خلال واجهة الويب HTML ثم بناء مخطط بيانات باستخدام JavaScript و مكتبة charts

السؤال

Belkacem Rezzouk

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

Recommended Posts

Wael Aljamal

Wael Aljamal

Wael Aljamal

Belkacem Rezzouk

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية