เอกสารอ้างอิง Google Visualization API

หน้านี้แสดงรายการออบเจ็กต์ที่ Google Visualization API แสดง รวมถึงวิธีการมาตรฐานที่การแสดงภาพทั้งหมดแสดง

หมายเหตุ: เนมสเปซของ Google Visualization API คือ google.visualization.*

คลาสตารางข้อมูล

แสดงตารางค่าแบบ 2 มิติที่เปลี่ยนแปลงได้ หากต้องการทำสำเนาแบบอ่านอย่างเดียวของ DataTable (เลือกกรองเพื่อแสดงค่า แถว หรือคอลัมน์ที่เฉพาะเจาะจง) ให้สร้าง DataView

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

นอกจากนี้ คุณยังกำหนดพร็อพเพอร์ตี้ที่กำหนดเอง (คู่ชื่อ/ค่า) ให้กับเซลล์ แถว คอลัมน์ หรือทั้งตารางได้อีกด้วย การแสดงภาพบางรายการรองรับพร็อพเพอร์ตี้ที่กำหนดเองที่เจาะจง เช่น การแสดงภาพตารางรองรับพร็อพเพอร์ตี้เซลล์ชื่อ "style" ซึ่งช่วยให้คุณกําหนดสตริงรูปแบบ CSS ในบรรทัดให้กับเซลล์ตารางที่แสดงผลได้ การแสดงข้อมูลผ่านภาพควรอธิบายพร็อพเพอร์ตี้ที่กำหนดเองที่รองรับในเอกสารประกอบ

ดูเพิ่มเติมที่ QueryResponse.getDataTable

เครื่องมือสร้าง

ไวยากรณ์

DataTable(opt_data, opt_version)

opt_data

[ไม่บังคับ] ข้อมูลที่ใช้เริ่มต้นตาราง ซึ่งอาจเป็น JSON ที่แสดงผลโดยการเรียกใช้ DataTable.toJSON() ในตารางที่มีการป้อนข้อมูล หรือออบเจ็กต์ JavaScript ที่มีข้อมูลที่ใช้ในการเริ่มต้นตาราง โครงสร้างของออบเจ็กต์ลิเทอรัล JavaScript มีคำอธิบายที่นี่ หากไม่ระบุพารามิเตอร์นี้ ระบบจะแสดงผลตารางข้อมูลใหม่ที่ว่างเปล่า

opt_version

[ไม่บังคับ] ค่าตัวเลขที่ระบุเวอร์ชันของโปรโตคอลการใช้สาย โดยมีเพียงผู้ติดตั้งใช้งานแหล่งข้อมูลและเครื่องมือแผนภูมิเท่านั้นที่ใช้ เวอร์ชันปัจจุบันคือ 0.6

รายละเอียด

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

แต่ละเซลล์ในตารางจะมีค่าอยู่ เซลล์อาจมีค่า Null หรือค่าของประเภทที่ระบุโดยคอลัมน์ คุณจะเก็บข้อมูลเวอร์ชัน "ที่จัดรูปแบบ" ไว้ในเซลล์หรือไม่ก็ได้ ซึ่งเป็นข้อมูลในรูปแบบสตริงที่มีการจัดรูปแบบเพื่อการแสดงผลด้วยการแสดงข้อมูลผ่านภาพ การแสดงข้อมูลผ่านภาพสามารถใช้รูปแบบที่จัดรูปแบบสำหรับการแสดงผลได้ (แต่ไม่จำเป็น) แต่จะใช้ข้อมูลนั้นในการจัดเรียงหรือการคำนวณทุกครั้ง (เช่น การระบุตำแหน่งในกราฟเพื่อวางจุด) เช่น อาจกำหนดค่า "ต่ำ" "กลาง" และ "สูง" เป็นค่าที่จัดรูปแบบเป็นค่าเซลล์ที่เป็นตัวเลขเป็น 1, 2 และ 3

หากต้องการเพิ่มแถวข้อมูลหลังจากเรียกใช้ตัวสร้าง คุณสามารถเรียกใช้ addRow() สำหรับแถวเดียว หรือ addRows() สำหรับหลายแถว นอกจากนี้ คุณยังเพิ่มคอลัมน์ได้ด้วยการเรียกใช้เมธอด addColumn() เรามีวิธีการนำออกสำหรับแถวและคอลัมน์ด้วย แต่แทนที่จะนำแถวหรือคอลัมน์ออก ให้พิจารณาสร้าง DataView ที่เป็นมุมมองเฉพาะของ DataTable

หากคุณเปลี่ยนค่าใน DataTable หลังจากส่งผ่านค่าไปยังเมธอด draw() ของการแสดงภาพ การเปลี่ยนแปลงจะไม่เปลี่ยนแปลงแผนภูมิโดยทันที คุณต้องเรียกใช้ draw() อีกครั้งเพื่อแสดงการเปลี่ยนแปลง

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

ตัวอย่างต่อไปนี้สาธิตการสร้างและป้อนข้อมูล DataTable ด้วยสตริงตามตัวอักษรด้วยข้อมูลเดียวกันกับที่แสดงในตัวอย่าง JavaScript ด้านบน

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

ตัวอย่างต่อไปนี้จะสร้าง DataTable ใหม่ที่ว่างเปล่า จากนั้นป้อนข้อมูลดังกล่าวด้วยตนเองด้วยข้อมูลเดียวกันกับด้านบน

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);

วิธีการ

data.addRow();  // Add an empty row
data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value.

// Add a row with two cells, the second with a formatted value.
data.addRow(['Hermione', {v: new Date(1999,0,1),
                          f: 'January First, Nineteen ninety-nine'}
]);

data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined.
data.addRow(['Col1Val', , 'Col3Val']);     // Same as previous.

data.addRows([
  ['Ivan', new Date(1977,2,28)],
  ['Igor', new Date(1962,7,5)],
  ['Felix', new Date(1983,11,17)],
  ['Bob', null] // No date set for Bob.
]);

var rowInds = data.getSortedRows([{column: 2}]);
for (var i = 0; i < rowInds.length; i++) {
  var v = data.getValue(rowInds[i], 2);
}

{"cols":[{"id":"Col1","label":"","type":"date"}],
 "rows":[
   {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
   {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
 ]
}

รูปแบบพารามิเตอร์ข้อมูล JavaScript แบบตรงตัวของเครื่องมือสร้าง

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

ก่อนอื่น มาดูตัวอย่างออบเจ็กต์ JavaScript แบบง่ายที่อธิบายตารางที่มี 3 แถวและ 3 คอลัมน์ (ประเภทสตริง ตัวเลข และวันที่)

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

ตอนนี้เรามาอธิบายไวยากรณ์กัน

ออบเจ็กต์ data ประกอบด้วยพร็อพเพอร์ตี้ระดับบนสุดที่จำเป็น 2 รายการ ได้แก่ cols และ rows และพร็อพเพอร์ตี้ p ที่ไม่บังคับซึ่งเป็นแผนที่ของค่าที่กำหนดเอง

หมายเหตุ: ชื่อพร็อพเพอร์ตี้และค่าคงที่ของสตริงทั้งหมดที่แสดงจะคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ นอกจากนี้ พร็อพเพอร์ตี้ที่อธิบายว่าเป็นการใช้ค่าสตริงควรใส่ค่าไว้ในเครื่องหมายคำพูด ตัวอย่างเช่น หากต้องการระบุพร็อพเพอร์ตี้ประเภทเป็นตัวเลข จะแสดงเป็น type: 'number' แต่ค่านั้นเป็นตัวเลข จะแสดงเช่นนี้: v: 42

พร็อพเพอร์ตี้ cols

cols คืออาร์เรย์ของออบเจ็กต์ที่อธิบายรหัสและประเภทของแต่ละคอลัมน์ แต่ละพร็อพเพอร์ตี้คือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้ (คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่)

• type [จำเป็น] ประเภทข้อมูลของข้อมูลในคอลัมน์ รองรับค่าสตริงต่อไปนี้ (ตัวอย่างเช่น มีพร็อพเพอร์ตี้ v: อธิบายภายหลัง)
  • 'boolean' - ค่าบูลีนของ JavaScript ("จริง" หรือ "เท็จ") ค่าตัวอย่าง: v:'true'
  • "number" - ค่าตัวเลข JavaScript ค่าตัวอย่าง: v:7 , v:3.14, v:-55
  • 'string' - ค่าสตริง JavaScript ค่าตัวอย่าง: v:'hello'
  • "date" - ออบเจ็กต์วันที่ของ JavaScript (เดือนแบบศูนย์) ที่มีการตัดเวลา ค่าตัวอย่าง: v:new Date(2008, 0, 15)
  • 'datetime' - ออบเจ็กต์วันที่ของ JavaScript ที่รวมเวลา ค่าตัวอย่าง: v:new Date(2008, 0, 15, 14, 30, 45)
  • "timeofday" - อาร์เรย์ของตัวเลข 3 ตัวและตัวเลือกที่ 4 (ไม่บังคับ) แสดงชั่วโมง (0 หมายถึงเที่ยงคืน) นาที วินาที และมิลลิวินาที (ไม่บังคับ) ค่าตัวอย่าง: v:[8, 15, 0], v: [6, 12, 1, 144]
• id [Optional] รหัสสตริงของคอลัมน์ ต้องไม่ซ้ำกันในตาราง ใช้อักขระที่เป็นตัวอักษรและตัวเลขคละกันแบบพื้นฐาน เพื่อที่หน้าเว็บโฮสต์จะได้ไม่ต้องใช้ Escape ประสิทธิภาพสูงเพื่อเข้าถึงคอลัมน์ใน JavaScript โปรดระวังอย่าเลือกคำหลัก JavaScript ตัวอย่าง: id:'col_1'
• label [Optional] ค่าสตริงที่การแสดงข้อมูลผ่านภาพบางรายการแสดงสำหรับคอลัมน์นี้ ตัวอย่าง: label:'Height'
• pattern [ไม่บังคับ] รูปแบบสตริงที่แหล่งข้อมูลใช้เพื่อจัดรูปแบบค่าคอลัมน์ตัวเลข วันที่ หรือเวลา ชื่อนี้ใช้สำหรับการอ้างอิงเท่านั้น คุณอาจไม่จำเป็นต้องอ่านรูปแบบ และไม่จำเป็นต้องมี ไคลเอ็นต์การแสดงภาพของ Google ไม่ได้ใช้ค่านี้ (อ่านค่าที่มีการจัดรูปแบบของเซลล์) หาก DataTable มาจากแหล่งข้อมูลเพื่อตอบสนองการค้นหาที่มีอนุประโยค format รูปแบบที่คุณระบุในวลีนั้นอาจแสดงในค่านี้ มาตรฐานรูปแบบที่แนะนำคือ ICU DecimalFormat และ SimpleDateFormat
• p [ไม่บังคับ] ออบเจ็กต์ที่เป็นแผนที่ค่าที่กำหนดเองที่ใช้กับเซลล์ ค่าเหล่านี้เป็นประเภท JavaScript ใดก็ได้ หากการแสดงภาพรองรับพร็อพเพอร์ตี้ระดับเซลล์ ก็จะอธิบายพร็อพเพอร์ตี้นั้น มิเช่นนั้นระบบจะไม่สนใจพร็อพเพอร์ตี้นี้ เช่น p:{style: 'border: 1px solid green;'}

cols ตัวอย่าง

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows พร็อพเพอร์ตี้

พร็อพเพอร์ตี้ rows มีอาร์เรย์ของออบเจ็กต์แถว

ออบเจ็กต์แถวแต่ละรายการมีพร็อพเพอร์ตี้ที่จำเป็น 1 รายการที่ชื่อ c ซึ่งเป็นอาร์เรย์ของเซลล์ในแถวนั้น และยังมีพร็อพเพอร์ตี้ p ที่ไม่บังคับซึ่งกำหนดแมปค่าที่กำหนดเองที่กำหนดเองเพื่อกำหนดให้กับทั้งแถว หากการแสดงภาพรองรับพร็อพเพอร์ตี้ระดับแถว ระบบจะอธิบายพร็อพเพอร์ตี้นั้น มิฉะนั้นระบบจะไม่สนใจพร็อพเพอร์ตี้นี้

ออบเจ็กต์เซลล์

แต่ละเซลล์ในตารางมีการอธิบายโดยออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้

• v [ไม่บังคับ] ค่าของเซลล์ ประเภทข้อมูลควรตรงกับประเภทข้อมูลคอลัมน์ หากเซลล์เป็นค่าว่าง พร็อพเพอร์ตี้ v ควรเป็นค่าว่าง แต่ยังมีพร็อพเพอร์ตี้ f และ p ได้อยู่
• f [ไม่บังคับ] เวอร์ชันสตริงของค่า v ซึ่งจัดรูปแบบสำหรับการแสดงผล โดยปกติค่าต่างๆ จะตรงกัน แต่ไม่จำเป็นต้องระบุ ดังนั้น หากคุณระบุ Date(2008, 0, 1) สำหรับ v คุณควรระบุ "1 มกราคม 2008" หรือสตริงดังกล่าวสำหรับพร็อพเพอร์ตี้นี้ ระบบจะไม่ตรวจสอบค่านี้กับค่า v การแสดงภาพจะไม่ใช้ค่านี้ในการคำนวณ แต่จะใช้เป็นป้ายกำกับสำหรับการแสดงผลเท่านั้น หากไม่ระบุ ระบบจะสร้างเวอร์ชันสตริงของ v โดยอัตโนมัติโดยใช้ตัวจัดรูปแบบเริ่มต้น คุณจะแก้ไขค่า f ได้โดยใช้ตัวจัดรูปแบบของคุณเอง หรือจะตั้งค่าด้วย setFormattedValue() หรือ setCell() หรือดึงข้อมูลด้วย getFormattedValue() ก็ได้
• p [ไม่บังคับ] ออบเจ็กต์ที่เป็นแผนที่ค่าที่กำหนดเองที่ใช้กับเซลล์ ค่าเหล่านี้เป็นประเภท JavaScript ใดก็ได้ หากการแสดงภาพรองรับพร็อพเพอร์ตี้ระดับเซลล์ ก็จะอธิบายพร็อพเพอร์ตี้นั้น คุณเรียกดูพร็อพเพอร์ตี้เหล่านี้ได้โดยใช้เมธอด getProperty() และ getProperties() เช่น p:{style: 'border: 1px solid green;'}

เซลล์ในอาร์เรย์แถวควรเรียงลำดับตามคำอธิบายคอลัมน์ใน cols หากต้องการระบุเซลล์ที่เป็นค่าว่าง ให้ระบุ null, เว้นเซลล์ในอาร์เรย์ว่างไว้ หรือละเว้นสมาชิกอาร์เรย์ต่อท้าย ดังนั้น หากต้องการระบุแถวที่มีค่า Null สำหรับ 2 เซลล์แรก คุณอาจระบุ [ , , {cell_val}] หรือ [null, null, {cell_val}]

ต่อไปนี้คือตัวอย่างออบเจ็กต์ตารางที่มี 3 คอลัมน์ซึ่งมีข้อมูล 3 แถว

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

พร็อพเพอร์ตี้ p

พร็อพเพอร์ตี้ p ระดับตารางคือแมปของค่าที่กําหนดเองที่ใช้กับ DataTable ทั้งหมด ค่าเหล่านี้เป็นประเภท JavaScript ใดก็ได้ หากการแสดงข้อมูลผ่านภาพรองรับพร็อพเพอร์ตี้ระดับตารางข้อมูล พร็อพเพอร์ตี้จะอธิบายพร็อพเพอร์ตี้ดังกล่าว มิฉะนั้น พร็อพเพอร์ตี้นี้จะพร้อมใช้ในแอปพลิเคชัน เช่น p:{className: 'myDataTable'}

คลาส DataView

มุมมองอ่านอย่างเดียวของ DataTable ที่เกี่ยวข้อง DataView อนุญาตให้เลือกเฉพาะชุดย่อยของคอลัมน์และ/หรือแถว นอกจากนี้ยังช่วยให้เรียงลำดับคอลัมน์/แถวใหม่ และทำซ้ำคอลัมน์/แถวได้

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

• การเพิ่มหรือการนำคอลัมน์ออกจากตารางที่สำคัญจะไม่มีผลต่อข้อมูลพร็อพเพอร์ตี้ และอาจทำให้เกิดลักษณะการทำงานที่ไม่คาดคิดในข้อมูลพร็อพเพอร์ตี้ คุณจะต้องสร้าง DataView ใหม่จาก DataTable เพื่อรับการเปลี่ยนแปลงเหล่านี้
• การเพิ่มหรือนำแถวออกจากตารางที่สำคัญนั้นปลอดภัย และการเปลี่ยนแปลงจะส่งผลไปยังมุมมองทันที (แต่คุณต้องเรียกใช้ draw() ในการแสดงภาพหลังจากการเปลี่ยนแปลงนี้เพื่อให้ระบบแสดงผลชุดแถวใหม่) โปรดทราบว่าหากมุมมองของคุณได้กรองแถวออกด้วยการเรียกใช้เมธอด setRows() or hideRows() รายการใดรายการหนึ่ง และคุณเพิ่มหรือนำแถวออกจากตารางที่สำคัญ ลักษณะการทำงานจะไม่เป็นไปตามที่คาดไว้ คุณต้องสร้าง DataView ใหม่เพื่อแสดงตารางใหม่
• การเปลี่ยนค่าเซลล์ในเซลล์ที่มีอยู่จะปลอดภัย และระบบจะเผยแพร่การเปลี่ยนแปลงไปยัง DataView ทันที (แต่คุณต้องเรียกใช้ draw() ในการแสดงภาพหลังจากการเปลี่ยนแปลงนี้เพื่อให้ระบบแสดงผลค่าเซลล์ใหม่)

คุณยังสร้าง DataView จาก DataView อื่นได้ โปรดทราบว่าเมื่อใดก็ตามที่มีการพูดถึงตารางหรือข้อมูลพร็อพเพอร์ตี้ จะหมายถึงระดับที่อยู่ต่ำกว่าระดับนี้ กล่าวคือ ออบเจ็กต์ข้อมูลที่ใช้ในการสร้าง DataView นี้

DataView ยังรองรับคอลัมน์ที่คำนวณด้วย ซึ่งเป็นคอลัมน์ที่มีการคำนวณค่าแบบเรียลไทม์โดยใช้ฟังก์ชันที่คุณระบุ ตัวอย่างเช่น คุณสามารถรวมคอลัมน์ที่เป็นผลรวมของคอลัมน์ก่อนหน้า 2 คอลัมน์ หรือคอลัมน์ที่คำนวณและแสดงไตรมาสตามปฏิทินจากคอลัมน์อื่น ดูรายละเอียดเพิ่มเติมได้ที่ setColumns()

เมื่อแก้ไข DataView ด้วยการซ่อนหรือแสดงแถวหรือคอลัมน์ การแสดงภาพจะไม่ได้รับผลกระทบจนกว่าคุณจะเรียกใช้ draw() ในการแสดงภาพอีกครั้ง

คุณรวม DataView.getFilteredRows() กับ DataView.setRows() เพื่อสร้าง DataView ที่มีข้อมูลชุดย่อยที่น่าสนใจได้ ดังที่แสดงด้านล่างนี้

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
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));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

