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

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

المحتويات

  1. chart.draw()
  2. مغلّف الرسم البياني
  3. DrawChart()
  4. مزيد من المعلومات

schema.draw()

هذه هي الطريقة الأساسية الواردة في مثال على مخطّط الترحيب! في هذه المستندات. الخطوات الأساسية:

  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 هي فئة مناسبة تعالج تحميل جميع مكتبات الرسومات البيانية المناسبة لك وتسهّل أيضًا إرسال طلبات البحث إلى مصادر بيانات أدوات الرسم البياني.

المزايا:

  • رمز أقل بكثير
  • تحميل جميع مكتبات الرسومات البيانية المطلوبة
  • يمكنك تسهيل الاستعلام على مصادر البيانات من خلال إنشاء الكائن 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>

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