DataTables و DataViews

این صفحه در مورد نمایش داده های داخلی مورد استفاده توسط نمودارها، کلاس های DataTable و DataView که برای انتقال داده ها به نمودار استفاده می شوند و روش های مختلف نمونه سازی و پر کردن یک DataTable بحث می کند.

فهرست

1. نحوه نمایش داده ها در نمودار
2. نمودار من از چه طرح جدولی استفاده می کند؟
3. DataTables و DataViews
4. ایجاد و پر کردن یک DataTable
   1. یک DataTable جدید ایجاد کنید، سپس addColumn()/addRows()/addRow()/setCell() را فراخوانی کنید.
   2. () arrayToDataTable
   3. اولیه ساز تحت اللفظی جاوا اسکریپت
   4. ارسال پرسش منبع داده
5. dataTableToCsv()
6. اطلاعات بیشتر

نحوه نمایش داده ها در نمودار

همه نمودارها داده های خود را در یک جدول ذخیره می کنند. در اینجا یک نمایش ساده از یک جدول داده دو ستونی پر شده است:

شاخص: 0 نوع: رشته برچسب: "وظیفه"	شاخص: 1 نوع: شماره برچسب: "ساعت در روز"
"کار"	11
'بخور'	2
'رفت و آمد'	2
'تلویزیون تماشا کن'	2
'خواب'	7

داده‌ها در سلول‌هایی ذخیره می‌شوند که به عنوان ( ردیف ، ستون ) ارجاع می‌شوند، جایی که ردیف یک شاخص ردیف مبتنی بر صفر است، و ستون یا یک فهرست ستون مبتنی بر صفر یا یک شناسه منحصر به فرد است که می‌توانید آن را مشخص کنید.

در اینجا لیست کامل تری از عناصر و ویژگی های پشتیبانی شده جدول آمده است. برای جزئیات بیشتر به فرمت پارامتر لغوی جاوا اسکریپت سازنده مراجعه کنید:

• جدول - آرایه‌ای از ستون‌ها و ردیف‌ها، به‌علاوه یک نقشه اختیاری از جفت‌های نام/مقدار دلخواه که می‌توانید اختصاص دهید. ویژگی‌های سطح جدول در حال حاضر توسط نمودارها استفاده نمی‌شوند.
• ستون ها - هر ستون از یک نوع داده مورد نیاز، به علاوه یک برچسب رشته اختیاری، شناسه، الگو، و نقشه ویژگی های نام/مقدار دلخواه پشتیبانی می کند. برچسب یک رشته کاربر پسند است که می تواند توسط نمودار نمایش داده شود. ID یک شناسه اختیاری است که می تواند به جای یک نمایه ستون استفاده شود. یک ستون را می توان در کد یا با شاخص مبتنی بر صفر یا با شناسه اختیاری ارجاع داد. برای لیستی از انواع داده های پشتیبانی شده به DataTable.addColumn() مراجعه کنید.
• ردیف ها - یک ردیف آرایه ای از سلول ها است، به علاوه یک نقشه اختیاری از جفت نام/مقدار دلخواه که می توانید آنها را اختصاص دهید.
• سلول ها - هر سلول یک شی است که حاوی یک مقدار واقعی از نوع ستون، به علاوه یک نسخه اختیاری با قالب رشته ای از مقداری است که ارائه می کنید. به عنوان مثال: ممکن است به یک ستون عددی مقدار 7 و مقدار فرمت شده "هفت" اختصاص داده شود. اگر یک مقدار قالب‌بندی شده ارائه شود، نمودار از مقدار واقعی برای محاسبات و رندر استفاده می‌کند، اما ممکن است مقدار قالب‌بندی‌شده را در صورت لزوم نشان دهد، برای مثال اگر کاربر روی یک نقطه نگه داشته شود. هر سلول همچنین دارای یک نقشه اختیاری از جفت نام/مقدار دلخواه است.

نمودار من از چه طرح جدولی استفاده می کند؟

نمودارهای مختلف از جداول در قالب‌های مختلف استفاده می‌کنند: برای مثال، نمودار دایره‌ای انتظار یک جدول دو ستونی با یک ستون رشته و یک ستون عددی را دارد که در آن هر ردیف یک برش را توصیف می‌کند و ستون اول برچسب برش و ستون دوم است. مقدار برش با این حال، نمودار پراکنده، جدولی متشکل از دو ستون عددی را انتظار دارد که هر ردیف یک نقطه است و دو ستون مقادیر X و Y نقطه هستند. اسناد نمودار خود را بخوانید تا بدانید چه قالب داده ای نیاز دارد.

DataTables و DataViews

یک جدول داده نمودار در جاوا اسکریپت با یک شی DataTable یا یک شی DataView نمایش داده می شود. در برخی موارد، ممکن است یک نسخه تحت اللفظی جاوا اسکریپت یا نسخه JSON از DataTable استفاده شود، به عنوان مثال زمانی که داده ها از طریق اینترنت توسط یک منبع داده Chart Tools ارسال می شوند، یا به عنوان یک مقدار ورودی احتمالی برای ChartWrapper .

