ตารางข้อมูลและมุมมองข้อมูล

หน้านี้จะกล่าวถึงการแสดงข้อมูลภายในที่แผนภูมิใช้ รวมถึงคลาส DataTable และ DataView ที่ใช้ในการส่งข้อมูลลงในแผนภูมิ รวมถึงวิธีการต่างๆ ในการสร้างและป้อนข้อมูล DataTable

เนื้อหา

  1. วิธีที่ข้อมูลแสดงในแผนภูมิ
  2. แผนภูมิของฉันใช้สคีมาตารางใด
  3. ตารางข้อมูลและ DataView
  4. การสร้างและการเติมตาราง DataTable
    1. สร้าง DataTable ใหม่ จากนั้นเรียกใช้ addColumn()/addRows()/addRow()/setCell()
    2. arrayToDataTable()
    3. เครื่องมือเริ่มต้นลิเทอรัล JavaScript
    4. การส่งคำค้นหาแหล่งข้อมูล
  5. dataTableToCsv()
  6. ข้อมูลเพิ่มเติม

วิธีที่ข้อมูลแสดงในแผนภูมิ

แผนภูมิทั้งหมดจะจัดเก็บข้อมูลไว้ในตาราง ต่อไปนี้เป็นการนำเสนออย่างง่ายของตารางข้อมูลสองคอลัมน์ที่มีการป้อนข้อมูล:

ดัชนี: 0
ประเภท: สตริง
ป้ายกำกับ: 'งาน'

 ดัชนี: 1
ประเภท: ตัวเลข
ป้ายกำกับ: "ชั่วโมงต่อวัน"
'ที่ทำงาน' 11
'กิน' 2
"การเดินทาง" 2
"ดูทีวี" 2
"การนอนหลับ" 7

ข้อมูลจัดเก็บอยู่ในเซลล์ที่อ้างอิงเป็น (row, column) โดยที่ row เป็นดัชนีแถวที่มีพื้นฐานเป็น 0 และ column คือดัชนีคอลัมน์แบบ 0 หรือรหัสที่ไม่ซ้ำกันซึ่งคุณระบุได้

ต่อไปนี้คือรายการที่สมบูรณ์ยิ่งขึ้นขององค์ประกอบและพร็อพเพอร์ตี้ที่สนับสนุนของตาราง ดูรูปแบบพารามิเตอร์ JavaScript ของตัวสร้างสำหรับรายละเอียดเพิ่มเติม

  • ตาราง - อาร์เรย์ของคอลัมน์และแถว รวมถึงแมปของคู่ชื่อ/ค่าที่กำหนดเองซึ่งคุณกำหนดได้ ขณะนี้แผนภูมิไม่ได้ใช้พร็อพเพอร์ตี้ระดับตาราง
  • คอลัมน์ - แต่ละคอลัมน์รองรับประเภทข้อมูลที่จำเป็น รวมถึงป้ายกำกับสตริงที่ไม่บังคับ รหัส รูปแบบ และแมปของพร็อพเพอร์ตี้ชื่อ/ค่าที่กำหนดเอง ป้ายกำกับเป็นสตริงที่ใช้ง่ายซึ่งแสดงในแผนภูมิ รหัสคือตัวระบุที่ไม่บังคับซึ่งสามารถใช้แทนดัชนีคอลัมน์ อาจมีการอ้างอิงคอลัมน์ในโค้ดด้วยดัชนีที่อิงตาม 0 หรือรหัสที่ไม่บังคับก็ได้ ดูรายการประเภทข้อมูลที่รองรับได้ที่ DataTable.addColumn()
  • แถว - แถวคืออาร์เรย์ของเซลล์ และแผนที่ของคู่ชื่อ/ค่าที่กำหนดเองซึ่งคุณกำหนดได้
  • เซลล์ - แต่ละเซลล์คือออบเจ็กต์ที่มีค่าจริงของประเภทคอลัมน์นั้นๆ รวมถึงค่าที่คุณระบุในรูปแบบสตริงที่ไม่บังคับ เช่น คอลัมน์ตัวเลขอาจได้รับค่า 7 และค่าที่มีการจัดรูปแบบเป็น "7" หากมีการระบุค่าที่จัดรูปแบบแล้ว แผนภูมิจะใช้ค่าจริงในการคำนวณและแสดงผล แต่อาจแสดงค่าที่จัดรูปแบบตามความเหมาะสม เช่น หากผู้ใช้วางเมาส์เหนือจุด แต่ละเซลล์จะมีการแมปที่ไม่บังคับสำหรับคู่ชื่อ/ค่าที่กำหนดเอง

แผนภูมิของฉันใช้สคีมาตารางใด