ผู้ผลิต

การสร้างอินสแตนซ์ DataView ใหม่มี 2 วิธีดังนี้

เครื่องมือสร้าง 1

var myView = new google.visualization.DataView(data)

data

DataTable หรือ DataView ที่ใช้เริ่มต้นมุมมอง โดยค่าเริ่มต้น มุมมองจะมีคอลัมน์และแถวทั้งหมดในตารางหรือมุมมองข้อมูลที่สำคัญ ตามลำดับเดิม หากต้องการซ่อนหรือแสดงแถวหรือคอลัมน์ในมุมมองนี้ ให้เรียกเมธอด set...() หรือ hide...() ที่เหมาะสม

ดูเพิ่มเติม

setColumns(), hideColumns(), setRows(), hideRows()

เครื่องมือสร้าง 2

ตัวสร้างนี้สร้าง DataView ใหม่โดยกำหนด DataView ที่เป็นอนุกรมให้กับ DataTable ซึ่งจะช่วยคุณสร้าง DataView ที่คุณเรียงอันดับโดยใช้ DataView.toJSON() ขึ้นใหม่

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)

ข้อมูล

ออบเจ็กต์ DataTable ที่คุณใช้สร้าง DataView ซึ่ง เรียกใช้ DataView.toJSON() หากตารางนี้แตกต่างจากตารางเดิม คุณจะได้รับผลลัพธ์ที่คาดเดาไม่ได้

viewAsJson

สตริง JSON ที่แสดงผลโดย DataView.toJSON() นี่คือคําอธิบายแถวที่จะแสดงหรือซ่อนจากตารางข้อมูล data

วิธีการ

// Show some columns directly from the underlying data.
// Shows column 3 twice.
view.setColumns([3, 4, 3, 2]);

// Underlying table has a column specifying a value in centimeters.
// The view imports this directly, and creates a calculated column
// that converts the value into inches.
view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]);
function cmToInches(dataTable, rowNum){
  return Math.floor(dataTable.getValue(rowNum, 1) / 2.54);
}

คลาส Wrapper ของแผนภูมิ

คลาส ChartWrapper ใช้ในการรวมแผนภูมิและจัดการการโหลด การวาด และการค้นหาแหล่งข้อมูลทั้งหมดสำหรับแผนภูมิของคุณ ชั้นเรียนจะแสดงวิธีการที่สะดวกสำหรับการตั้งค่าในแผนภูมิและวาดแผนภูมิ คลาสนี้ทำให้การอ่านจากแหล่งข้อมูลง่ายขึ้น เนื่องจากคุณไม่ต้องสร้างเครื่องจัดการ Callback ของการค้นหา และยังใช้เพื่อบันทึกแผนภูมิไว้ใช้ซ้ำได้ง่ายๆ ด้วย

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

อย่างไรก็ตาม ปัจจุบัน ChartWrapper เผยแพร่เฉพาะชุดย่อยของเหตุการณ์ที่แสดงโดยแผนภูมิ ซึ่งได้แก่ "เลือก" "พร้อม" และ "ข้อผิดพลาด" เหตุการณ์อื่นๆ จะไม่ส่งผ่านอินสแตนซ์ ChartWrapper หากต้องการรับเหตุการณ์อื่นๆ คุณต้องเรียกใช้ getChart() และสมัครใช้บริการเหตุการณ์โดยตรงในแฮนเดิลแผนภูมิ ดังที่แสดงที่นี่

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

ผู้ผลิต

ChartWrapper(opt_spec)

opt_spec

[ไม่บังคับ] - ออบเจ็กต์ JSON ที่กำหนดแผนภูมิ หรือเวอร์ชันสตริงต่อเนื่องของออบเจ็กต์นั้น รูปแบบของออบเจ็กต์นี้แสดงอยู่ในเอกสารประกอบของ DrawChart() หากไม่ได้ระบุ คุณต้องตั้งค่าพร็อพเพอร์ตี้ที่เหมาะสมทั้งหมดโดยใช้เมธอด set... ที่ออบเจ็กต์นี้เปิดเผย

วิธีการ

ChartWrapper จะแสดงเมธอดเพิ่มเติมต่อไปนี้

กิจกรรม

ออบเจ็กต์ ChartWrapper จะแสดงเหตุการณ์ต่อไปนี้ โปรดทราบว่าคุณต้องเรียกใช้ ChartWrapper.draw() ก่อน ระบบจึงจะส่งเหตุการณ์ได้

ตัวอย่าง

ข้อมูลโค้ด 2 รายการต่อไปนี้จะสร้างแผนภูมิเส้นที่เทียบเท่า ตัวอย่างที่ 1 ใช้รูปแบบตัวอักษร JSON เพื่อกำหนดแผนภูมิ ตัวอย่างที่ 2 ใช้เมธอด ChartWrapper เพื่อตั้งค่าเหล่านี้

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

แผนภูมิเดียวกัน แต่กำลังใช้เมธอด Setter:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

คลาสเครื่องมือแก้ไขแผนภูมิ

คลาส ChartEditor ใช้สำหรับเปิดกล่องโต้ตอบในหน้าเว็บที่ช่วยให้ผู้ใช้ปรับแต่งการแสดงภาพได้อย่างรวดเร็ว

วิธีใช้ ChartEditor

1. โหลดแพ็กเกจ charteditor ใน google.charts.load() ให้โหลดแพ็กเกจ "charteditor" คุณไม่จำเป็นต้องโหลดแพ็กเกจสำหรับประเภทแผนภูมิที่คุณแสดงผลในตัวแก้ไข เครื่องมือแก้ไขแผนภูมิจะโหลดแพ็กเกจตามที่คุณต้องการ
2. สร้างออบเจ็กต์ ChartWrapper ที่กำหนดแผนภูมิให้ผู้ใช้ปรับแต่ง แผนภูมินี้จะแสดงในกล่องโต้ตอบและผู้ใช้ใช้ตัวแก้ไขเพื่อออกแบบแผนภูมิใหม่ เปลี่ยนประเภทแผนภูมิ หรือแม้กระทั่งเปลี่ยนข้อมูลต้นฉบับ
3. สร้างอินสแตนซ์ ChartEditor ใหม่และลงทะเบียนเพื่อฟังเหตุการณ์ "ok" ระบบจะส่งเหตุการณ์นี้เมื่อผู้ใช้คลิกปุ่ม "ตกลง" บนกล่องโต้ตอบ เมื่อได้รับแล้ว คุณควรเรียกใช้ ChartEditor.getChartWrapper() เพื่อเรียกข้อมูลแผนภูมิที่ผู้ใช้แก้ไข
4. โทรหา ChartEditor.openDialog() ซึ่งผ่านใน ChartWrapper การดำเนินการนี้จะเปิดกล่องโต้ตอบ ปุ่มกล่องโต้ตอบช่วยให้ผู้ใช้ปิดเครื่องมือแก้ไขได้ อินสแตนซ์ ChartEditor พร้อมใช้งานตราบเท่าที่อยู่ในขอบเขต อินสแตนซ์จะไม่ถูกทำลายโดยอัตโนมัติหลังจากที่ผู้ใช้ปิดกล่องโต้ตอบ
5. หากต้องการอัปเดตแผนภูมิในโค้ด โปรดโทรไปที่ setChartWrapper()

วิธีการ

ตัวเลือก

เครื่องมือแก้ไขแผนภูมิรองรับตัวเลือกต่อไปนี้

กิจกรรม

เครื่องมือแก้ไขแผนภูมิจะแสดงเหตุการณ์ต่อไปนี้

ตัวอย่าง

โค้ดตัวอย่างต่อไปนี้จะเปิดกล่องโต้ตอบของเครื่องมือแก้ไขแผนภูมิที่มีแผนภูมิเส้น หากผู้ใช้คลิก "ตกลง" ระบบจะบันทึกแผนภูมิที่แก้ไขไว้ใน <div> ที่ระบุไว้ในหน้า

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

วิธีการจัดการข้อมูล

เนมสเปซ google.visualization.data มีเมธอดแบบคงที่เพื่อดำเนินการแบบเดียวกับ SQL บนออบเจ็กต์ DataTable เช่น การรวมหรือจัดกลุ่มตามค่าคอลัมน์

เนมสเปซ google.visualization.data จะแสดงเมธอดต่อไปนี้

group()

รับออบเจ็กต์ DataTable ที่มีการป้อนข้อมูลและดำเนินการ GROUP BY ที่คล้ายกับ SQL โดยแสดงผลตารางที่มีแถวที่จัดกลุ่มตามค่าคอลัมน์ที่ระบุ โปรดทราบว่าการดำเนินการนี้จะไม่แก้ไขอินพุต DataTable

