أساليب رسم المخططات

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

المحتويات

  1. chart.draw()
  2. ChartWrapper
  3. DrawChart()
  4. مزيد من المعلومات

chart.draw()

هذه هي الطريقة الأساسية التي يتناولها مثال Hello Chart! في هذا المستند. الخطوات الأساسية:

  1. تحميل برنامج تحميل مكتبة gstatic ومؤثرات عرض مرئية من Google ومكتبات المخططات
  2. إعداد بياناتك
  3. إعداد أي خيارات للرسم البياني
  4. إنشاء مثيل لفئة الرسم البياني، وتمرير مؤشر إلى عنصر حاوية الصفحة
  5. يمكنك التسجيل بشكل اختياري لتلقّي أي أحداث في الرسم البياني. إذا كنت تنوي استدعاء الطرق في الرسم البياني، يجب الاستماع إلى الحدث "جاهز".
  6. يمكنك الاتصال بالرقم chart.draw()، مع تمرير البيانات والخيارات.

المزايا:

  • يمكنك التحكم بشكل كامل في كل خطوة من خطوات العملية.
  • ويمكنك التسجيل للاستماع إلى جميع الأحداث المعروضة في الرسم البياني.

العيوب:

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

مثال:

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

      // 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 our data table.
        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.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

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

ChartWrapper

ChartWrapper هي فئة ملائمة تتيح لك تحميل جميع مكتبات الرسوم البيانية المناسبة لك، كما تبسِّط عملية إرسال طلبات البحث إلى مصادر بيانات أدوات الرسومات البيانية.

المزايا:

  • تعليمات برمجية أقل بكثير
  • تحميل كل مكتبات الرسوم البيانية المطلوبة لك
  • تسهِّل هذه الميزة عملية الاستعلام عن مصادر البيانات من خلال إنشاء كائن Query ومعالجة طلب الاستدعاء نيابةً عنك.
  • مرِّر معرف عنصر الحاوية ويستدعي getElementByID لك.
  • يمكن إرسال البيانات بتنسيقات متنوعة: كمصفوفة من القيم أو كسلسلة JSON حرفية أو معرِّف DataTable.

العيوب:

  • لا تنشر الدالة ChartWrapper حاليًا سوى أحداث التحديد والجاهز والخطأ. للاطّلاع على أحداث أخرى، عليك الحصول على اسم معرِّف في الرسم البياني الملفوف والاشتراك في الأحداث فيه. راجِع مستندات ChartWrapper للحصول على أمثلة.

أمثلة:

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

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

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

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

وبالاقتران مع التحميل التلقائي، يمكن أن يؤدي ذلك إلى إنشاء رموز برمجية مضغوطة للغاية:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

استخدام محرر المخطط مع ChartWrapper

يمكنك استخدام مربّع حوار "محرِّر الرسم البياني" المضمّن في جداول بيانات Google لتصميم رسم بياني، ثم طلب سلسلة ChartWrapper المتسلسلة التي تمثّل الرسم البياني. يمكنك بعد ذلك نسخ هذه السلسلة ولصقها واستخدامها كما هو موضّح أعلاه في ChartWrapper.

يمكنك تضمين محرّر الرسم البياني في صفحتك الخاصة وعرض الطرق للمستخدمين للاتصال بمصادر بيانات أخرى وعرض سلسلة ChartWrapper. اطّلِع على مستندات ChartEditor المرجعية للحصول على مزيد من المعلومات.

 

DrawChart()

DrawChart هي طريقة ثابتة عمومية تلتف حول ChartWrapper.

المزايا:

  • مثل ChartWrapper، لكن استخدامه أقصر قليلاً.

العيوب:

  • لا يؤدي هذا الإجراء إلى إرجاع مؤشر إلى برنامج تضمين وبالتالي لن تتمكن من معالجة أي أحداث.
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

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