یک DataTable برای ایجاد جدول داده اصلی استفاده می شود. DataView یک کلاس راحت است که یک نمای فقط خواندنی از DataTable با روش‌هایی برای پنهان کردن یا مرتب کردن مجدد ردیف‌ها یا ستون‌ها به سرعت بدون تغییر داده‌های پیوند شده و اصلی ارائه می‌کند. در اینجا مقایسه مختصری از این دو کلاس وجود دارد:

جدول داده ها	DataView
بخوان / بنویس	فقط خواندنی
می توان خالی ایجاد کرد و سپس پر کرد	یک مرجع به یک DataTable موجود است. نمی توان از ابتدا جمعیت کرد. باید با ارجاع به یک DataTable موجود نمونه سازی شود.
داده ها فضای ذخیره سازی را می گیرد.	داده ها یک مرجع به DataTable موجود است و فضا را مصرف نمی کند.
می‌تواند ردیف‌ها، ستون‌ها و داده‌ها را اضافه/ویرایش/حذف کند و همه تغییرات پایدار هستند.	می تواند ردیف ها را بدون تغییر داده های زیربنایی مرتب کند یا فیلتر کند. سطرها و ستون ها را می توان به طور مکرر پنهان و آشکار کرد.
قابل شبیه سازی است	می تواند یک نسخه DataTable از view را برگرداند
آیا منبع داده است. حاوی ارجاع نیست	ارجاع زنده به DataTable . هر گونه تغییر در داده های DataTable بلافاصله در نما منعکس می شود.
می تواند به عنوان منبع داده به نمودار منتقل شود	می تواند به عنوان منبع داده به نمودار منتقل شود
از ستون های محاسبه شده پشتیبانی نمی کند	از ستون‌های محاسبه‌شده پشتیبانی می‌کند، که ستون‌هایی با مقداری هستند که در پرواز با ترکیب یا دستکاری ستون‌های دیگر محاسبه می‌شوند.
هیچ ردیف یا ستونی پنهان نمی شود	می تواند ستون های انتخاب شده را پنهان یا نمایش دهد

ایجاد و پر کردن یک DataTable

چندین روش مختلف برای ایجاد و پر کردن DataTable وجود دارد:

• یک DataTable جدید ایجاد کنید، سپس addColumn()/addRows()/addRow()/setCell() را فراخوانی کنید.
• () arrayToDataTable
• اولیه ساز تحت اللفظی جاوا اسکریپت
• ارسال پرسش منبع داده

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

مراحل:

1. یک DataTable جدید نمونه سازی کنید
2. اضافه کردن ستون
3. یک یا چند ردیف را اضافه کنید که به صورت اختیاری با داده پر شده است. می توانید ردیف های خالی اضافه کنید و بعداً آنها را پر کنید. همچنین می‌توانید ردیف‌های ردیف‌های اضافی را اضافه یا حذف کنید یا مقادیر سلول‌ها را به‌صورت جداگانه ویرایش کنید.

مزایای:

• می توانید نوع داده و برچسب هر ستون را مشخص کنید.
• برای تولید جدول در مرورگر خوب است و کمتر از روش JSON در معرض اشتباهات تایپی است.

معایب:

• به اندازه ساخت یک رشته تحت اللفظی JSON برای انتقال به سازنده DataTable هنگام تولید صفحه در یک وب سرور به صورت برنامه نویسی مفید نیست.
• به سرعت مرورگر بستگی دارد و می تواند کندتر از رشته های 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));

() arrayToDataTable

این تابع کمکی با استفاده از یک تماس یک DataTable ایجاد و پر می کند.

مزایای:

• کد بسیار ساده و خوانا اجرا شده در مرورگر.
• می‌توانید نوع داده هر ستون را به صراحت مشخص کنید یا به نمودارهای Google اجازه دهید نوع را از داده‌های ارسال شده استنتاج کند.
  • برای مشخص کردن صریح نوع داده یک ستون، یک شی را در ردیف سرصفحه با ویژگی type مشخص کنید.
  • برای اینکه نمودارهای گوگل نوع را استنتاج کنند، از یک رشته برای برچسب ستون استفاده کنید.

مثال ها:

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)}]}
           ]
   }
)

ارسال پرسش منبع داده

هنگامی که درخواستی را به یک منبع داده Chart Tools ارسال می کنید، یک پاسخ موفق یک نمونه DataTable است. این 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( داده ) یک رشته CSV را با داده های جدول داده برمی گرداند.

ورودی این تابع می تواند DataTable یا DataView باشد.

از مقادیر قالب بندی شده سلول ها استفاده می کند. برچسب های ستون نادیده گرفته می شوند.

کاراکترهای خاص مانند " , " و " \n " با استفاده از قوانین استاندارد فرار CSV فرار می کنند.

کد زیر نمایش داده می شود

Ramanujan,1729
Gauss,5050

در کنسول جاوا اسکریپت مرورگر شما:

<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>

اطلاعات بیشتر

• پرس و جو از منبع داده ابزار نمودار
• نحو تحت اللفظی DataTable جاوا اسکریپت
• مرجع DataTable
• مرجع DataView
• مرجع arrayToDataTable()