ตารางที่แสดงผลมี 1 แถวสำหรับชุดค่าผสมแต่ละชุดในคอลัมน์คีย์ที่ระบุ แต่ละแถวจะมีคอลัมน์คีย์และอีก 1 คอลัมน์ที่มีค่าคอลัมน์รวมจากทุกแถวที่ตรงกับชุดคีย์ (เช่น ผลรวมหรือจำนวนค่าทั้งหมดในคอลัมน์ที่ระบุ)

เนมสเปซ google.visualization.data มีค่าการรวมที่เป็นประโยชน์หลายค่า (เช่น sum และ count) แต่คุณจะกำหนดค่าของคุณเองได้ (เช่น standardDeviation หรือ secondHighest) โดยจะมีคำแนะนำเกี่ยวกับวิธีการกำหนดผู้รวบรวมข้อมูลของคุณเอง หลังคำอธิบายวิธีการ

ไวยากรณ์

google.visualization.data.group(data_table, keys, columns)

data_table

อินพุต DataTable การแก้ไขนี้จะไม่เปลี่ยนแปลงโดยการเรียกใช้ group()

คีย์

อาร์เรย์ของตัวเลขและ/หรือออบเจ็กต์ที่ระบุคอลัมน์ที่จะจัดกลุ่ม ตารางผลลัพธ์จะมีทุกคอลัมน์ในอาร์เรย์นี้ และทุกคอลัมน์ใน columns หากเป็นตัวเลข นี่คือดัชนีคอลัมน์ของอินพุต DataTable เพื่อจัดกลุ่ม หากเป็นออบเจ็กต์ จะมีฟังก์ชันที่แก้ไขคอลัมน์ที่ระบุได้ (เช่น เพิ่ม 1 ให้กับค่าในคอลัมน์นั้น) ออบเจ็กต์ต้องมีพร็อพเพอร์ตี้ต่อไปนี้

• column - ตัวเลขที่เป็นดัชนีคอลัมน์จาก dt ที่จะนำการเปลี่ยนรูปแบบไปใช้
• modifier - ฟังก์ชันที่ยอมรับค่า 1 ค่า (ค่าเซลล์ในคอลัมน์นั้นสำหรับแต่ละแถว) และแสดงผลค่าที่แก้ไข ฟังก์ชันนี้ใช้ปรับเปลี่ยนค่าคอลัมน์เพื่อช่วยในการจัดกลุ่ม เช่น การเรียกใช้ฟังก์ชัน "ไตรมาส" ซึ่งคํานวณไตรมาสจากคอลัมน์วันที่ เพื่อให้ API จัดกลุ่มแถวตามไตรมาสได้ ค่าที่คำนวณแล้วจะแสดงในคอลัมน์คีย์ในตารางผลลัพธ์ คุณสามารถประกาศฟังก์ชันนี้ในบรรทัดภายในออบเจ็กต์นี้ หรืออาจเป็นฟังก์ชันที่คุณกําหนดไว้ที่อื่นในโค้ด (ต้องอยู่ภายในขอบเขตการเรียกใช้) API มีฟังก์ชันตัวปรับแต่งแบบง่าย 1 ฟังก์ชัน ดูวิธีการสร้างฟังก์ชันที่มีประโยชน์มากขึ้นของคุณเอง คุณต้องทราบประเภทข้อมูลที่ฟังก์ชันนี้ยอมรับได้ และเรียกใช้เฉพาะข้อมูลในคอลัมน์ประเภทดังกล่าวเท่านั้น นอกจากนี้ คุณต้องทราบประเภทการแสดงผลของฟังก์ชันนี้และประกาศในพร็อพเพอร์ตี้ type ตามที่อธิบายไว้ถัดไปด้วย
• type - ประเภทที่ตัวแก้ไขฟังก์ชันแสดงผล ชื่อนี้ควรเป็นชื่อประเภทสตริง JavaScript เช่น "number" หรือ "boolean"
• label - [ไม่บังคับ] ป้ายกำกับสตริงที่จะกำหนดคอลัมน์นี้ใน DataTable ที่แสดงผล
• id - [ไม่บังคับ] รหัสสตริงที่จะกำหนดคอลัมน์นี้ใน DataTable ที่แสดงผล

เช่น [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]

คอลัมน์

[ไม่บังคับ] ช่วยให้คุณระบุคอลัมน์นอกเหนือจากคอลัมน์หลักที่จะรวมไว้ในตารางเอาต์พุตได้ เนื่องจากแถวทั้งหมดในกลุ่มแถวได้รับการบีบอัดเป็นแถวเอาต์พุตเดียว คุณจึงต้องกำหนดค่าที่จะแสดงสำหรับกลุ่มแถวนั้น เช่น คุณอาจเลือกแสดงค่าคอลัมน์จากแถวแรกในชุด หรือแสดงค่าเฉลี่ยของแถวทั้งหมดในกลุ่มก็ได้ columns คืออาร์เรย์ของออบเจ็กต์ที่มีพร็อพเพอร์ตี้ดังต่อไปนี้

• column - ตัวเลขที่ระบุดัชนีของคอลัมน์ที่จะแสดง
• aggregation - ฟังก์ชันที่ยอมรับอาร์เรย์ของค่าทั้งหมดของคอลัมน์นี้ในกลุ่มแถวนี้ และแสดงผลค่าเดียวที่จะแสดงในแถวผลลัพธ์ ค่าผลลัพธ์ต้องเป็นประเภทที่พร็อพเพอร์ตี้ type ของออบเจ็กต์ระบุไว้ ด้านล่างนี้เป็นรายละเอียดเกี่ยวกับการสร้างฟังก์ชันการรวมข้อมูลของคุณเอง คุณต้องทราบว่าวิธีการนี้ยอมรับข้อมูลประเภทใดและจะเรียกใช้ข้อมูลในคอลัมน์ของประเภทที่เหมาะสมเท่านั้น API มีฟังก์ชันการรวมที่เป็นประโยชน์มากมาย โปรดดูรายการที่หัวข้อฟังก์ชันการรวมที่ระบุด้านล่าง หรือการสร้างฟังก์ชันการรวมเพื่อดูวิธีเขียนฟังก์ชันการรวมของคุณเอง
• type - ประเภทการแสดงผลของฟังก์ชันการรวม ชื่อนี้ควรเป็นชื่อประเภทสตริง JavaScript เช่น "number" หรือ "boolean"
• label - [ไม่บังคับ] ป้ายกำกับสตริงที่จะใช้กับคอลัมน์นี้ในตารางที่แสดงผล
• id - [ไม่บังคับ] รหัสสตริงที่จะใช้กับคอลัมน์นี้ในตารางที่แสดงผล

มูลค่าการคืนสินค้า

DataTable ที่มี 1 คอลัมน์สำหรับแต่ละคอลัมน์ที่ระบุไว้ในคีย์ และ 1 คอลัมน์สำหรับแต่ละคอลัมน์ที่แสดงอยู่ในคอลัมน์ ตารางจะจัดเรียงตามแถวสำคัญจากซ้ายไปขวา

ตัวอย่าง

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

ฟังก์ชันตัวปรับแต่งที่มีให้

API มีฟังก์ชันตัวปรับแต่งต่อไปนี้ซึ่งคุณส่งผ่านไปยังคีย์ได้ modifier เพื่อปรับแต่งลักษณะการจัดกลุ่ม

ฟังก์ชันการรวมข้อมูลที่มีให้

API มีฟังก์ชันการรวมต่อไปนี้ซึ่งคุณส่งผ่านไปยังคอลัมน์ได้ aggregation อาร์เรย์

การสร้างฟังก์ชันตัวปรับแต่ง

คุณจะสร้างฟังก์ชันตัวปรับแต่งเพื่อดำเนินการเปลี่ยนรูปแบบค่าคีย์แบบง่ายๆ ก่อนที่ฟังก์ชัน group() จะจัดกลุ่มแถวได้ ฟังก์ชันนี้ใช้ค่าเซลล์เพียงค่าเดียวและดำเนินการกับค่าดังกล่าว (เช่น เพิ่ม 1 ลงในค่า) แล้วแสดงผลค่า ประเภทอินพุตและการส่งกลับไม่จำเป็นต้องเป็นประเภทเดียวกัน แต่ผู้โทรต้องทราบประเภทอินพุตและเอาต์พุต ต่อไปนี้คือตัวอย่างของฟังก์ชันที่ยอมรับวันที่และแสดงผลไตรมาส

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

การสร้างฟังก์ชันการรวม

คุณสร้างฟังก์ชันการรวมที่ยอมรับชุดของคอลัมน์ในกลุ่มแถวและแสดงผลตัวเลขเดียวได้ เช่น การแสดงผลจำนวนหรือค่าเฉลี่ยของค่า ต่อไปนี้คือการใช้งานฟังก์ชันการรวมจำนวนที่มีให้ ซึ่งจะแสดงผลจำนวนแถวที่อยู่ในกลุ่มแถว

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

Join()

วิธีนี้จะรวมตารางข้อมูล 2 ตาราง (ออบเจ็กต์ DataTable หรือ DataView) เข้าเป็นตารางผลลัพธ์เดียว ซึ่งคล้ายกับคำสั่ง JOIN ของ SQL คุณระบุคู่คอลัมน์อย่างน้อย 1 คู่ (คอลัมน์ key) ระหว่าง 2 ตาราง และตารางเอาต์พุตจะมีแถวตามวิธีการผนวกที่คุณระบุ กล่าวคือ เฉพาะแถวที่คีย์ทั้ง 2 ตรงกันเท่านั้น แถวทั้งหมดจากตารางเดียว หรือทุกแถวจากทั้ง 2 ตาราง ไม่ว่าคีย์จะตรงกันหรือไม่ก็ตาม ตารางผลลัพธ์จะมีเฉพาะคอลัมน์หลักและคอลัมน์เพิ่มเติมที่คุณระบุ โปรดทราบว่า dt2 มีคีย์ซ้ำกันไม่ได้ แต่ dt1 มีไม่ได้ คำว่า "คีย์" หมายถึงชุดค่าผสมของค่าคอลัมน์คีย์ทั้งหมด ไม่ใช่ค่าคอลัมน์ของคีย์ที่เฉพาะเจาะจง ดังนั้นหากแถวมีค่าของเซลล์ A | B | C และคอลัมน์ 0 และ 1 เป็นคอลัมน์คีย์ คีย์สำหรับแถวนั้นจะเป็น AB

ไวยากรณ์

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);

dt1

ป้อนข้อมูล DataTable เพื่อรวม dt2

dt2

ป้อนข้อมูล DataTable ให้รวมเข้ากับ dt1 ตารางนี้มีคีย์ที่เหมือนกันหลายรายการไม่ได้ (เมื่อคีย์เป็นชุดค่าผสมของค่าคอลัมน์คีย์)

joinMethod

สตริงที่ระบุประเภทการผนวก หาก dt1 มีหลายแถวที่ตรงกับแถว dt2 ตารางเอาต์พุตจะรวมแถว dt1 ที่ตรงกันทั้งหมด เลือกจากค่าต่อไปนี้

• "เต็ม" - ตารางเอาต์พุตจะมีแถวทั้งหมดจากทั้ง 2 ตาราง ไม่ว่าคีย์จะตรงกันหรือไม่ก็ตาม แถวที่ไม่ตรงกันจะมีรายการเซลล์ที่เป็นค่าว่าง โดยแถวที่ตรงกันจะผนวกกัน
• "ภายใน" - จำนวนรวมทั้งหมดที่กรองให้รวมเฉพาะแถวที่ตรงกับคีย์
• "left" - ตารางเอาต์พุตจะรวมแถวทั้งหมดจาก dt1 ไม่ว่าจะมีแถวที่ตรงกันจาก dt2 หรือไม่ก็ตาม
• "right" - ตารางเอาต์พุตจะรวมแถวทั้งหมดจาก dt2 ไม่ว่าจะมีแถวที่ตรงกันจาก dt1 หรือไม่ก็ตาม

คีย์

อาร์เรย์ของคอลัมน์คีย์ที่จะเปรียบเทียบจากทั้ง 2 ตาราง แต่ละคู่เป็นอาร์เรย์ 2 เอลิเมนต์ อันแรกเป็นคีย์ใน dt1 ส่วนอันที่ 2 เป็นคีย์ใน dt2 อาร์เรย์นี้ระบุคอลัมน์ตามดัชนี รหัส หรือป้ายกำกับได้ โปรดดู getColumnIndex
คอลัมน์ต้องเป็นประเภทเดียวกันในทั้ง 2 ตาราง คีย์ที่ระบุทั้งหมดต้องตรงกันตามกฎที่กำหนดโดย joinMethod จึงจะรวมแถวจากตารางได้ คอลัมน์คีย์จะรวมอยู่ในตารางเอาต์พุตเสมอ เฉพาะ dt1 ซึ่งเป็นตารางทางซ้ายมือเท่านั้นที่จะมีคีย์ที่ซ้ำกันได้ คีย์ใน dt2 ต้องไม่ซ้ำกัน คำว่า "คีย์" ในที่นี้หมายถึงชุดคอลัมน์คีย์ที่ไม่ซ้ำกัน ไม่ใช่ค่าแต่ละคอลัมน์ เช่น หากคอลัมน์คีย์คือ A และ B ตารางต่อไปนี้จะมีเฉพาะค่าคีย์ที่ไม่ซ้ำกัน (และใช้เป็น dt2 ได้)

A	B
เจน	สีแดง
เจน	สีน้ำเงิน
เฟรด	สีแดง

ตัวอย่าง: [[0,0], [2,1]] เปรียบเทียบค่าจากคอลัมน์แรกในทั้ง 2 ตารางกับคอลัมน์ที่ 3 จาก dt1 กับคอลัมน์ที่ 2 จาก dt1

dt1Columns

