جداول البيانات وعروض البيانات

تتناول هذه الصفحة التمثيل الداخلي للبيانات الذي تستخدمه الرسوم البيانية، والصفوف DataTable وDataView المستخدَمة لتمرير البيانات إلى رسم بياني، والطرق المختلفة لإنشاء مثيل DataTable وتعبئة البيانات فيه.

المحتويات

  1. كيفية تمثيل البيانات في رسم بياني
  2. ما مخطَّط الجدول الذي يستخدمه الرسم البياني؟
  3. جداول البيانات وعروض البيانات
  4. إنشاء وتعبئة جدول بيانات
    1. إنشاء جدول بيانات جديد، ثم استدعاء addColumn()/addRows()/addRow()/setCell()
    2. arrayToDataTable()
    3. مهيّئ JavaScript الحرفي
    4. إرسال طلب بحث مصدر البيانات
  5. dataTableToCsv()
  6. مزيد من المعلومات

كيفية تمثيل البيانات في رسم بياني

تخزّن جميع الرسوم البيانية بياناتها في جدول. في ما يلي عرض مبسّط لجدول بيانات مكوّن من عمودين:

الفهرس: 0
type: string
label: 'Task'

الفهرس: 1
type: number
label: "عدد الساعات في اليوم"
"العمل" 11
"تناول الطعام" 2
"التنقُّل" 2
"مشاهدة التلفزيون" 2
"السكون" 7

يتم تخزين البيانات في الخلايا المشار إليها باسم (الصف، العمود)، حيث يكون صف عبارة عن فهرس صف بدون صفر، والعمود إما فهرس عمود يستند إلى الصفر أو معرّف فريد يمكنك تحديده.

في ما يلي قائمة أكثر اكتمالاً بالعناصر والخصائص المتاحة في الجدول، راجِع تنسيق المعلّمة الحرفية لجافا سكريبت في "المُنشئ" للحصول على مزيد من التفاصيل:

  • جدول - مصفوفة من الأعمدة والصفوف، بالإضافة إلى خريطة اختيارية لأزواج الاسم/القيمة العشوائية التي يمكنك تعيينها. لا تستخدم الرسوم البيانية حاليًا الخصائص على مستوى الجدول.
  • الأعمدة - يتيح كل عمود نوع بيانات مطلوبًا، بالإضافة إلى تصنيف سلسلة رقم تعريف ورقم تعريف ونمط وخريطة لمواقع الاسم/القيمة العشوائية. التصنيف عبارة عن سلسلة سهلة الاستخدام يمكن عرضها بواسطة المخطط؛ والمعرّف عبارة عن معرّف اختياري يمكن استخدامه بدلاً من فهرس العمود. يمكن الإشارة إلى العمود في الشفرة إما من خلال الفهرس المستند إلى الصفر، أو من خلال المعرف الاختياري. راجع DataTable.addColumn() للحصول على قائمة بأنواع البيانات المتوافقة.
  • الصفوف - الصف عبارة عن مصفوفة من الخلايا، بالإضافة إلى خريطة اختيارية لأزواج الاسم/القيمة العشوائية التي يمكنك تعيينها.
  • الخلايا - كل خلية عبارة عن كائن يحتوي على قيمة فعلية لنوع العمود، بالإضافة إلى نسخة اختيارية بتنسيق القيم من القيمة التي تُدخلها. على سبيل المثال: قد يتم تعيين القيمة 7 لعمود رقمي والقيمة المنسّقة "سبعة". في حال تقديم قيمة منسّقة، سيستخدم الرسم البياني القيمة الفعلية للحسابات والعرض، ولكنه قد يعرض القيمة المنسّقة عند اللزوم، مثلاً عند تمرير مؤشر الماوس فوق نقطة. تحتوي كل خلية أيضًا على خريطة اختيارية لأزواج الاسم/القيمة العشوائية.

ما مخطط الجدول الذي يستخدمه مخططي البياني؟