แผนภูมิที่แตกต่างกันใช้ตารางในรูปแบบต่างๆ เช่น แผนภูมิวงกลมควรมีตาราง 2 คอลัมน์ซึ่งมีคอลัมน์สตริงและคอลัมน์ตัวเลข โดยที่แต่ละแถวจะอธิบายสไลซ์ คอลัมน์แรกคือป้ายกำกับของสไลซ์ และคอลัมน์ที่ 2 คือค่าของสไลซ์ อย่างไรก็ตาม แผนภูมิกระจายคาดว่าตารางประกอบด้วยคอลัมน์ตัวเลข 2 คอลัมน์ ซึ่งแต่ละแถวเป็นจุด และ 2 คอลัมน์เป็นค่า X และ Y ของจุด อ่านเอกสารประกอบของแผนภูมิเพื่อดูรูปแบบข้อมูลที่ต้องใช้

DataTables และ DataView

ตารางข้อมูลแผนภูมิจะแสดงเป็น JavaScript โดยออบเจ็กต์ DataTable หรือออบเจ็กต์ DataView ในบางกรณี คุณอาจเห็น DataTable ที่ใช้เวอร์ชัน JavaScript หรือ JSON เช่น เมื่อแหล่งข้อมูลเครื่องมือแผนภูมิส่งข้อมูลผ่านอินเทอร์เน็ต หรือเป็นค่าอินพุตที่เป็นไปได้สำหรับ ChartWrapper

ระบบจะใช้ DataTable เพื่อสร้างตารางข้อมูลต้นฉบับ DataView เป็นคลาสอำนวยความสะดวกที่ให้การแสดงผลแบบอ่านอย่างเดียวของ DataTable พร้อมวิธีการซ่อนหรือเรียงลำดับแถวหรือคอลัมน์ใหม่อย่างรวดเร็วโดยไม่ต้องแก้ไขข้อมูลต้นฉบับที่ลิงก์ไว้ การเปรียบเทียบคร่าวๆ ของทั้ง 2 ชั้นเรียนมีดังนี้

DataTable DataView
อ่าน/เขียน อ่านอย่างเดียว
สามารถสร้างด้วยค่าว่างแล้วป้อนข้อมูล เป็นการอ้างอิงไปยัง DataTable ที่มีอยู่ ป้อนข้อมูลใหม่ตั้งแต่ต้นไม่ได้ ต้องสร้างอินสแตนซ์โดยอ้างอิงไปยัง DataTable ที่มีอยู่
ข้อมูลต้องใช้พื้นที่เก็บข้อมูล ข้อมูลเป็นการอ้างอิงไปยัง DataTable ที่มีอยู่และไม่ใช้พื้นที่เก็บข้อมูล
เพิ่ม/แก้ไข/ลบแถว คอลัมน์ และข้อมูลได้ และการเปลี่ยนแปลงทั้งหมดจะยังคงอยู่ จัดเรียงหรือกรองแถวได้โดยไม่ต้องแก้ไขข้อมูลที่สําคัญ ระบบอาจซ่อนแถวและคอลัมน์และแสดงซ้ำๆ
สามารถโคลนได้ แสดงข้อมูลพร็อพเพอร์ตี้เวอร์ชัน DataTable ได้
เป็นข้อมูลต้นฉบับ ไม่มีการอ้างอิง การอ้างอิงแบบเรียลไทม์ไปยัง DataTable การเปลี่ยนแปลงใดๆ ในข้อมูล DataTable จะแสดงในมุมมองทันที
สามารถส่งผ่านไปยังแผนภูมิเป็นแหล่งข้อมูล สามารถส่งผ่านไปยังแผนภูมิเป็นแหล่งข้อมูล
ไม่รองรับคอลัมน์ที่คำนวณ รองรับคอลัมน์ที่คำนวณแล้ว ซึ่งเป็นคอลัมน์ที่มีค่าที่คำนวณแบบเรียลไทม์โดยการรวมหรือจัดการกับคอลัมน์อื่นๆ
ไม่มีการซ่อนแถวหรือคอลัมน์ ซ่อนหรือแสดงคอลัมน์ที่เลือกได้

การสร้างและการสร้างตารางข้อมูล

การสร้างและป้อนข้อมูลตารางข้อมูลมีหลายวิธี ได้แก่

DataTable ว่าง + addColumn()/addRows()/addRow()/setCell()

ขั้นตอน

  1. สร้างอินสแตนซ์ DataTable ใหม่
  2. เพิ่มคอลัมน์
  3. เพิ่มอย่างน้อย 1 แถว โดยจะป้อนข้อมูลหรือไม่ก็ได้ คุณสามารถเพิ่มแถวว่างและเติมข้อมูลในภายหลังได้ นอกจากนี้ยังเพิ่มหรือนำแถวเพิ่มเติมออกจากแถวหรือแก้ไขค่าของเซลล์ทีละรายการได้

ข้อดี

  • คุณสามารถระบุประเภทข้อมูลและป้ายกำกับของแต่ละคอลัมน์ได้
  • เหมาะสำหรับการสร้างตารางในเบราว์เซอร์ และมีแนวโน้มที่จะพิมพ์ผิดน้อยกว่าเมธอด 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 ได้เช่นเดียวกับ DataTable อื่นๆ

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" จะใช้ค่า Escape โดยใช้กฎการ Escape 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>

ข้อมูลเพิ่มเติม