อาร์เรย์ของคอลัมน์จาก dt1 ที่จะรวมไว้ในตารางเอาต์พุต นอกเหนือจากคอลัมน์คีย์ของ dt1 อาร์เรย์นี้ระบุคอลัมน์ตามดัชนี รหัส หรือป้ายกำกับได้ โปรดดู getColumnIndex

dt2Columns

อาร์เรย์ของคอลัมน์จาก dt2 ที่จะรวมไว้ในตารางเอาต์พุต นอกเหนือจากคอลัมน์คีย์ของ dt2 อาร์เรย์นี้ระบุคอลัมน์ตามดัชนี รหัส หรือป้ายกำกับได้ โปรดดู getColumnIndex

มูลค่าการคืนสินค้า

DataTable ที่มีคอลัมน์คีย์ dt1Columns และ dt1Columns ตารางนี้จัดเรียงตามคอลัมน์หลักจากซ้ายไปขวา เมื่อ joinMethod มีค่าเป็น "terior" แล้ว ควรเติมข้อมูลเซลล์คีย์ทั้งหมด สำหรับวิธีการผนวกแบบอื่นๆ หากไม่พบคีย์ที่ตรงกัน ตารางจะมีค่า Null สำหรับเซลล์คีย์ที่ไม่ตรงกัน

ตัวอย่าง

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

ตัวจัดรูปแบบ

Google Visualization API มีตัวจัดรูปแบบที่สามารถใช้เพื่อจัดรูปแบบข้อมูลในการแสดงภาพอีกครั้งได้ ตัวจัดรูปแบบเหล่านี้จะเปลี่ยนค่าที่จัดรูปแบบของคอลัมน์ที่ระบุในแถวทั้งหมด โปรดทราบว่า

• ตัวจัดรูปแบบจะแก้ไขเฉพาะค่าที่จัดรูปแบบแล้วเท่านั้น ไม่ใช่ค่าที่อยู่เบื้องหลัง เช่น ค่าที่แสดงจะเป็น "฿30,000.00" แต่มูลค่าที่อยู่เบื้องหลังยังคงเป็น "1000"
• ตัวจัดรูปแบบจะมีผลทีละ 1 คอลัมน์เท่านั้น หากต้องการจัดรูปแบบหลายคอลัมน์ใหม่ ให้ใช้ตัวจัดรูปแบบกับแต่ละคอลัมน์ที่ต้องการเปลี่ยนแปลง
• หากคุณใช้ตัวจัดรูปแบบที่ผู้ใช้กำหนดด้วย ตัวจัดรูปแบบของ Google Visualization บางรุ่นจะลบล้างตัวจัดรูปแบบที่ผู้ใช้กำหนดทั้งหมด

การจัดรูปแบบจริงที่ใช้กับข้อมูลได้มาจากภาษาที่โหลด API ไว้ ดูรายละเอียดเพิ่มเติมได้ที่ การโหลดแผนภูมิที่มีภาษาเฉพาะ

สำคัญ: ตัวจัดรูปแบบใช้ได้กับ DataTable เท่านั้น โดยจะใช้กับ DataView ไม่ได้ (ออบเจ็กต์ DataView รายการเป็นแบบอ่านอย่างเดียว)

ขั้นตอนทั่วไปในการใช้ตัวจัดรูปแบบมีดังนี้

1. รับออบเจ็กต์ DataTable ที่สร้างขึ้น
2. สำหรับแต่ละคอลัมน์ที่ต้องการจัดรูปแบบใหม่ ให้ทำดังนี้
   1. สร้างออบเจ็กต์ที่ระบุตัวเลือกทั้งหมดสำหรับผู้จัดรูปแบบ นี่คือออบเจ็กต์ JavaScript พื้นฐานที่มีชุดพร็อพเพอร์ตี้และค่า ดูเอกสารประกอบของเครื่องมือจัดรูปแบบเพื่อดูพร็อพเพอร์ตี้ที่รองรับ (หรือคุณจะส่งผ่านออบเจ็กต์รูปแบบสัญกรณ์ออบเจ็กต์ที่ระบุตัวเลือกของคุณก็ได้)
   2. สร้างตัวจัดรูปแบบโดยการส่งผ่านในออบเจ็กต์ตัวเลือก
   3. เรียกใช้ formatter.format(table, colIndex) โดยส่งผ่าน DataTable และหมายเลขคอลัมน์ (แบบศูนย์) ของข้อมูลที่จะจัดรูปแบบใหม่ โปรดทราบว่าคุณใช้เครื่องมือจัดรูปแบบได้ 1 ตัวกับแต่ละคอลัมน์เท่านั้น การใช้ตัวจัดรูปแบบที่ 2 จะเป็นการเขียนทับเอฟเฟกต์ของคอลัมน์แรก
      สำคัญ: ตัวจัดรูปแบบจำนวนมากต้องใช้แท็ก HTML เพื่อแสดงการจัดรูปแบบพิเศษ หากการแสดงข้อมูลผ่านภาพรองรับตัวเลือก allowHtml คุณควรตั้งค่าให้เป็นจริง

ตัวอย่างการเปลี่ยนค่าวันที่ที่จัดรูปแบบของคอลัมน์วันที่ให้ใช้รูปแบบวันที่แบบยาว ("1 มกราคม 2009") มีดังนี้

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
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));

// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});

// Reformat our data.
formatter.format(data, 1);

// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, {showRowNumber: true});

ตัวจัดรูปแบบส่วนใหญ่จะแสดง 2 วิธีต่อไปนี้

วิธีการ	คำอธิบาย
google.visualization.formatter_name(options)	ตัวสร้าง โดยที่ formatter_name เป็นชื่อ Formatterclass ที่เฉพาะเจาะจง options - ออบเจ็กต์ JavaScript ทั่วไปที่ระบุตัวเลือกสำหรับการจัดรูปแบบดังกล่าว ออบเจ็กต์นี้เป็นออบเจ็กต์ทั่วไปที่มีคู่พร็อพเพอร์ตี้/ค่า โดยมีพร็อพเพอร์ตี้เฉพาะสำหรับตัวจัดรูปแบบดังกล่าว ดูเอกสารประกอบของรูปแบบเฉพาะเพื่อดูข้อมูลตัวเลือกที่รองรับ ต่อไปนี้คือตัวอย่าง 2 วิธีในการเรียกใช้เครื่องมือสร้างสำหรับออบเจ็กต์ DateFormat โดยส่งในพร็อพเพอร์ตี้ 2 รายการ // Object literal technique var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5}); // Equivalent property setting technique var options = new Object(); options['formatType'] = 'long'; options['timeZone'] = -5; var formatter = new google.visualization.DateFormat(options);
format(data, colIndex)	จัดรูปแบบข้อมูลในคอลัมน์ที่ระบุใหม่ data - DataTable ที่มีข้อมูลที่จะจัดรูปแบบใหม่ คุณใช้ DataView ที่นี่ไม่ได้ colIndex - ดัชนีฐาน 0 ของคอลัมน์เพื่อจัดรูปแบบ หากต้องการจัดรูปแบบหลายคอลัมน์ คุณต้องเรียกใช้เมธอดนี้หลายครั้งโดยใช้ค่า colIndex ต่างกัน

 

Google Visualization API มีตัวจัดรูปแบบต่อไปนี้

ชื่อตัวจัดรูปแบบ	คำอธิบาย
ArrowFormat	เพิ่มลูกศรขึ้นหรือลงเพื่อบ่งบอกว่าค่าเซลล์อยู่สูงหรือต่ำกว่าค่าที่ระบุ
BarFormat	เพิ่มแถบสี ทิศทางและสีที่ระบุว่าค่าของเซลล์สูงกว่าหรือต่ำกว่าค่าที่ระบุ
ColorFormat	ใส่สีเซลล์โดยพิจารณาว่าค่าอยู่ในช่วงที่ระบุหรือไม่
DateFormat	จัดรูปแบบค่าวันที่หรือวันที่และเวลาในรูปแบบต่างๆ เช่น "1 มกราคม 2009" "1/1/09" และ "1 ม.ค. 2009"
NumberFormat	จัดรูปแบบค่าตัวเลขในด้านต่างๆ
PatternFormat	เชื่อมค่าเซลล์ในแถวเดียวกันไปยังเซลล์ที่ระบุพร้อมข้อความที่กำหนดเอง

ArrowFormat

เพิ่มลูกศรขึ้นหรือลงลงในเซลล์ตัวเลข โดยขึ้นอยู่กับว่าค่าสูงกว่าหรือต่ำกว่าค่าฐานที่ระบุ หากเท่ากับค่าฐาน ระบบจะไม่แสดงลูกศร

ตัวเลือก

ArrowFormat รองรับตัวเลือกต่อไปนี้ซึ่งส่งไปยังเครื่องมือสร้าง

Option	คำอธิบาย
base	ตัวเลขที่ระบุค่าฐาน ซึ่งใช้เพื่อเปรียบเทียบกับค่าเซลล์ หากค่าของเซลล์สูงกว่า เซลล์จะมีลูกศรขึ้นสีเขียว หากค่าของเซลล์ต่ำกว่า จะมีลูกศรลงสีแดง หากค่าเดียวกันจะไม่มีลูกศร

รหัสตัวอย่าง

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
  ['Shoes', {v:12, f:'12.0%'}],
  ['Sports', {v:-7.3, f:'-7.3%'}],
  ['Toys', {v:0, f:'0%'}],
  ['Electronics', {v:-2.1, f:'-2.1%'}],
  ['Food', {v:22, f:'22.0%'}]
]);

var table = new google.visualization.Table(document.getElementById('arrowformat_div'));

var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true});

BarFormat

เพิ่มแถบสีลงในเซลล์ตัวเลข ซึ่งระบุว่าค่าของเซลล์นั้นสูงกว่าหรือต่ำกว่าค่าฐานที่ระบุ

ตัวเลือก

BarFormat รองรับตัวเลือกต่อไปนี้ซึ่งส่งไปยังเครื่องมือสร้าง

Option	ตัวอย่าง คำอธิบาย
base	ตัวเลขซึ่งเป็นค่าฐานที่จะใช้เปรียบเทียบค่าเซลล์ หากค่าเซลล์สูงกว่า ค่าจะถูกวาดทางด้านขวาของฐาน หากค่าต่ำกว่า ค่าจะถูกวาดไปทางซ้าย ค่าเริ่มต้นคือ 0
colorNegative	สตริงที่ระบุส่วนค่าลบของแท่ง ค่าที่เป็นไปได้คือ "แดง" "เขียว" และ "น้ำเงิน" โดยค่าเริ่มต้นคือ "แดง"
colorPositive	สตริงที่ระบุสีของส่วนค่าบวกของแท่ง ค่าที่เป็นไปได้คือ "แดง" "เขียว" และ "น้ำเงิน" ค่าเริ่มต้นคือ "สีน้ำเงิน"
drawZeroLine	บูลีนที่ระบุว่าจะวาดเส้นฐานสีเข้มขนาด 1 พิกเซลหรือไม่เมื่อมีค่าลบ แถบสีเข้มจะช่วยเพิ่มประสิทธิภาพการสแกนแถบสีด้วยภาพ ค่าเริ่มต้นคือ "false"
max	ค่าจำนวนสูงสุดของช่วงแท่ง ค่าเริ่มต้นคือค่าสูงสุดในตาราง
min	ค่าจำนวนต่ำสุดของช่วงแท่ง ค่าเริ่มต้นคือค่าต่ำสุดในตาราง
showValue	หากเป็น "จริง" จะแสดงค่าและแถบ หากเป็น "เท็จ" จะแสดงเฉพาะแถบ ค่าเริ่มต้นคือ True
width	ความหนาของแต่ละแท่งในหน่วยพิกเซล ค่าเริ่มต้นคือ 100

รหัสตัวอย่าง

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('barformat_div'));

var formatter = new google.visualization.BarFormat({width: 120});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

ColorFormat

กำหนดสีให้กับพื้นหน้าหรือพื้นหลังของเซลล์ตัวเลขโดยขึ้นอยู่กับค่าของเซลล์ ตัวจัดรูปแบบนี้ผิดปกติเนื่องจากไม่มีตัวเลือกในตัวสร้าง คุณควรเรียกใช้ addRange() หรือ addGradientRange() กี่ครั้งก็ได้เพื่อเพิ่มช่วงสีก่อนที่จะเรียกใช้ format() ระบุสีในรูปแบบ HTML ที่ยอมรับในรูปแบบใดก็ได้ เช่น "สีดำ", "#000000" หรือ "#000"

วิธีการ

ColorFormat รองรับเมธอดต่อไปนี้