تستخدم الرسوم البيانية المختلفة جداول بتنسيقات مختلفة: على سبيل المثال، يتوقّع الرسم البياني الدائري جدولاً من عمودين مع عمود سلسلة وعمود أرقام، حيث يصف كل صف شريحة، والعمود الأول هو تصنيف الشريحة والعمود الثاني هو قيمة الشريحة. ويتوقّع رسم بياني للنقاط المبعثرة جدولاً يتكون من عمودين رقميين، حيث يكون كل صف نقطة، ويكون العمودان هما القيمتين X وY للنقطة. اقرأ وثائق الرسم البياني لمعرفة تنسيق البيانات المطلوب.

جداول البيانات وعروض البيانات

يتم تمثيل جدول بيانات الرسم البياني بلغة JavaScript إما من خلال كائن DataTable أو كائن DataView. في بعض الحالات، قد يظهر لك استخدام JavaScript حرفيًا أو نسخة JSON من جدول بيانات مُستخدَم، مثلاً عند إرسال البيانات على الإنترنت من خلال مصدر بيانات أدوات الرسم البياني، أو كقيمة إدخال محتملة لـ ChartWrapper.

ويتم استخدام DataTable لإنشاء جدول البيانات الأصلي. DataView هي فئة مناسبة تقدّم عرضًا للقراءة فقط لـ DataTable، مع طرق لإخفاء الصفوف أو الأعمدة أو إعادة ترتيبها بسرعة بدون تعديل البيانات الأصلية المرتبطة. في ما يلي مقارنة قصيرة بين الفئتين:

جدول البيانات عرض البيانات
قراءة/كتابة حق الوصول للقراءة فقط
يمكن إنشاؤها فارغة ثم تعبئتها يشير إلى DataTable حالي. لا يمكن تعبئة هذا الحقل من نقطة الصفر، ولكن يجب إنشاء مثيل باستخدام مرجع إلى DataTable موجود.
تستهلك البيانات مساحة تخزين. البيانات هي إشارة إلى DataTable حالية، ولا تستهلك أي مساحة.
يمكن إضافة/تعديل/حذف صفوف وأعمدة وبيانات، وجميع التغييرات مستمرة. يمكن ترتيب الصفوف أو فلترتها بدون تعديل البيانات الأساسية. ويمكن إخفاء الصفوف والأعمدة وكشفها بشكلٍ متكرر.
يمكن استنساخها إمكانية عرض إصدار DataTable من العرض
عبارة عن بيانات مصدر؛ لا تحتوي على مراجع مرجع مباشر إلى DataTable، وتظهر أي تغييرات في بيانات DataTable على الفور في الملف الشخصي.
يمكن تمريرها إلى مخطط كمصدر للبيانات يمكن تمريرها إلى مخطط كمصدر للبيانات
لا تدعم الأعمدة المحسوبة وتدعم الأعمدة المحسوبة، وهي أعمدة ذات قيمة محسوبة بسرعة من خلال الجمع بين أعمدة أخرى أو معالجتها.
بدون إخفاء صف أو عمود إمكانية إخفاء الأعمدة المحددة أو إظهارها

إنشاء وتعبئة جدول بيانات

هناك عدة طرق مختلفة لإنشاء جدول بيانات وملؤه:

Empty DataTable + addColumn()/addRows()/addRow()/setCell()

الخطوات:

  1. إنشاء مثيل جديد لـ DataTable
  2. إضافة أعمدة
  3. أضِف صفًا واحدًا أو أكثر، وتتم تعبئته اختياريًا بالبيانات. يمكنك إضافة صفوف فارغة وملئها لاحقًا. يمكنك أيضًا إضافة صفوف إضافية أو إزالتها أو تعديل قيم الخلية بشكل فردي.

المزايا:

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

السلبيات:

  • هذا مفيد بقدر عدم إنشاء سلسلة JSON حرفية لتمريرها إلى دالة إنشاء جدول البيانات عند إنشاء الصفحة آليًا على خادم ويب.
  • يعتمد ذلك على سرعة المتصفح، ويمكن أن يكون أبطأ من السلاسل النصية بتنسيق JSON ذات الجداول الأكبر (حوالي 1000 خلية أو أكثر).

أمثلة:

في ما يلي بعض الأمثلة على إنشاء جدول البيانات نفسه باستخدام أشكال مختلفة من هذا الأسلوب:

