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

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

المحتويات

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

كيفية تمثيل البيانات في مخطط

تُخزِّن جميع الرسوم البيانية بياناتها في جدول. في ما يلي تمثيل مبسّط لجدول بيانات مكوّن من عمودَين معبأ:

الفهرس: 0
النوع: سلسلة
التصنيف: 'مهمة'

 الفهرس: 1
النوع: رقم
التصنيف: 'ساعات في اليوم'
"العمل" 11
"تناول الطعام" 2
'التنقل' 2
"مشاهدة التلفزيون" 2
"النوم" 7

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

وفيما يلي قائمة أكثر اكتمالاً تضم العناصر والخصائص المتوافقة مع الجدول، ويمكنك الاطّلاع على تنسيق معلَمة JavaScript الحرفية للمنشئ للحصول على مزيد من التفاصيل:

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

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

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

DataTables وDataViews

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

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

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

إنشاء جدول بيانات وملؤه

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

DataTable فارغ + addColumn()/addRows()/addRow()/setCell()

الخطوات:

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

المزايا:

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

العيوب:

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

أمثلة:

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

// ------- 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));

arrayToDataTable()

تنشئ الدالة المساعدة هذه 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]]);

أداة تهيئة JavaScript الحرفية

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

المزايا:

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

العيوب:

  • بناء الجملة صعب الوصول إليه بشكل صحيح، وهو عُرضة للأخطاء الإملائية.
  • رمز غير قابل للقراءة بشكل كبير.
  • يتشابه إلى حد كبير مع 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)}]}
           ]
   }
)

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

عند إرسال طلب بحث إلى مصدر بيانات أدوات الرسم البياني، يكون الرد الناجح هو مثيل DataTable. يمكن نسخ DataTable المعروض هذا أو تعديله أو نسخه في 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(data) سلسلة CSV مع البيانات من جدول البيانات.

يمكن أن يكون الإدخال في هذه الدالة إما DataTable أو DataView.

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

يتم تخطي الرموز الخاصة مثل "," و "\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>

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