วิธีการ	คำอธิบาย
google.visualization.ColorFormat()	เครื่องมือสร้าง ไม่รับอาร์กิวเมนต์
addRange(from, to, color, bgcolor)	ระบุสีพื้นหน้าและ/หรือสีพื้นหลังของเซลล์โดยขึ้นอยู่กับค่าของเซลล์ เซลล์ที่มีค่าในช่วง from ที่ระบุเป็น to ที่กำหนดจะได้รับการกำหนดเป็น color และ bgcolor สิ่งสำคัญที่ควรทราบคือช่วงดังกล่าวเป็นค่าที่ไม่รวม เนื่องจากการสร้างช่วงจาก 1—1,000 และช่วงวินาทีจาก 1,000 โดยที่ 2,000 จะไม่ครอบคลุมค่า 1,000 from - [String, Number, Date, DateTime หรือ TimeOfDay] ขอบเขตล่าง (รวม) ของช่วง หรือ Null หากค่าเป็น Null จะจับคู่กับ -∞ ระบบจะเปรียบเทียบขอบเขตสตริงตามตัวอักษรกับค่าสตริง to - [สตริง ตัวเลข วันที่ วันที่และเวลา หรือเวลาของวัน] ขอบเขตสูง (ไม่รวม) ของช่วง หรือค่าว่าง หากเป็นค่าว่าง ค่าดังกล่าวจะจับคู่กับ +∞ ระบบจะเปรียบเทียบขอบเขตสตริงตามตัวอักษรกับค่าสตริง color - สีที่จะนำไปใช้กับข้อความในเซลล์ที่ตรงกัน ค่าอาจเป็นค่า "#RRGGBB" หรือค่าคงที่ของสีที่กำหนด (เช่น "#FF0000" หรือ "สีแดง") bgcolor - สีที่จะใช้กับพื้นหลังของเซลล์ที่ตรงกัน ค่าอาจเป็น "#RRGGBB" หรือค่าคงที่ของสีที่กำหนดไว้ (เช่น "#FF0000" หรือ "สีแดง")
addGradientRange(from, to, color, fromBgColor, toBgColor)	กำหนดสีพื้นหลังจากช่วงตามค่าเซลล์ ระบบจะปรับขนาดสีให้ตรงกับค่าของเซลล์ภายในช่วง ตั้งแต่สีขอบเขตล่างไปจนถึงสีขอบเขตบน โปรดทราบว่าวิธีนี้จะเปรียบเทียบค่าสตริงไม่ได้ เนื่องจาก addRange() ทำได้ เคล็ดลับ: ช่วงสีมักทำให้ผู้ชมวัดผลได้แม่นยำได้ยาก ช่วงที่ง่ายที่สุดและอ่านง่ายที่สุดคือตั้งแต่สีที่มีความอิ่มตัวของสีไปจนถึงสีขาว (เช่น #FF0000—FFFFFF) from - [ตัวเลข วันที่ วันที่และเวลา หรือเวลาของวัน] ขอบเขตล่าง (รวม) ของช่วง หรือค่าว่าง หากเป็นค่าว่าง ค่าดังกล่าวจะตรงกับค่า -∞ to - [ตัวเลข วันที่ วันที่และเวลา หรือเวลาของวัน] ขอบเขตที่สูงกว่า (ไม่รวม) ของช่วง หรือค่าว่าง หากเป็นค่าว่าง ค่าดังกล่าวจะมีค่าเท่ากับ +∞ color - สีที่จะนำไปใช้กับข้อความในเซลล์ที่ตรงกัน สีนี้จะเหมือนกันในทุกเซลล์ ไม่ว่าจะมีค่าอะไรก็ตาม fromBgColor - สีพื้นหลังของเซลล์ที่มีค่าการไล่ระดับสีต่ำที่สุด ค่าอาจเป็นค่า "#RRGGBB" หรือค่าคงที่ของสีที่กำหนด (เช่น "#FF0000" หรือ "สีแดง") toBgColor - สีพื้นหลังของเซลล์ที่มีค่าที่อยู่ปลายการไล่ระดับสีระดับสูง ค่าอาจเป็นค่า "#RRGGBB" หรือค่าคงที่ของสีที่กำหนด (เช่น "#FF0000" หรือ "สีแดง")
format(dataTable, columnIndex)	เมธอด format() มาตรฐานเพื่อใช้การจัดรูปแบบกับคอลัมน์ที่ระบุ

รหัสตัวอย่าง

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('colorformat_div'));

var formatter = new google.visualization.ColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

DateFormat

จัดรูปแบบค่า Date ของ JavaScript ได้หลายวิธี เช่น "1 มกราคม 2016" "1/1/16" และ "1 ม.ค. 2016"

ตัวเลือก

DateFormat รองรับตัวเลือกต่อไปนี้ซึ่งส่งไปยังเครื่องมือสร้าง

Option	คำอธิบาย
formatType	ตัวเลือกการจัดรูปแบบด่วนสำหรับวันที่ ระบบรองรับค่าสตริงต่อไปนี้ ซึ่งจะจัดรูปแบบวันที่ 28 กุมภาพันธ์ 2016 ใหม่ตามที่แสดงไว้ "short" - รูปแบบแบบสั้น เช่น "28/2/16" "medium" - รูปแบบสื่อ เช่น "28 กุมภาพันธ์ 2016" "long" - รูปแบบยาว เช่น "28 กุมภาพันธ์ 2016" คุณไม่สามารถระบุทั้ง formatType และ pattern ได้
pattern	รูปแบบของรูปแบบที่กำหนดเองที่จะใช้กับค่า ซึ่งคล้ายกับรูปแบบวันที่และเวลาของ ICU เช่น var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"}); คุณไม่สามารถระบุทั้ง formatType และ pattern ได้ คุณอ่านรายละเอียดเพิ่มเติมเกี่ยวกับรูปแบบได้ในส่วนถัดไป
timeZone	เขตเวลาที่แสดงค่าวันที่ นี่คือค่าตัวเลขซึ่งระบุ GMT + จำนวนเขตเวลานี้ (อาจเป็นลบได้) ออบเจ็กต์วันที่สร้างขึ้นโดยค่าเริ่มต้นด้วยเขตเวลาที่สมมติขึ้นในคอมพิวเตอร์ที่สร้างออบเจ็กต์วันที่ ตัวเลือกนี้ใช้เพื่อแสดงค่าดังกล่าวในเขตเวลาอื่น เช่น หากคุณสร้างออบเจ็กต์วันที่เป็น 17.00 น. บนคอมพิวเตอร์ที่อยู่ในกรีนิช อังกฤษ และระบุเขตเวลาเป็น -5 (options['timeZone'] = -5 หรือเวลาแปซิฟิกตะวันออกในสหรัฐอเมริกา) ค่าที่แสดงจะเป็น 12 เที่ยงตรง

วิธีการ

DateFormat รองรับเมธอดต่อไปนี้

วิธีการ	คำอธิบาย
google.visualization.DateFormat(options)	เครื่องมือสร้าง ดูข้อมูลเพิ่มเติมได้ในส่วนตัวเลือกด้านบน
format(dataTable, columnIndex)	เมธอด format() มาตรฐานเพื่อใช้การจัดรูปแบบกับคอลัมน์ที่ระบุ
formatValue(value)	แสดงผลค่าที่จัดรูปแบบของค่าที่ระบุ วิธีนี้ไม่ต้องใช้ DataTable

รหัสตัวอย่าง

function drawDateFormatTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date (Long)');
  data.addColumn('date', 'Start Date (Medium)');
  data.addColumn('date', 'Start Date (Short)');
  data.addRows([
    ['Mike', new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26)],
    ['Bob', new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0)],
    ['Alice', new Date(2006, 7, 16),
              new Date(2006, 7, 16),
              new Date(2006, 7, 16)]
  ]);

  // Create three formatters in three styles.
  var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
  var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

  // Reformat our data.
  formatter_long.format(data, 1);
  formatter_medium.format(data,2);
  formatter_short.format(data, 3);

  // Draw our data
  var table = new google.visualization.Table(document.getElementById('dateformat_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

ข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบวันที่

รายละเอียดเพิ่มเติมเกี่ยวกับรูปแบบที่รองรับมีดังนี้

รูปแบบนี้จะคล้ายกับรูปแบบวันที่และเวลาของ ICU แต่ยังไม่รองรับรูปแบบต่อไปนี้ A D F g Y u w W ข้อความตามตัวอักษรที่ต้องการให้ปรากฏในเอาต์พุตควรล้อมรอบด้วยเครื่องหมายคำพูดเดี่ยว ยกเว้นเครื่องหมายคำพูดเดี่ยวที่ควรเพิ่มเป็น 2 เท่า ทั้งนี้เพื่อหลีกเลี่ยงการขัดแย้งกันของรูปแบบ "K 'o''clock.'".

รูปแบบ	คำอธิบาย	ตัวอย่างเอาต์พุต
GG	ผู้กำหนดยุค	"โฆษณา"
yy หรือ yyyy	ปี	1996
M	เดือนในรอบปี สำหรับเดือนมกราคม M สร้าง 1 MM สร้าง 01 MMM ผลิต ม.ค. MMMM ผลิตเดือนมกราคม	"กรกฎาคม" "07"
d	วันในเดือน ค่า "d" ที่เกินมาจะเพิ่มเลข 0 นำหน้า	10
h	ชั่วโมงในรูปแบบ 12 ชั่วโมง ค่า "h" ที่เกินมาจะบวกเลข 0 ที่นำหน้า	12
ฮิต	ชั่วโมงในรูปแบบ 24 ชั่วโมง ค่า Hk ที่เกินมาจะบวกเลข 0 นำหน้า	0
m	นาทีเป็นชั่วโมง ค่า "M" ที่เกินมาจะเพิ่มเลข 0 นำหน้า	30
วินาที	วินาทีในนาที ค่า "s" ที่เกินมาจะเพิ่มเลข 0 นำหน้า	55
S	เศษส่วนที่สอง จะมีการเพิ่มค่า "S" ที่เกินมาทางด้านขวาด้วยเลขศูนย์	978
E	วันของสัปดาห์ เอาต์พุตต่อไปนี้สำหรับ "วันอังคาร" E ผลิต T EE หรือ EEE ที่ผลิตในวันอังคารหรือวันอังคาร EEEE ผลิตในวันอังคาร	"อ." "วันอังคาร"
aa	AM/PM	"PM"
k	ชั่วโมงใน 1 วัน (1~24) ค่า "k" ที่เกินมาจะบวกเลข 0 ที่นำหน้า	24
K	ชั่วโมงใน AM/PM (0~11) ค่า "k" ที่เกินมาจะบวกเลข 0 ที่นำหน้า	0
z	เขตเวลา สำหรับเขตเวลา 5 ให้แสดงผล "UTC+5"	"UTC+5"
Z	เขตเวลาในรูปแบบ RFC 822 สำหรับเขตเวลา -5: Z, ZZ, ZZZ ผลิต -0500 ZZZZ และผลิตผลอื่นๆ "GMT -05:00"	"-0800" "GMT -05:00"
v	เขตเวลา (ทั่วไป)	"อื่นๆ/GMT-5"
'	Escape สำหรับข้อความ	'วันที่='
''	เครื่องหมายคำพูดเดี่ยว	ป่ะ

NumberFormat

อธิบายวิธีจัดรูปแบบคอลัมน์ตัวเลข ตัวเลือกการจัดรูปแบบ ได้แก่ การระบุคำนำหน้า (เช่น เครื่องหมายดอลลาร์) หรือเครื่องหมายวรรคตอนเพื่อใช้เป็นเครื่องหมายหลายพันตัว

ตัวเลือก

NumberFormat รองรับตัวเลือกต่อไปนี้ซึ่งส่งไปยังเครื่องมือสร้าง

Option	คำอธิบาย
decimalSymbol	อักขระที่จะใช้เป็นเครื่องหมายทศนิยม ค่าเริ่มต้นคือจุด (.)
fractionDigits	ตัวเลขที่ระบุจำนวนหลักที่จะแสดงหลังจุดทศนิยม ค่าเริ่มต้นคือ 2 หากระบุตัวเลขมากกว่าจำนวนที่มีอยู่ ระบบจะแสดงเลขศูนย์สำหรับค่าที่น้อยกว่า ค่าที่ถูกตัดจะปัดเศษ (5 ปัดเศษขึ้น)
groupingSymbol	อักขระที่จะใช้เพื่อจัดกลุ่มตัวเลขทางด้านซ้ายของทศนิยมเป็นชุดที่มี 3 ตัว ค่าเริ่มต้นคือคอมมา (,)
negativeColor	สีข้อความสำหรับค่าลบ ไม่มีค่าเริ่มต้น ค่าอาจเป็นค่าสี HTML ที่ยอมรับได้ เช่น "แดง" หรือ "#FF0000"
negativeParens	บูลีนที่ "จริง" บ่งชี้ว่าควรใส่ค่าลบไว้ในวงเล็บ ค่าเริ่มต้นเป็น True
pattern	สตริงรูปแบบ หากระบุ ระบบจะละเว้นตัวเลือกอื่นๆ ทั้งหมด ยกเว้น negativeColor สตริงรูปแบบเป็นส่วนหนึ่งของ ชุดรูปแบบ ICU เช่น {pattern:'#,###%'} จะแสดงค่าเอาต์พุต "1,000%", "750%" และ "50%" สำหรับค่า 10, 7.5 และ 0.5
prefix	คำนำหน้าสตริงของค่า เช่น "$"
suffix	คำต่อท้ายสตริงสำหรับค่า เช่น "%"

วิธีการ

NumberFormat รองรับเมธอดต่อไปนี้

วิธีการ	คำอธิบาย
google.visualization.NumberFormat(options)	เครื่องมือสร้าง ดูข้อมูลเพิ่มเติมได้ในส่วนตัวเลือกด้านบน
format(dataTable, columnIndex)	เมธอด format() มาตรฐานเพื่อใช้การจัดรูปแบบกับคอลัมน์ที่ระบุ
formatValue(value)	แสดงผลค่าที่จัดรูปแบบของค่าที่ระบุ วิธีนี้ไม่ต้องใช้ DataTable

รหัสตัวอย่าง

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('numberformat_div'));

var formatter = new google.visualization.NumberFormat(
    {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

PatternFormat

ช่วยให้คุณผสานค่าของคอลัมน์ที่กำหนดเป็นคอลัมน์เดียวพร้อมข้อความที่กำหนดเอง ดังนั้น ตัวอย่างเช่น หากคุณมีคอลัมน์สำหรับชื่อจริงและคอลัมน์สำหรับนามสกุล คุณอาจป้อนข้อมูลในคอลัมน์ที่ 3 ด้วย {last name} ซึ่งก็คือ {first name} ตัวจัดรูปแบบนี้ไม่เป็นไปตามรูปแบบสำหรับตัวสร้างและเมธอด format() โปรดดูคำแนะนำที่ส่วนวิธีการด้านล่าง

วิธีการ

PatternFormat รองรับเมธอดต่อไปนี้

วิธีการ	คำอธิบาย
google.visualization.PatternFormat(pattern)	เครื่องมือสร้าง ไม่รับออบเจ็กต์ตัวเลือก แต่จะใช้พารามิเตอร์ pattern ของสตริงแทน นี่คือสตริงที่อธิบายค่าของคอลัมน์ที่จะใส่ลงในคอลัมน์ปลายทาง พร้อมกับข้อความที่กำหนดเอง ฝังตัวยึดตำแหน่งในสตริงเพื่อระบุค่าจากคอลัมน์อื่นที่ต้องการฝัง ตัวยึดตำแหน่งคือ {#} โดยที่ # คือดัชนีของคอลัมน์แหล่งที่มาที่จะใช้ ดัชนีคือดัชนีในอาร์เรย์ srcColumnIndices จากเมธอด format() ด้านล่าง หากต้องการใส่อักขระ { หรือ } ตามตัวอักษร ให้ Escape เป็น \{ หรือ \} หากต้องการใส่เครื่องหมาย \ ตามตัวอักษร ให้ Escape เป็น \\ รหัสตัวอย่าง ตัวอย่างต่อไปนี้แสดงเครื่องมือสร้างสำหรับรูปแบบที่สร้างองค์ประกอบ Anchor โดยนำองค์ประกอบที่ 1 และ 2 มาจากเมธอด format() var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>');
format(dataTable, srcColumnIndices, opt_dstColumnIndex)	การเรียกการจัดรูปแบบมาตรฐานที่มีพารามิเตอร์เพิ่มเติมเล็กน้อย ได้แก่ dataTable - ตารางข้อมูลที่จะทํางาน srcColumnIndices - อาร์เรย์ของดัชนีคอลัมน์อย่างน้อย 1 รายการ (แบบศูนย์) ที่จะดึงเป็นแหล่งที่มาจาก DataTable ที่สำคัญ ระบบจะใช้ค่านี้เป็นแหล่งข้อมูลสำหรับพารามิเตอร์ pattern ในตัวสร้าง หมายเลขคอลัมน์ไม่ต้องเรียงตามลำดับ opt_dstColumnIndex - [optional] คอลัมน์ปลายทางที่จะวางเอาต์พุตของการปรับแต่ง pattern หากไม่ได้ระบุไว้ ระบบจะใช้องค์ประกอบแรกใน srcColumIndices เป็นปลายทาง ดูตัวอย่างการจัดรูปแบบหลังตาราง

ต่อไปนี้คือตัวอย่างบางส่วนของอินพุตและเอาต์พุตสำหรับตาราง 4 คอลัมน์

Row before formatting (4 columns, last is blank):
John  |  Paul  |  Jones  |  [empty]

var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
formatter.format(data, [0,1,2], 3);
Output:
  John  |  Paul  |  Jones  |  John Paul Jones

var formatter = new google.visualization.PatternFormat("{1}, {0}");
formatter.format(data, [0,2], 3);
Output:
  John  |  Paul  |  Jones  |  Jones, John

รหัสตัวอย่าง

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

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', 'john@beatles.co.uk'],
  ['Paul McCartney', 'paul@beatles.co.uk'],
  ['George Harrison', 'george@beatles.co.uk'],
  ['Ringo Starr', 'ringo@beatles.co.uk']
]);

var table = new google.visualization.Table(document.getElementById('patternformat_div'));

var formatter = new google.visualization.PatternFormat(
    '<a href="mailto:{1}">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter.format(data, [0, 1]);

var view = new google.visualization.DataView(data);
view.setColumns([0]); // Create a view with the first column only.

table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

GadgetHelper

ชั้นเรียนผู้ช่วยที่ลดความซับซ้อนในการเขียนแกดเจ็ตที่ใช้ Google Visualization API

ผู้ผลิต

google.visualization.GadgetHelper()

วิธีการ

วิธีการ	ผลลัพธ์	คำอธิบาย
createQueryFromPrefs(prefs)	google.visualization.Query	คงที่ สร้างอินสแตนซ์ใหม่ของ google.visualization.Query และตั้งค่าพร็อพเพอร์ตี้ตามค่าจากค่ากำหนดของแกดเจ็ต ประเภทของพารามิเตอร์ prefs คือ _IG_Prefs ค่ากำหนด _table_query_url ใช้เพื่อตั้งค่า URL แหล่งข้อมูลการค้นหา ค่ากำหนด _table_query_refresh_interval ใช้เพื่อกำหนดช่วงเวลาการรีเฟรชการค้นหา (เป็นวินาที)
validateResponse(response)	บูลีน	คงที่ พารามิเตอร์ response เป็นประเภท google.visualization.QueryResponse แสดงผล true หากการตอบกลับมีข้อมูล แสดงผล false หากการดำเนินการค้นหาล้มเหลวและการตอบกลับไม่มีข้อมูล หากเกิดข้อผิดพลาด วิธีนี้จะแสดงข้อความแสดงข้อผิดพลาด

คลาสการค้นหา

ออบเจ็กต์ต่อไปนี้พร้อมสำหรับการส่งการค้นหาข้อมูลไปยังแหล่งข้อมูลภายนอก เช่น Google สเปรดชีต

• การค้นหา - รวมคำขอข้อมูลขาออก
• QueryResponse - จัดการการตอบสนองจากแหล่งข้อมูล

คำค้นหา

หมายถึงการค้นหาที่ส่งไปยังแหล่งข้อมูล

ผู้ผลิต

google.visualization.Query(dataSourceUrl, opt_options)

พารามิเตอร์

dataSourceUrl

[จําเป็น, สตริง] URL ที่จะส่งคําค้นหา โปรดดูเอกสารประกอบเกี่ยวกับแผนภูมิและสเปรดชีตสำหรับ Google สเปรดชีต

opt_options

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

• sendMethod - [ไม่บังคับ, สตริง] ระบุวิธีที่จะใช้ส่งการค้นหา เลือกค่าสตริงค่าใดค่าหนึ่งต่อไปนี้
  • 'xhr' - ส่งคำค้นหาโดยใช้ XmlHttpRequest
  • 'scriptInjection" - ส่งคำค้นหาโดยใช้การแทรกสคริปต์
  • 'makeRequest' - [ใช้ได้กับแกดเจ็ตเท่านั้น ซึ่งเลิกใช้งานแล้ว] ส่งคำค้นหาโดยใช้เมธอด API ของแกดเจ็ต makeRequest() หากระบุ คุณควรระบุ makeRequestParams ด้วย
  • 'auto' - ใช้วิธีการที่ระบุโดยพารามิเตอร์ URL tqrt จาก URL แหล่งข้อมูล tqrt สามารถมีค่าต่อไปนี้: 'xhr', 'scriptInjection' หรือ 'makeRequest' หากไม่มี tqrt หรือมีค่าที่ไม่ถูกต้อง ค่าเริ่มต้นคือ "xhr" สำหรับคำขอในโดเมนเดียวกัน และ "scriptInjection" สำหรับคำขอข้ามโดเมน
• makeRequestParams - [Object] แมปของพารามิเตอร์สำหรับการค้นหา makeRequest() ใช้และจำเป็นเฉพาะในกรณีที่ sendMethod เป็น "makeRequest" เท่านั้น

วิธีการ

วิธีการ	ผลลัพธ์	คำอธิบาย
abort()	ไม่มี	หยุดการส่งการค้นหาอัตโนมัติที่เริ่มต้นด้วย setRefreshInterval()
setRefreshInterval(seconds)	ไม่มี	ตั้งค่าการค้นหาให้เรียกใช้เมธอด send โดยอัตโนมัติทุกๆ ระยะเวลาที่ระบุ (จำนวนวินาที) เริ่มตั้งแต่การเรียกที่ชัดเจนครั้งแรกไปยัง send seconds คือตัวเลขที่มากกว่าหรือเท่ากับ 0 หากใช้วิธีนี้ คุณควรเรียกใช้ก่อนเรียกใช้เมธอด send ยกเลิกวิธีการนี้โดยการโทรอีกครั้งโดยใช้ศูนย์ (ค่าเริ่มต้น) หรือโดยการเรียกใช้ abort()
setTimeout(seconds)	ไม่มี	กำหนดจำนวนวินาทีที่จะรอให้แหล่งข้อมูลตอบสนองก่อนเพิ่มข้อผิดพลาดการหมดเวลา seconds เป็นจำนวนที่มากกว่า 0 ระยะหมดเวลาเริ่มต้นคือ 30 วินาที หากใช้วิธีนี้ ควรเรียกใช้เมธอดก่อนเรียกใช้เมธอด send
setQuery(string)	ไม่มี	ตั้งค่าสตริงการค้นหา ค่าของพารามิเตอร์ string ควรเป็นการค้นหาที่ถูกต้อง หากใช้วิธีนี้ ควรเรียกใช้เมธอดก่อนเรียกใช้เมธอด send ดูข้อมูลเพิ่มเติมเกี่ยวกับภาษาในการค้นหา
send(callback)	ไม่มี	ส่งคำถามไปยังแหล่งข้อมูล callback ควรเป็นฟังก์ชันที่ระบบจะเรียกใช้เมื่อแหล่งข้อมูลตอบสนอง ฟังก์ชัน Callback จะได้รับพารามิเตอร์เดี่ยวประเภท google.visualization.QueryResponse

QueryResponse

แสดงการตอบกลับของการดำเนินการค้นหาที่ได้รับจากแหล่งข้อมูล ระบบจะส่งอินสแตนซ์ของคลาสนี้เป็นอาร์กิวเมนต์ไปยังฟังก์ชัน Callback ที่ตั้งค่าไว้เมื่อมีการเรียกใช้ Query.send

วิธีการ

วิธีการ	ผลลัพธ์	คำอธิบาย
getDataTable()	DataTable	แสดงผลตารางข้อมูลตามที่แหล่งข้อมูลแสดงผล แสดงผล null หากการดำเนินการค้นหาล้มเหลวและไม่มีการแสดงผลข้อมูล
getDetailedMessage()	สตริง	แสดงผลข้อความแสดงข้อผิดพลาดโดยละเอียดสำหรับการค้นหาที่ล้มเหลว หากการดำเนินการค้นหาสำเร็จ วิธีนี้จะแสดงผลสตริงว่าง ข้อความที่ส่งคืนเป็นข้อความ ที่มีไว้สำหรับนักพัฒนาซอฟต์แวร์และอาจมีข้อมูลทางเทคนิค เช่น "ไม่มีคอลัมน์ {salary}"
getMessage()	สตริง	แสดงผลข้อความแสดงข้อผิดพลาดสั้นๆ สำหรับการค้นหาที่ล้มเหลว หากการดำเนินการค้นหาสำเร็จ วิธีนี้จะแสดงผลสตริงว่าง ข้อความที่ส่งคืนเป็นข้อความสั้นๆ ที่มีไว้สำหรับผู้ใช้ปลายทาง เช่น "คำค้นหาไม่ถูกต้อง" หรือ "การเข้าถึงถูกปฏิเสธ"
getReasons()	อาร์เรย์ของสตริง	แสดงผลอาร์เรย์ของจำนวนรายการเพิ่มเติมที่เป็นศูนย์ แต่ละรายการคือสตริงสั้นๆ ที่มีรหัสข้อผิดพลาดหรือคําเตือนที่เกิดขึ้นขณะดําเนินการค้นหา รหัสที่เป็นไปได้มีดังนี้ access_denied ผู้ใช้ไม่มีสิทธิ์เข้าถึงแหล่งข้อมูล invalid_query คำค้นหาที่ระบุมีข้อผิดพลาดทางไวยากรณ์ data_truncated แถวข้อมูลอย่างน้อย 1 แถวที่ตรงกับการเลือกการค้นหาไม่แสดงผลเนื่องจากขีดจำกัดของขนาดเอาต์พุต (คำเตือน) timeout การค้นหาไม่ตอบกลับภายในเวลาที่คาดไว้
hasWarning()	บูลีน	แสดงผล true หากการดำเนินการค้นหามีข้อความเตือน
isError()	บูลีน	แสดงผล true หากดำเนินการค้นหาไม่สำเร็จ และการตอบกลับไม่มีตารางข้อมูล แสดงผล <false> หากการดำเนินการค้นหาสำเร็จและการตอบกลับมีตารางข้อมูล

การแสดงข้อผิดพลาด

API มีฟังก์ชันมากมายที่จะช่วยคุณแสดงข้อความแสดงข้อผิดพลาดที่กำหนดเองให้กับผู้ใช้ หากต้องการใช้ฟังก์ชันเหล่านี้ ให้ระบุเอลิเมนต์ของคอนเทนเนอร์ในหน้าเว็บ (โดยทั่วไปคือ <div>) ซึ่ง API จะดึงข้อความแสดงข้อผิดพลาดที่มีการจัดรูปแบบ คอนเทนเนอร์นี้อาจเป็นองค์ประกอบคอนเทนเนอร์การแสดงภาพ หรือคอนเทนเนอร์ที่แสดงข้อผิดพลาดเท่านั้น หากคุณระบุองค์ประกอบที่มีการแสดงข้อมูลผ่านภาพ ข้อความแสดงข้อผิดพลาดจะแสดงเหนือการแสดงภาพ จากนั้นเรียกใช้ฟังก์ชันที่เหมาะสมด้านล่างเพื่อแสดงหรือนำออกข้อความแสดงข้อผิดพลาด

ฟังก์ชันทั้งหมดเป็นฟังก์ชันแบบคงที่ในเนมสเปซ google.visualization.errors

การแสดงภาพจํานวนมากอาจทำให้เกิดเหตุการณ์ข้อผิดพลาดได้ โปรดดูเหตุการณ์ข้อผิดพลาดด้านล่างเพื่อดูข้อมูลเพิ่มเติม

คุณดูตัวอย่างข้อผิดพลาดที่กำหนดเองได้ในตัวอย่าง Wrapper การค้นหา

การทำงาน	ผลลัพธ์	คำอธิบาย
addError(container, message, opt_detailedMessage, opt_options)	ค่ารหัสสตริงที่ระบุออบเจ็กต์ข้อผิดพลาดที่สร้างขึ้น ค่านี้คือค่าที่ไม่ซ้ำกันในหน้านั้นๆ และจะใช้เพื่อนำข้อผิดพลาดออกหรือค้นหาองค์ประกอบที่มีข้อผิดพลาดนั้นได้	เพิ่มบล็อกการแสดงข้อผิดพลาดในองค์ประกอบของหน้าที่ระบุ โดยมีข้อความและการจัดรูปแบบที่ระบุ container - องค์ประกอบ DOM ที่จะแทรกข้อความแสดงข้อผิดพลาด หากไม่พบคอนเทนเนอร์ ฟังก์ชันจะแสดงข้อผิดพลาด JavaScript message - ข้อความสตริงที่จะแสดง opt_detailedMessage - สตริงข้อความแบบละเอียดที่ไม่บังคับ โดยค่าเริ่มต้น ข้อความนี้จะเป็นข้อความเมาส์โอเวอร์ แต่สามารถเปลี่ยนแปลงได้ในพร็อพเพอร์ตี้ opt_options.showInToolTip ที่อธิบายไว้ด้านล่าง opt_options - ออบเจ็กต์ตัวเลือกที่มีพร็อพเพอร์ตี้ที่ตั้งค่าตัวเลือกการแสดงผลต่างๆ ให้กับข้อความ ระบบรองรับตัวเลือกต่อไปนี้ showInTooltip - ค่าบูลีนที่ true จะแสดงข้อความโดยละเอียดเป็นข้อความเคล็ดลับเครื่องมือเท่านั้น ส่วน false จะแสดงข้อความที่มีรายละเอียดในเนื้อหาคอนเทนเนอร์หลังจากข้อความแบบสั้น ค่าเริ่มต้นคือ True type - สตริงที่อธิบายประเภทข้อผิดพลาด ซึ่งกำหนดว่าควรใช้รูปแบบ CSS ใดกับข้อความนี้ ค่าที่รองรับคือ "error" และ "warning" ค่าเริ่มต้นคือ "error" style - สตริงรูปแบบสำหรับข้อความแสดงข้อผิดพลาด สไตล์นี้จะลบล้างรูปแบบใดก็ตามที่ใช้กับประเภทคำเตือน (opt_options.type) ตัวอย่างเช่น 'background-color: #33ff99; padding: 2px;' ค่าเริ่มต้นเป็นสตริงว่างเปล่า removable - ค่าบูลีน (true) หมายความว่าผู้ใช้จะปิดข้อความได้ด้วยการคลิกเมาส์ ค่าเริ่มต้นคือ false
addErrorFromQueryResponse(container, response)	ค่ารหัสสตริงที่ระบุออบเจ็กต์ข้อผิดพลาดที่สร้างขึ้น หรือค่า Null หากการตอบกลับไม่ได้ระบุข้อผิดพลาด ค่านี้คือค่าที่ไม่ซ้ำกันในหน้านั้นๆ และจะใช้เพื่อนำข้อผิดพลาดออกหรือค้นหาองค์ประกอบที่มีข้อผิดพลาดนั้นได้	ส่งการตอบกลับการค้นหาและที่เก็บข้อความแสดงข้อผิดพลาดไปยังเมธอดนี้: หากการตอบกลับการค้นหา ระบุถึงข้อผิดพลาดของการค้นหา จะแสดงข้อความแสดงข้อผิดพลาดในองค์ประกอบของหน้าที่ระบุ หากการตอบกลับคำค้นหาเป็นค่าว่าง เมธอดจะแสดงข้อผิดพลาด JavaScript ส่ง QueryResponse ที่ได้รับในเครื่องจัดการการค้นหาไปยังข้อความนี้เพื่อแสดงข้อผิดพลาด นอกจากนี้ยังจะกำหนดรูปแบบของการแสดงผลที่เหมาะสมกับประเภท (ข้อผิดพลาดหรือคำเตือน คล้ายกับ addError(opt_options.type)) container - องค์ประกอบ DOM ที่จะแทรกข้อความแสดงข้อผิดพลาด หากไม่พบคอนเทนเนอร์ ฟังก์ชันจะแสดงข้อผิดพลาด JavaScript response - ออบเจ็กต์ QueryResponse ที่ตัวแฮนเดิลการค้นหาได้รับเพื่อตอบกลับ query หากเป็นค่าว่าง เมธอดจะแสดงข้อผิดพลาด JavaScript
removeError(id)	บูลีน: true หากนำข้อผิดพลาดออก หรือเป็น false หากไม่เป็นเช่นนั้น	นำข้อผิดพลาดที่ระบุตามรหัสออกจากหน้า id - รหัสสตริงของข้อผิดพลาดที่สร้างขึ้นโดยใช้ addError() หรือ addErrorFromQueryResponse()
removeAll(container)	ไม่มี	นำบล็อกข้อผิดพลาดทั้งหมดออกจากคอนเทนเนอร์ที่ระบุ หากไม่มีคอนเทนเนอร์ที่ระบุ ระบบจะแสดงข้อผิดพลาด container - องค์ประกอบ DOM ที่มีสตริงข้อผิดพลาดที่จะนำออก หากไม่พบคอนเทนเนอร์ ฟังก์ชันจะแสดงข้อผิดพลาด JavaScript
getContainer(errorId)	จัดการองค์ประกอบ DOM ที่มีข้อผิดพลาดที่ระบุ หรือ Null หากไม่พบ	เรียกข้อมูลแฮนเดิลไปยังองค์ประกอบคอนเทนเนอร์ที่มีข้อผิดพลาดที่ระบุโดย errorID errorId - รหัสสตริงของข้อผิดพลาดที่สร้างขึ้นโดยใช้ addError() หรือ addErrorFromQueryResponse()

กิจกรรม

การแสดงภาพเหตุการณ์ส่วนใหญ่เริ่มทำงานเพื่อระบุว่าเกิดเหตุการณ์บางอย่างขึ้น ในฐานะผู้ใช้แผนภูมิ คุณมักจะต้องการฟังเหตุการณ์เหล่านี้ หากเขียนโค้ดการแสดงภาพของตัวเอง คุณก็อาจต้องการทริกเกอร์เหตุการณ์ดังกล่าวด้วยตัวเองด้วย

วิธีการต่อไปนี้ช่วยให้นักพัฒนาซอฟต์แวร์ฟังเหตุการณ์ นำเครื่องจัดการเหตุการณ์ที่มีอยู่ออก หรือทริกเกอร์เหตุการณ์จากภายในการแสดงภาพได้

• google.visualization.events.addListener() และ google.visualization.events.addOneTimeListener() จะฟังเหตุการณ์
• google.visualization.events.removeListener() นำ Listener ที่มีอยู่ออก
• google.visualization.events.removeAllListeners() นำ Listener ทั้งหมดของแผนภูมิที่เฉพาะเจาะจงออก
• google.visualization.events.trigger() ทำให้เหตุการณ์เริ่มทำงาน

addListener()

เรียกใช้เมธอดนี้เพื่อลงทะเบียนเพื่อรับเหตุการณ์เริ่มทำงานโดยการแสดงภาพที่โฮสต์ในหน้าเว็บของคุณ คุณควรบันทึกอาร์กิวเมนต์เหตุการณ์ (หากมี) ที่จะส่งไปยังฟังก์ชันการจัดการ

google.visualization.events.addListener(source_visualization,
  event_name, handling_function)

source_visualization

แฮนเดิลของอินสแตนซ์การแสดงภาพต้นฉบับ

event_name

ชื่อสตริงของเหตุการณ์ที่จะฟัง การแสดงภาพควรบันทึกว่ามีเหตุการณ์ใดเกิดขึ้นบ้าง

handling_function

ชื่อของฟังก์ชัน JavaScript ในเครื่องที่จะเรียกใช้เมื่อ source_visualization ทำให้เหตุการณ์ event_name เริ่มทำงาน ฟังก์ชันการจัดการจะส่งอาร์กิวเมนต์เหตุการณ์ทั้งหมดเป็นพารามิเตอร์

การคืนสินค้า

เครื่องจัดการ Listener สำหรับผู้ฟังใหม่ หากจำเป็น เครื่องจัดการสามารถใช้เพื่อนำ Listener นี้ออกในภายหลังได้โดยเรียกใช้ google.visualization.events.removeListener()

ตัวอย่าง

ตัวอย่างการลงทะเบียนเข้าร่วมงานที่เราเข้าร่วมมีดังนี้

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler() {
  alert('A table row was selected');
}

addOneTimeListener()

ตัวเลือกนี้เหมือนกับ addListener() แต่มีไว้สำหรับเหตุการณ์ที่ควรฟังเพียงครั้งเดียว การส่งเหตุการณ์ครั้งต่อๆ ไปจะไม่เรียกใช้ฟังก์ชันการจัดการ

ตัวอย่างเมื่อฟีเจอร์นี้มีประโยชน์ คือ การเสมอทุกครั้งจะทำให้มีการส่งเหตุการณ์ ready หากต้องการให้เฉพาะ ready รายการแรกเรียกใช้โค้ด คุณจะต้องใช้ addOneTimeListener แทนที่จะเป็น addListener

removeListener()

เรียกใช้เมธอดนี้เพื่อยกเลิกการลงทะเบียน Listener เหตุการณ์ที่มีอยู่

google.visualization.events.removeListener(listener_handler)

listener_handler

เครื่องจัดการ Listener ที่จะนำออก ตามที่ google.visualization.events.addListener() แสดงผล

removeAllListeners()

เรียกใช้เมธอดนี้เพื่อยกเลิกการลงทะเบียน Listener เหตุการณ์ทั้งหมดของอินสแตนซ์การแสดงภาพที่ระบุ

google.visualization.events.removeAllListeners(source_visualization)

source_visualization

แฮนเดิลไปยังอินสแตนซ์การแสดงภาพต้นฉบับที่ควรนำ Listener เหตุการณ์ทั้งหมดออก

trigger()

เรียกใช้โดยผู้ติดตั้งใช้งานการแสดงภาพ เรียกใช้วิธีการนี้จากการแสดงข้อมูลผ่านภาพเพื่อให้เหตุการณ์เริ่มทำงานด้วยชื่อและชุดค่าที่กำหนดเอง

google.visualization.events.trigger(source_visualization, event_name,
  event_args)

source_visualization

แฮนเดิลของอินสแตนซ์การแสดงภาพต้นฉบับ หากเรียกใช้ฟังก์ชันนี้จากภายในเมธอดที่กำหนดโดยการส่งการแสดงภาพ ก็เพียงส่งผ่านคีย์เวิร์ด this

event_name

ชื่อสตริงที่จะเรียกใช้เหตุการณ์ คุณเลือกค่าสตริงที่ต้องการได้

event_args

[ไม่บังคับ] แมปของคู่ชื่อ/ค่าที่จะส่งต่อไปยังวิธีการรับ เช่น {message: "สวัสดี", คะแนน: 10, ชื่อ: "Fred"} คุณส่งผ่านค่า Null ได้หากไม่จำเป็นต้องมีเหตุการณ์ ควรเตรียมตัวรับให้ยอมรับ Null สำหรับพารามิเตอร์นี้

ตัวอย่าง

นี่คือตัวอย่างของการแสดงข้อมูลผ่านภาพที่แสดงเมธอดชื่อ "select" เมื่อมีการเรียกเมธอด onclick ของเมธอดดังกล่าว แต่จะไม่ส่งคืนค่าใดๆ

MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Trigger a select event.
  google.visualization.events.trigger(this, 'select', null);
}

พร็อพเพอร์ตี้และวิธีการแสดงข้อมูลผ่านภาพแบบมาตรฐาน

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

• เครื่องมือสร้าง
• draw()
• getAction() [ไม่บังคับ]
• getSelection() [ไม่บังคับ]
• removeAction() [ไม่บังคับ]
• setAction() [ไม่บังคับ]
• setSelection() [ไม่บังคับ]

หมายเหตุ: วิธีการเหล่านี้อยู่ในเนมสเปซของการแสดงภาพ ไม่ใช่เนมสเปซ google.visualization

เครื่องมือสร้าง

เครื่องมือสร้างควรมีชื่อของคลาสการแสดงภาพ และแสดงผลอินสแตนซ์ของคลาสนั้น

visualization_class_name(dom_element)

dom_element

ตัวชี้ไปยังองค์ประกอบ DOM ที่ควรฝังการแสดงภาพ

ตัวอย่าง

var org = new google.visualization.OrgChart(document.getElementById('org_div')); 

วาด()

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

draw(data[, options])

ข้อมูล

DataTable หรือ DataView ที่เก็บข้อมูลไว้ใช้เพื่อวาดแผนภูมิ ไม่มีวิธีการมาตรฐานในการดึง DataTable จากแผนภูมิ

ตัวเลือก

[ไม่บังคับ] การแมปคู่ชื่อ/ค่าของตัวเลือกที่กำหนดเอง เช่น ความสูงและความกว้าง สีพื้นหลัง และคำบรรยายแทนเสียง เอกสารประกอบเกี่ยวกับการแสดงภาพควรแสดงตัวเลือกที่พร้อมใช้งาน และควรรองรับตัวเลือกเริ่มต้นหากคุณไม่ระบุพารามิเตอร์นี้ คุณใช้ไวยากรณ์ลิเทอรัลออบเจ็กต์ JavaScript เพื่อส่งในแมปตัวเลือกได้ เช่น {x:100, y:200, title:'An Example'}

ตัวอย่าง

chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

getAction()

ตัวเลือกนี้อาจเปิดเผยโดยการแสดงข้อมูลผ่านภาพที่มีเคล็ดลับเครื่องมือ และอนุญาตการดำเนินการกับเคล็ดลับเครื่องมือ

แสดงออบเจ็กต์การดำเนินการของเคล็ดลับเครื่องมือที่มี actionID ที่ขอ

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

// Returns the action object with the ID 'alertAction'.
chart.getAction('alertAction');

getSelection()

ซึ่งจะแสดงด้วยการแสดงข้อมูลผ่านภาพ (ไม่บังคับ) ที่ต้องการให้คุณเข้าถึงข้อมูลที่เลือกในปัจจุบันในกราฟิกได้

selection_array getSelection()

การคืนสินค้า

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

ตัวอย่าง

function myClickHandler(){
  var selection = myVis.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

removeAction()

ตัวเลือกนี้อาจเปิดเผยโดยการแสดงข้อมูลผ่านภาพที่มีเคล็ดลับเครื่องมือ และอนุญาตการดำเนินการกับเคล็ดลับเครื่องมือ

นำออบเจ็กต์การดำเนินการของเคล็ดลับเครื่องมือที่มี actionID ที่ขอออกจากแผนภูมิ

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

// Removes an action from chart with the ID of 'alertAction'.
chart.removeAction('alertAction');

setAction()

ตัวเลือกนี้อาจเปิดเผยโดยการแสดงข้อมูลผ่านภาพที่มีเคล็ดลับเครื่องมือ และอนุญาตการดำเนินการกับเคล็ดลับเครื่องมือ โดยจะใช้ได้เฉพาะกับแผนภูมิหลัก (แท่ง คอลัมน์ เส้น พื้นที่ แผนภูมิกระจาย แผนภูมิผสม ลูกโป่ง วงกลม โดนัท แท่งเทียน ฮิสโตแกรม พื้นที่ขั้นบันได)

ตั้งค่าการดำเนินการเคล็ดลับเครื่องมือที่จะทำงานเมื่อผู้ใช้คลิกที่ข้อความการดำเนินการ

setAction(action object)

เมธอด setAction จะนำออบเจ็กต์เป็นพารามิเตอร์การดำเนินการ ออบเจ็กต์นี้ควรระบุพร็อพเพอร์ตี้ 3 รายการ ได้แก่ id ได้แก่ รหัสของการดำเนินการที่กำลังตั้ง text ข้อความที่ควรปรากฏในเคล็ดลับเครื่องมือสำหรับการทำงาน และ action คือฟังก์ชันที่ควรเรียกใช้เมื่อผู้ใช้คลิกที่ข้อความการดำเนินการ

คุณควรตั้งค่าการดำเนินการเคล็ดลับเครื่องมือทั้งหมดก่อนที่จะเรียกใช้เมธอด draw() ของแผนภูมิ

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

// Sets a tooltip action which will pop an alert box on the screen when triggered.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  }
});

เมธอด setAction จะกำหนดพร็อพเพอร์ตี้เพิ่มเติมอีก 2 รายการได้ด้วย ซึ่งได้แก่ visible และ enabled พร็อพเพอร์ตี้เหล่านี้ควรเป็นฟังก์ชันที่แสดงผลค่า boolean ที่ระบุว่าการดำเนินการของเคล็ดลับเครื่องมือจะปรากฏและ/หรือเปิดใช้หรือไม่

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

// The visible/enabled functions can contain any logic to determine their state
// as long as they return boolean values.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  },
  visible: function() {
    return true;
  },
  enabled: function() {
    return true;
  }
});