// ------- Version 1------------
// Add rows + data at the same time
// -----------------------------
var data = new google.visualization.DataTable();

// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');

// Add data.
data.addRows([
  ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
  ['Bob', new Date(2007,5,1)],                              // More typically this would be done using a
  ['Alice', new Date(2006,7,16)],                           // formatter.
  ['Frank', new Date(2007,11,28)],
  ['Floyd', new Date(2005,3,13)],
  ['Fritz', new Date(2011,6,1)]
]);



// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
  // Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  data.setCell(1, 0, 'Bob');
  data.setCell(1, 1, new Date(2007, 5, 1));
  data.setCell(2, 0, 'Alice');
  data.setCell(2, 1, new Date(2006, 7, 16));
  data.setCell(3, 0, 'Frank');
  data.setCell(3, 1, new Date(2007, 11, 28));
  data.setCell(4, 0, 'Floyd');
  data.setCell(4, 1, new Date(2005, 3, 13));
  data.setCell(5, 0, 'Fritz');
  data.setCell(5, 1, new Date(2007, 9, 2));

صفيف_DataDataTable()

تنشئ هذه الدالة المساعِدة DataTable وتعبئها باستخدام استدعاء واحد.

المزايا:

  • شفرة بسيطة وسهلة القراءة تم تنفيذها في المتصفح.
  • يمكنك إما تحديد نوع البيانات بوضوح لكل عمود، أو السماح لمخططات Google باستنتاج النوع من البيانات التي تم تمريرها.
    • لتحديد نوع بيانات العمود بشكل صريح، حدِّد كائنًا في صف العنوان باستخدام السمة type.
    • للسماح لمخططات Google باستنتاج النوع، استخدم سلسلة لتصنيف العمود.

أمثلة:

var data = google.visualization.arrayToDataTable([
       ['Employee Name', 'Salary'],
       ['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
       ['Bob', 35000],
       ['Alice', 44000],
       ['Frank', 27000],
       ['Floyd', 92000],
       ['Fritz', 18500]
      ],
      false); // 'false' means that the first row contains labels, not data.

var data = google.visualization.arrayToDataTable([
       [ {label: 'Year', id: 'year'},
         {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
         {label: 'Expenses', id: 'Expenses', type: 'number'} ],
       ['2014', 1000, 400],
       ['2015', 1170, 460],
       ['2016', 660, 1120],
       ['2017', 1030, 540]]);

المبدئ الحرفي لجافا سكريبت

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

المزايا:

  • يكون مفيدًا عند إنشاء البيانات على خادم الويب.
  • تتم المعالجة بشكل أسرع من الطرق الأخرى للجداول الأكبر حجمًا (حوالي 1000 خلية)

السلبيات:

  • من الصعب الحصول على بنية صحيحة، كما أنه عُرضة للأخطاء الإملائية.
  • رمز غير قابل للقراءة.
  • مشابه لـ JSON، ولكنه ليس مطابقًا له.

مثال:

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

إرسال طلب بحث مصدر البيانات

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

function drawVisualization() {
    var query = new google.visualization.Query(
        'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');

    // Apply query language statement.
    query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    
    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    visualization = new google.visualization.LineChart(document.getElementById('visualization'));
    visualization.draw(data, {legend: 'bottom'});
  }

dataTableToCsv()

تعرض الدالة المساعدة google.visualization.dataTableToCsv(البيانات) سلسلة CSV مع البيانات من جدول البيانات.

يمكن أن يكون الإدخال إلى هذه الدالة إما جدول بيانات أو عرض البيانات.

ويستخدم القيم المنسقة للخلايا. يتم تجاهل تصنيفات الأعمدة.

يتمّ تخطي الأحرف الخاصة مثل "," و"\n" باستخدام قواعد الهروب القياسية من ملف CSV.

سيتم عرض الرمز التالي

Ramanujan,1729
Gauss,5050


في وحدة تحكّم JavaScript في المتصفّح:

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
   google.charts.load("current", {packages:['corechart']});
   google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        ['Ramanujan', 1729],
        ['Gauss', 5050]
      ]);
    var csv = google.visualization.dataTableToCsv(data);
    console.log(csv);
  }
  </script>
  </head>
</html>

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