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

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

เนื้อหา

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

วิธีการแสดงข้อมูลในแผนภูมิ

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

ดัชนี: 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 ของจุด อ่านเอกสารประกอบของแผนภูมิเพื่อดูรูปแบบข้อมูลที่ต้องการ

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

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

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

ตารางข้อมูล มุมมองข้อมูล
อ่าน/เขียน อ่านอย่างเดียว
สามารถสร้างที่ว่างเปล่าและป้อนข้อมูล เป็นการอ้างอิงไปยัง 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));

อาร์เรย์ไปยังตารางข้อมูล()

ฟังก์ชันตัวช่วยนี้จะสร้างและกรอก DataTable โดยใช้การโทรครั้งเดียว

ข้อดี

  • โค้ดนี้อ่านได้ง่ายและเข้าใจง่ายมากในเบราว์เซอร์
  • คุณจะระบุประเภทข้อมูลของแต่ละคอลัมน์อย่างชัดแจ้ง หรือให้ Google Charts อนุมานประเภทจากข้อมูลที่ส่งผ่านก็ได้
    • หากต้องการระบุประเภทข้อมูลของคอลัมน์อย่างชัดแจ้ง ให้ระบุออบเจ็กต์ในแถวส่วนหัวด้วยพร็อพเพอร์ตี้ type
    • หากต้องการให้ Google Charts อนุมานประเภท ให้ใช้สตริงสําหรับป้ายกํากับคอลัมน์

ตัวอย่างเช่น

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 ที่มีข้อมูลจากตารางข้อมูล

อินพุตของฟังก์ชันนี้อาจเป็นตารางข้อมูลหรือ DataView

โดยจะใช้ค่าที่จัดรูปแบบของเซลล์ ระบบจะไม่สนใจป้ายกํากับคอลัมน์

สัญลักษณ์พิเศษ เช่น "," และ "\n" กําหนดเป็นอักขระหลีกโดยใช้กฎการใช้ 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>

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