setSelection()

เลือกการป้อนข้อมูลในการแสดงภาพ เช่น จุดในแผนภูมิพื้นที่หรือแท่งในแผนภูมิแท่ง (ไม่บังคับ) เมื่อมีการเรียกเมธอดนี้ การแสดงภาพควรบ่งบอกถึงการเลือกใหม่อย่างชัดเจน การใช้งาน setSelection() ไม่ควรเริ่มการทำงานของเหตุการณ์ "select" การแสดงภาพอาจละเว้นการเลือกบางส่วน เช่น ตารางที่แสดงเฉพาะแถวที่เลือกอาจไม่สนใจองค์ประกอบของเซลล์หรือคอลัมน์ในการใช้งาน setSelection() หรือจะเลือกทั้งแถวก็ได้

ทุกครั้งที่มีการเรียกวิธีนี้ ระบบจะยกเลิกการเลือกรายการที่เลือกทั้งหมดและควรใช้รายการการเลือกใหม่ที่ส่งผ่าน คุณไม่สามารถยกเลิกการเลือกแต่ละรายการอย่างชัดเจน หากต้องการยกเลิกการเลือกแต่ละรายการ ให้เรียกใช้ setSelection() พร้อมรายการที่จะคงการเลือกต่อไป หากต้องการยกเลิกการเลือกองค์ประกอบทั้งหมด ให้เรียกใช้ setSelection(), setSelection(null) หรือsetSelection([])

