رسم الرسم البياني

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
//Div that will hold the pie chart
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

الخطوة الأخيرة هي رسم المخطط. يجب عليك أولاً إنشاء مثيل من فئة الرسم البياني التي تريد استخدامها، ثم استدعاء الدالة draw() عليها.

إنشاء مثيل للرسم البياني

يستند كل نوع من أنواع الرسوم البيانية إلى فئة مختلفة مُدرَجة في مستندات الرسم البياني. على سبيل المثال، يستند الرسم البياني الدائري إلى الفئة google.visualization.PieChart، ويستند الرسم البياني الشريطي إلى الفئة google.visualization.BarChart، وهكذا. يتم تضمين كل من المخططات الدائرية والمخططات الشريطية في حزمة الرسوم البيانية الأساسية التي حمّلتها في بداية هذا البرنامج التعليمي. ولكن إذا كنت تريد مخططًا جغرافيًا أو مخططًا جغرافيًا على صفحتك، يجب عليك تحميل حزمتي treemap' أو 'geomap' بالإضافة إلى ذلك.

تستخدم دالة إنشاء الرسم البياني من Google معلمة واحدة: مرجع إلى عنصر DOM الذي يمكن من خلاله رسم التمثيل البصري.

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

رسم مخطط

بعد تجهيز البيانات والخيارات، ستكون مستعدًا لرسم الرسم البياني.

يجب أن تحتوي صفحتك على عنصر HTML (عادةً ما يكون <div>) للاحتفاظ بالرسم البياني. يجب عليك تمرير مرجع إلى هذا العنصر في المخطط، لذا عيّن له معرّفًا يمكنك استخدامه لاسترداد مرجع باستخدام document.getElementById(). سيتم استبدال أي عنصر داخل هذا العنصر بالرسم البياني عند رسمه. جرِّب تحديد ما إذا كان عليك تحديد حجم هذا العنصر <div> بشكل صريح، ولكن في الوقت الحالي، حدِّد حجم الرسم البياني في HTML <div>.

يتيح كل رسم بياني طريقة draw() التي تأخذ قيمتين: كائن DataTable (أو كائن DataView) يحتوي على بياناتك، وكائن خيارات الرسم البياني الاختياري. كائن الخيارات غير مطلوب، ويمكنك تجاهله أو تمرير قيمة فارغة لاستخدام الخيارات التلقائية للرسم البياني.

بعد طلب draw()، سيتم رسم الرسم البياني على الصفحة. عليك استدعاء الطريقة draw() في كل مرة تغيّر فيها البيانات أو الخيارات وتريد تعديل الرسم البياني.

إنّ طريقة draw() غير متزامنة، أي أنّها تعرض على الفور، ولكن قد لا يكون المثيل الذي تعرضه متوفّرًا على الفور. في كثير من الحالات، لا بأس بهذا، وسيتم رسم الرسم البياني في النهاية. ومع ذلك، إذا كنت تريد ضبط القيم أو استردادها على رسم بياني بعد استدعاء draw()، يجب الانتظار حتى يعرض الحدث الجاهز، الذي يشير إلى أنّه تتم تعبئته. سنتناول الاستماع إلى الأحداث في الصفحة التالية.

تحديد المشاكل وحلّها

إذا لم يتم عرض الرسم البياني على الصفحة، إليك بعض الأساليب التي قد تساعدك في حلّ المشاكل:

  • ابحث عن الأخطاء الإملائية. تذكر أن جافا سكريبت هي لغة حساسة لحالة الأحرف.
    • استخدام برنامج تصحيح جافا سكريبت. في Firefox، يمكنك استخدام "وحدة تحكّم JavaScript" أو Vennkman Debugger أو إضافة Firebug. في Chrome، يمكنك استخدام أدوات المطوّرين (Shift + Ctl + J).
  • ابحث في مجموعة مناقشة واجهة برمجة تطبيقات Google المرئية. إذا لم تتمكن من العثور على مشاركة تجيب عن سؤالك، فانشر سؤالك على المجموعة مع رابط إلى صفحة ويب توضح المشكلة.

 

 

 

مزيد من المعلومات