setSelection(selection_array)

selection_array

อาร์เรย์ของออบเจ็กต์ โดยแต่ละรายการมีพร็อพเพอร์ตี้แถวและ/หรือคอลัมน์ที่เป็นตัวเลข row และ column เป็นจำนวนแถวหรือคอลัมน์แบบ 0 ของรายการในตารางข้อมูลที่จะเลือก หากต้องการเลือกทั้งคอลัมน์ ให้ตั้งค่า row เป็นค่าว่าง หากต้องการเลือกทั้งแถว ให้ตั้งค่า column เป็น Null ตัวอย่าง: setSelection([{row:0,column:1},{row:1, column:null}]) เลือกเซลล์ที่ (0,1) และแถว 1 ทั้งแถว

วิธีการแบบคงที่ต่างๆ

ส่วนนี้ประกอบด้วยเมธอดที่มีประโยชน์ต่างๆ ซึ่งแสดงในเนมสเปซ google.visualization

arrayToDataTable()

เมธอดนี้จะใช้อาร์เรย์ 2 มิติ และแปลงเป็นตารางข้อมูล

ระบบจะกำหนดประเภทข้อมูลคอลัมน์โดยอัตโนมัติจากข้อมูลที่ให้ไว้ คุณยังระบุประเภทข้อมูลคอลัมน์ได้โดยใช้รูปแบบสัญกรณ์ของออบเจ็กต์ในแถวแรก (แถวส่วนหัวคอลัมน์) ของอาร์เรย์ (เช่น {label: 'Start Date', type: 'date'}) คุณอาจใช้บทบาทข้อมูลที่ไม่บังคับได้เช่นกัน แต่ต้องมีการกำหนดอย่างชัดเจนโดยใช้รูปแบบสัญพจน์ของออบเจ็กต์ อาจใช้สัญลักษณ์ลิเทอรัลของออบเจ็กต์สำหรับเซลล์ใดก็ได้ ซึ่งจะช่วยให้คุณกำหนดออบเจ็กต์เซลล์ได้)

ไวยากรณ์

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray

อาร์เรย์ 2 มิติ ซึ่งแต่ละแถวแสดงแทนแถวในตารางข้อมูล หาก opt_firstRowIsData เป็นเท็จ (ค่าเริ่มต้น) ระบบจะตีความแถวแรกเป็นป้ายกำกับส่วนหัว ระบบจะตีความประเภทข้อมูลของแต่ละคอลัมน์โดยอัตโนมัติจากข้อมูลที่ให้ไว้ หากเซลล์ไม่มีค่า ให้ระบุค่า Null หรือค่าว่างตามความเหมาะสม

opt_firstRowIsData

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

การคืนสินค้า

DataTable ใหม่

ตัวอย่าง

โค้ดต่อไปนี้แสดงวิธีการสร้างออบเจ็กต์ DataTable เดียวกัน 3 วิธี

// Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  [{label: 'Country', type: 'string'},
   {label: 'Population', type: 'number'},
   {label: 'Area', type: 'number'},
   {type: 'string', role: 'annotation'}],
  ['CN', 1324, 9640821, 'Annotated'],
  ['IN', 1133, 3287263, 'Annotated'],
  ['US', 304, 9629091, 'Annotated'],
  ['ID', 232, 1904569, 'Annotated'],
  ['BR', 187, 8514877, 'Annotated']
]);

// Version 2: DataTable.addRows
var data3 = new google.visualization.DataTable();
data3.addColumn('string','Country');
data3.addColumn('number','Population');
data3.addColumn('number','Area');
data3.addRows([
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

// Version 3: DataTable.setValue
var data = new google.visualization.DataTable();
data.addColumn('string','Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);

drawChart()

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

ไวยากรณ์

google.visualization.drawChart(chart_JSON_or_object)

chart_JSON_or_object

สตริงลิเทอรัล JSON หรือออบเจ็กต์ JavaScript ที่มีพร็อพเพอร์ตี้ต่อไปนี้ (คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่)

พร็อพเพอร์ตี้	ประเภท	จำเป็น	ค่าเริ่มต้น	คำอธิบาย
chartType	สตริง	จำเป็น	ไม่มี	ชื่อคลาสของการแสดงภาพ ละเว้นชื่อแพ็กเกจ google.visualization สำหรับแผนภูมิของ Google ได้ หากยังไม่ได้โหลดไลบรารีการแสดงภาพที่เหมาะสม วิธีนี้จะโหลดไลบรารีให้คุณหากเป็นการแสดงภาพจาก Google คุณต้องโหลดการแสดงภาพข้อมูลของบุคคลที่สามอย่างชัดแจ้ง เช่น Table, PieChart, example.com.CrazyChart
containerId	สตริง	จำเป็น	ไม่มี	รหัสขององค์ประกอบ DOM ในหน้าเว็บที่จะโฮสต์การแสดงภาพ
ตัวเลือก	ออบเจ็กต์	ไม่บังคับ	ไม่มี	ออบเจ็กต์ที่อธิบายตัวเลือกสำหรับการแสดงภาพ คุณจะใช้สัญกรณ์ลิเทอรัล JavaScript หรือระบุแฮนเดิลให้กับออบเจ็กต์ก็ได้ ตัวอย่าง: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
dataTable	ออบเจ็กต์	ไม่บังคับ	ไม่มี	DataTable ที่ใช้เพื่อสร้างการแสดงภาพ ซึ่งอาจเป็นการแสดงสตริง JSON ตามตัวอักษรของ DataTable ตามที่อธิบายไว้ด้านบน หรือแฮนเดิลของออบเจ็กต์ google.visualization.DataTable ที่มีการป้อนข้อมูล หรืออาร์เรย์ 2 มิติที่คล้ายกับที่ arrayToDataTable(opt_firstRowIsData=false) ยอมรับก็ได้ คุณต้องระบุพร็อพเพอร์ตี้นี้หรือพร็อพเพอร์ตี้ dataSourceUrl
dataSourceUrl	สตริง	ไม่บังคับ	ไม่มี	การค้นหาแหล่งข้อมูลที่จะเติมข้อมูลในแผนภูมิ (เช่น สเปรดชีตของ Google) คุณต้องระบุพร็อพเพอร์ตี้นี้หรือพร็อพเพอร์ตี้ dataTable
query	สตริง	ไม่บังคับ	ไม่มี	หากระบุ dataSourceUrl คุณจะเลือกระบุสตริงการค้นหาที่คล้าย SQL โดยใช้ภาษาการค้นหาของการแสดงภาพเพื่อกรองหรือจัดการข้อมูลได้
refreshInterval	ตัวเลข	ไม่บังคับ	ไม่มี	ความถี่เป็นวินาทีที่การแสดงภาพควรรีเฟรชแหล่งที่มาของคำค้นหา ใช้เมื่อระบุ dataSourceUrl เท่านั้น
การดู	ออบเจ็กต์หรืออาร์เรย์	ไม่บังคับ	ไม่มี	ตั้งค่าออบเจ็กต์เริ่มต้น DataView ซึ่งทำหน้าที่เป็นตัวกรองสำหรับข้อมูลพื้นฐาน ตามที่กำหนดโดยพารามิเตอร์ dataTable หรือ dataSourceUrl คุณจะส่งในสตริงหรือออบเจ็กต์เริ่มต้น DataView ก็ได้ ตามที่ dataview.toJSON() แสดงผล ตัวอย่าง: "view": {"columns": [1, 2]} คุณยังส่งอาร์เรย์ของออบเจ็กต์เริ่มต้น DataView ได้ด้วย ซึ่งในกรณีนี้ DataView แรกในอาร์เรย์จะถูกนำไปใช้กับข้อมูลเบื้องหลังเพื่อสร้างตารางข้อมูลใหม่ และ DataView รายการที่ 2 จะใช้กับตารางข้อมูลที่เป็นผลมาจากการใช้ DataView แรก และอื่นๆ

ตัวอย่าง

สร้างแผนภูมิตารางตามแหล่งข้อมูลสเปรดชีต และรวมคำค้นหา SELECT A,D WHERE D > 100 ORDER BY D

<script type="text/javascript">
  google.charts.load('current');  // Note: No need to specify chart packages.
  function drawVisualization() {
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
      "query":"SELECT A,D WHERE D > 100 ORDER BY D",
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true
      }
   });
 }
google.charts.setOnLoadCallback(drawVisualization);
</script>

ตัวอย่างต่อไปนี้จะสร้างตารางเดียวกัน แต่สร้าง DataTable ในเครื่อง:

<script type='text/javascript'>
  google.charts.load('current');
  function drawVisualization() {
    var dataTable = [
      ["Country", "Population Density"],
      ["Indonesia", 117],
      ["China", 137],
      ["Nigeria", 142],
      ["Pakistan", 198],
      ["India", 336],
      ["Japan", 339],
      ["Bangladesh", 1045]
    ];
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataTable": dataTable,
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true,
      }
    });
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

ตัวอย่างนี้ส่งผ่านการแสดงสตริง JSON ของแผนภูมิ ซึ่งอาจโหลดจากไฟล์

<script type="text/javascript">
  google.charts.load('current');
  var myStoredString = '{"containerId": "visualization_div",' +
    '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
    '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
    '"refreshInterval": 5,' +
    '"chartType": "Table",' +
    '"options": {' +
    '   "alternatingRowStyle": true,' +
    '   "showRowNumber" : true' +
    '}' +
  '}';
  function drawVisualization() {
    google.visualization.drawChart(myStoredString);
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

drawToolbar()

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