เอกสารอ้างอิง API การแสดงภาพของ Google

หน้านี้จะแสดงออบเจ็กต์ที่ API การแสดงภาพของ Google แสดงให้เห็นและวิธีการมาตรฐานที่การแสดงภาพทั้งหมดแสดง

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

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

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

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

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

โปรดดู QueryResponse.getDataTable

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

ไวยากรณ์

DataTable(opt_data, opt_version)

เพิ่มประสิทธิภาพข้อมูล

[ไม่บังคับ] ข้อมูลที่ใช้เริ่มต้นตาราง ซึ่งอาจเป็น 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 Charts ไม่ได้ตรวจสอบตารางข้อมูล (หากแผนภูมิแผนภูมิแสดงช้าลง ) หากคุณระบุตัวเลขที่คอลัมน์คาดหวังสตริง หรือในทางกลับกัน Google Charts จะพยายามอย่างเต็มที่เพื่อตีความค่าในทางที่เหมาะสมแต่จะไม่แจ้งข้อผิดพลาด

ตัวอย่างต่อไปนี้สาธิตการสร้างและป้อนข้อมูล 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)"}]}
 ]
}

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

คุณเริ่มต้น DataTable ได้โดยส่งออบเจ็กต์สัญพจน์ของสตริง JavaScript ไปยังพารามิเตอร์ data เราจะเรียกออบเจ็กต์นี้ว่า data คุณเขียนโค้ดออบเจ็กต์นี้เองได้ตามคําอธิบายด้านล่าง หรือจะใช้ไลบรารี 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: ซึ่งอธิบายภายหลัง)
  • "บูลีน" - ค่าบูลีน JavaScript ("true" หรือ "false") ค่าตัวอย่าง: v:'true'
  • "number" - ค่าตัวเลข JavaScript ค่าตัวอย่าง: v:7, v:3.14, v:-55
  • "string" - ค่าสตริง JavaScript ค่าตัวอย่าง: v:'hello'
  • "date" - ออบเจ็กต์วันที่ของ JavaScript (เดือนตาม 0) ที่มีการตัดเวลา ค่าตัวอย่าง: 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 [ไม่บังคับ] รหัสสตริงของคอลัมน์ ต้องไม่ซ้ํากันในตาราง ใช้อักขระที่เป็นตัวอักษรและตัวเลขคละกันพื้นฐาน เพื่อให้หน้าโฮสต์ไม่จําเป็นต้องมีการยกเว้นสําหรับเข้าถึงคอลัมน์ใน JavaScript โปรดระวังอย่าเลือกคีย์เวิร์ด JavaScript ตัวอย่าง: id:'col_1'
• label [ไม่บังคับ] ค่าสตริงที่การแสดงภาพบางส่วนแสดงสําหรับคอลัมน์นี้ เช่น 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 [ไม่บังคับ] ค่าเซลล์ ประเภทข้อมูลควรตรงกับประเภทข้อมูลของคอลัมน์ หากเซลล์เป็น Null พร็อพเพอร์ตี้ v จะเป็น Null แต่ยังคงมีพร็อพเพอร์ตี้ 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 เว้นว่างไว้สําหรับเซลล์ในอาร์เรย์ หรือไม่ละเว้นสมาชิกในอาร์เรย์ก็ได้ ดังนั้นหากต้องการระบุแถวที่เป็นค่าว่างสําหรับ 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...() ที่เหมาะสม

โปรดดูข้อมูลเพิ่มเติม

setColumn(), hideColumn(), 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 ใช้ในการรวมแผนภูมิและจัดการการค้นหาการโหลด ภาพวาด และแหล่งข้อมูลทั้งหมดสําหรับแผนภูมิของคุณ ชั้นเรียนจะแสดงวิธีการที่สะดวกในการตั้งค่าสําหรับค่าและวาดแผนภูมิ คลาสนี้ลดความซับซ้อนในการอ่านจากแหล่งข้อมูล เนื่องจากคุณไม่จําเป็นต้องสร้างเครื่องจัดการการเรียกกลับการค้นหา และยังใช้บันทึกแผนภูมิเพื่อนํามาใช้ซ้ําได้อย่างง่ายดายอีกด้วย

ประโยชน์อีกอย่างของการใช้ 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.draw() ก่อนที่กิจกรรมใดๆ จะถูกทิ้ง

ตัวอย่าง

ข้อมูลโค้ด 2 รายการต่อไปนี้สร้างแผนภูมิเส้นที่เทียบเท่า ตัวอย่างแรกใช้สัญกรณ์ 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() ให้โหลดแพ็กเกจ "chatEditor" คุณไม่จําเป็นต้องโหลดแพ็กเกจของประเภทแผนภูมิที่จะแสดงในเครื่องมือแก้ไข เครื่องมือแก้ไขแผนภูมิจะโหลดแพ็กเกจทั้งหมดตามต้องการ
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 แสดงวิธีต่อไปนี้

กลุ่ม()

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

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

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

ไวยากรณ์

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

ตารางข้อมูล

อินพุต DataTable แต่จะไม่แก้ไขโดยโทรหา group()

คีย์

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

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

ตัวอย่าง: [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]

คอลัมน์

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

• column - ตัวเลขที่ระบุดัชนีของคอลัมน์ที่จะแสดง
• aggregation - ฟังก์ชันที่ยอมรับอาร์เรย์ของค่าทั้งหมดของคอลัมน์นี้ในกลุ่มแถวนี้และแสดงผลค่าเดียวเพื่อแสดงในแถวผลลัพธ์ ค่าการแสดงผลต้องเป็นประเภทที่ระบุโดยพร็อพเพอร์ตี้ type ของออบเจ็กต์ ดูรายละเอียดการสร้างฟังก์ชันการรวมของคุณเองได้ที่ด้านล่าง คุณต้องทราบว่าข้อมูลประเภทใดที่วิธีนี้ยอมรับได้และเรียกใช้ในคอลัมน์ประเภทที่เหมาะสมเท่านั้น API มีฟังก์ชันการรวมที่มีประโยชน์มากมาย โปรดดูฟังก์ชันการรวมที่ระบุไว้ด้านล่างสําหรับรายการ หรือการสร้างฟังก์ชันการรวมเพื่อดูวิธีเขียนฟังก์ชันการรวมของคุณเอง
• type - ประเภทการแสดงผลของฟังก์ชันการรวม ซึ่งควรเป็นชื่อประเภทสตริง JavaScript เช่น "number" หรือ "บูลีน"
• 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;
}

ผนวก()

วิธีนี้จะผนวกตารางข้อมูล 2 ตาราง (ออบเจ็กต์ DataTable หรือ DataView) ลงในตารางผลลัพธ์รายการเดียว คล้ายกับคําสั่ง SQL JOIN คุณระบุคู่คอลัมน์อย่างน้อย 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 ตารางนี้ไม่สามารถมีคีย์ที่เหมือนกันได้หลายรายการ (โดยที่คีย์เป็นชุดค่าผสมของคอลัมน์คีย์)

วิธีการเข้าร่วม

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

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

คีย์

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

ต	ข
เจน	แดง
เจน	น้ำเงิน
ฟรีด	แดง

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

dt1คอลัมน์

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

dt2คอลัมน์

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

แสดงผลค่า

DataTable ที่มีคอลัมน์สําคัญ dt1Column และ dt2Column ตารางนี้จัดเรียงตามคอลัมน์หลักจากซ้ายไปขวา เมื่อ joinMethod เป็น "ภายใน" ควรป้อนข้อมูลเซลล์หลักทั้งหมด สําหรับวิธีการผนวกอื่นๆ หากไม่พบคีย์ที่ตรงกัน ตารางจะมีค่า 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

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

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

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

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

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

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

1. รับออบเจ็กต์ DataTable ที่มีการป้อนข้อมูล
2. สําหรับแต่ละคอลัมน์ที่ต้องการจัดรูปแบบใหม่ ให้ทําดังนี้
   1. สร้างออบเจ็กต์ที่ระบุตัวเลือกทั้งหมดของตัวจัดรูปแบบ นี่คือออบเจ็กต์ JavaScript พื้นฐานที่มีชุดพร็อพเพอร์ตี้และค่า อ่านเอกสารประกอบของรูปแบบเครื่องมือจัดรูปแบบเพื่อดูพร็อพเพอร์ตี้ที่รองรับ (คุณอาจส่งผ่านออบเจ็กต์คําอธิบายตามตัวอักษรที่ระบุตัวเลือกของคุณก็ได้)
   2. สร้างตัวจัดรูปแบบ โดยส่งในออบเจ็กต์ตัวเลือก
   3. เรียกใช้ formatter.format(table, colIndex) โดยส่งผ่านในคอลัมน์ DataTable และหมายเลขคอลัมน์ (ศูนย์) เพื่อจัดรูปแบบใหม่ โปรดทราบว่าคุณใช้ตัวจัดรูปแบบได้เพียงรายการเดียวกับแต่ละคอลัมน์ การใช้ตัวจัดรูปแบบที่ 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 เป็นชื่อ รูปแบบที่ถูกต้อง option - ออบเจ็กต์ JavaScript ทั่วไปที่ระบุตัวเลือกสําหรับเครื่องมือสร้างรูปแบบ ออบเจ็กต์นี้เป็นออบเจ็กต์ทั่วไปที่มีคู่พร็อพเพอร์ตี้/ค่าซึ่งมีพร็อพเพอร์ตี้เฉพาะสําหรับตัวจัดรูปแบบนั้น โปรดดูรายละเอียดเกี่ยวกับรูปแบบที่รองรับจากเอกสารประกอบของเครื่องมือจัดรูปแบบที่เจาะจง คุณเรียกใช้เครื่องมือสร้างสําหรับออบเจ็กต์ 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 ที่ต่างกัน

 

GoogleVisual API มีรูปแบบดังต่อไปนี้

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

รูปแบบลูกศร

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

ตัวเลือก

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

ตัวเลือก	คำอธิบาย
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 รองรับตัวเลือกต่อไปนี้ โดยส่งผ่านไปยังเครื่องมือสร้าง

ตัวเลือก	ตัวอย่าง คำอธิบาย
base	จํานวนที่เป็นค่าฐานสําหรับเปรียบเทียบค่าเซลล์ หากค่าเซลล์สูงกว่า ระบบจะวาดไว้ทางด้านขวาของฐาน หากต่ํากว่า วาดไว้ทางด้านซ้าย ค่าเริ่มต้นคือ 0
colorNegative	สตริงที่ระบุส่วนค่าติดลบของแถบ ค่าที่เป็นไปได้คือ "red", "green" และ "blue" โดยมีค่าเริ่มต้นเป็น "red"
colorPositive	สตริงที่ระบุสีของส่วนค่าบวกของแถบ ค่าที่เป็นไปได้คือ "red", "green" และ "blue" ค่าเริ่มต้นคือ "สีน้ําเงิน"
drawZeroLine	บูลีนที่ระบุว่าจะวาดเส้นฐานสีเข้ม 1 พิกเซลเมื่อมีค่าลบหรือไม่ เส้นสีเข้มมีไว้เพื่อเพิ่มการสแกนภาพของแถบ ค่าเริ่มต้นคือ "false"
max	ค่าสูงสุดของช่วงบาร์ ค่าเริ่มต้นคือค่าสูงสุดในตาราง
min	ค่าตัวเลขขั้นต่ําสําหรับช่วงบาร์ ค่าเริ่มต้นคือมูลค่าต่ําสุดในตาราง
showValue	หากเป็น "จริง" ระบบจะแสดงค่าและบาร์ หากเป็น "เท็จ" จะแสดงเฉพาะแถบเท่านั้น ค่าเริ่มต้นคือจริง
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%'});

รูปแบบสี

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

วิธีการ

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

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

รูปแบบวันที่

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

ตัวเลือก

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

ตัวเลือก	คำอธิบาย
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 หรือเวลาเขตแปซิฟิกตะวันออกในสหรัฐอเมริกา) ค่าที่แสดงจะเป็นตอนเที่ยง

วิธีการ

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 แต่ยังไม่รองรับรูปแบบต่อไปนี้ e D F g Y u w W หากต้องการหลีกเลี่ยงไม่ให้เกิดการทับซ้อนกันของรูปแบบ ข้อความตามตัวอักษรที่ต้องการให้ปรากฏในเอาต์พุตควรอยู่ในเครื่องหมายคําพูดเดี่ยว ยกเว้นเครื่องหมายคําพูดเดี่ยวที่ควรใช้เป็น 2 เท่า เช่น "K 'o''clock.'"

รูปแบบ	คำอธิบาย	ตัวอย่างเอาต์พุต
GG	นักออกแบบยุค	"โฆษณา"
YY หรือ YYYY	ปี	1996
ข.	เดือนในปี สําหรับเดือนมกราคม M สร้าง 1 MM สร้าง 01 MMM ผลิตเดือนมกราคม MMMM สร้างในเดือนมกราคม	"กรกฎาคม" "07"
d	วันในเดือน ค่า "d" ที่เกินมาจะเพิ่มเลข 0 นําหน้า	10
h	ชั่วโมงในสเกล 12 ชั่วโมง ค่า "h" ที่เกินมาจะเพิ่มเลข 0 นําหน้า	12
H	ชั่วโมงในสเกล 24 ชั่วโมง ค่า Hk เพิ่มเติมจะเพิ่ม 0 นําหน้า	0
m	นาทีในชั่วโมง ค่า "M" เพิ่มเติมจะเพิ่มเลข 0 นําหน้า	30
s	วินาทีเป็นวินาที ค่า 's' เพิ่มเติมจะเพิ่มเลข 0 นําหน้า	55
S	เศษของวินาที ระบบจะเติมค่า "S" เกินมาทางด้านขวาด้วยเลข 0	978
E	วันของสัปดาห์ ผลลัพธ์ต่อไปนี้สําหรับ "วันอังคาร" E สร้าง T EE หรือ EEE สร้างอังคารหรืออังคาร EEEE ผลิตวันอังคาร	"อังคาร" "อังคาร"
AA	AM/PM	"PM"
k	ชั่วโมงต่อวัน (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 product -0500 ZZZZ และผลิตภัณฑ์อื่นๆ อีกมากมาย "GMT -05:00"	"-0800" "GMT -05:00"
v	เขตเวลา (ทั่วไป)	"อื่นๆ/GMT-5"
'	Escape สําหรับข้อความ	"วันที่='
''	เครื่องหมายคําพูดเดี่ยว	"YY"

รูปแบบตัวเลข

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

ตัวเลือก

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

ตัวเลือก	คำอธิบาย
decimalSymbol	อักขระที่จะใช้เป็นเครื่องหมายทศนิยม ค่าเริ่มต้นคือจุด (.)
fractionDigits	ตัวเลขที่ระบุจํานวนหลักที่จะแสดงหลังทศนิยม ซึ่งค่าเริ่มต้นคือ 2 รายการ หากระบุตัวเลขมากกว่าจํานวนที่มี ตัวเลขจะแสดงเลขศูนย์สําหรับค่าขนาดเล็ก ระบบจะปัดเศษค่าที่ถูกตัดออก (เลื่อนขึ้น 5 ครั้ง)
groupingSymbol	อักขระที่จะใช้ในการจัดกลุ่มตัวเลขทางด้านซ้ายของทศนิยมสําหรับทศนิยม 3 ชุด โดยค่าเริ่มต้นจะเป็นคอมมา (,)
negativeColor	สีข้อความสําหรับค่าลบ ไม่มีค่าเริ่มต้น ค่าอาจเป็นค่าสี HTML ที่ยอมรับ เช่น "แดง" หรือ "#FF0000"
negativeParens	บูลีน โดยที่ค่า "จริง" บ่งชี้ว่ามีเครื่องหมายลบล้อมรอบด้วยวงเล็บ ค่าเริ่มต้นคือจริง
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%'});

รูปแบบ

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

วิธีการ

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

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

คลาสผู้ช่วยที่ช่วยลดความซับซ้อนในการเขียน Gadget ที่ใช้ GoogleVisual 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_option

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

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

วิธีการ

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

การตอบกลับการค้นหา

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

วิธีการ

วิธีการ	มูลค่าการแสดงผล	คำอธิบาย
getDataTable()	ตารางข้อมูล	แสดงตารางข้อมูลตามที่แสดงโดยแหล่งข้อมูล แสดงผล null หากการดําเนินการค้นหาล้มเหลวและไม่มีข้อมูลแสดงผล
getDetailedMessage()	สตริง	แสดงข้อความแสดงข้อผิดพลาดโดยละเอียดสําหรับการค้นหาที่ล้มเหลว หากการดําเนินการค้นหาสําเร็จ วิธีนี้จะแสดงผลสตริงว่าง ข้อความที่แสดงผลคือข้อความที่มีไว้สําหรับนักพัฒนาซอฟต์แวร์และอาจมีข้อมูลทางเทคนิค เช่น "ไม่มีคอลัมน์ {salary}"
getMessage()	สตริง	แสดงข้อความแสดงข้อผิดพลาดสั้นๆ สําหรับคําค้นหาที่ล้มเหลว หากการดําเนินการค้นหาสําเร็จ เมธอดนี้จะแสดงสตริงที่ว่างเปล่า ส่วนข้อความที่ส่งคืนคือข้อความสั้นๆ ที่มีไว้สําหรับผู้ใช้ปลายทาง เช่น "คําค้นหาไม่ถูกต้อง" หรือ "ปฏิเสธการเข้าถึง"
getReasons()	อาร์เรย์ของสตริง	แสดงผลอาร์เรย์ของ 0 รายการเพิ่มเติม แต่ละรายการเป็นสตริงสั้นๆ ที่มีข้อผิดพลาดหรือรหัสข้อผิดพลาดที่ระบบสูงขึ้นขณะเรียกใช้การค้นหา รหัสที่เป็นไปได้ ได้แก่ 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_option - ออบเจ็กต์ที่ไม่บังคับซึ่งมีพร็อพเพอร์ตี้ที่ตั้งค่าตัวเลือกการแสดงต่างๆ สําหรับข้อความ ระบบรองรับตัวเลือกต่อไปนี้ showInTooltip - ค่าบูลีนเมื่อ true แสดงข้อความโดยละเอียดเป็นข้อความเคล็ดลับเครื่องมือ ส่วน false แสดงข้อความโดยละเอียดในส่วนเนื้อหาคอนเทนเนอร์หลังข้อความสั้นๆ ค่าเริ่มต้นคือจริง type - สตริงที่อธิบายประเภทข้อผิดพลาด ซึ่งระบุว่าควรใช้รูปแบบ css ใดกับข้อความนี้ ค่าที่รองรับคือ "error" และ "warning" ค่าเริ่มต้นคือ "error" style - สตริงรูปแบบสําหรับข้อความแสดงข้อผิดพลาด สไตล์นี้จะลบล้างรูปแบบที่ใช้กับประเภทคําเตือน (opt_option.type) ตัวอย่างเช่น 'background-color: #33ff99; padding: 2px;' ค่าเริ่มต้นจะเป็นสตริงว่าง นําออกได้ - ค่าบูลีน โดยที่ค่าจริงหมายความว่าข้อความจะปิดได้โดยการคลิกเมาส์จากผู้ใช้ ค่าเริ่มต้นจะเป็น "เท็จ"
addErrorFromQueryResponse(container, response)	ค่ารหัสสตริงที่ระบุออบเจ็กต์ข้อผิดพลาดที่สร้างขึ้น หรือเป็น Null หากการตอบกลับไม่ได้ระบุข้อผิดพลาด ซึ่งเป็นค่าที่ไม่ซ้ํากันในหน้าเว็บและใช้นําข้อผิดพลาดออกหรือค้นหาองค์ประกอบที่มีได้	ส่งคอนเทนเนอร์การค้นหาและข้อความแสดงข้อผิดพลาดไปยังวิธีนี้: หากการตอบกลับการค้นหาระบุว่าเกิดข้อผิดพลาดในการค้นหา จะแสดงข้อความแสดงข้อผิดพลาดในองค์ประกอบของหน้าเว็บที่ระบุ หากการตอบกลับการค้นหาไม่มีข้อมูล เมธอดนี้จะแสดงข้อผิดพลาด JavaScript ส่ง QueryResponse ที่ได้รับในเครื่องจัดการคําค้นหาไปยังข้อความนี้เพื่อแสดงข้อผิดพลาด และยังตั้งค่ารูปแบบการแสดงผลที่เหมาะกับประเภท (ข้อผิดพลาดหรือคําเตือน คล้ายกับ addError(opt_options.type)) container - องค์ประกอบ DOM ที่จะใช้แทรกข้อความแสดงข้อผิดพลาด หากไม่พบคอนเทนเนอร์ ฟังก์ชันจะแสดงข้อผิดพลาด JavaScript response - ออบเจ็กต์ QueryResponse ที่เครื่องจัดการคําค้นหาได้รับเพื่อตอบสนอง query หากค่าเป็น Null เมธอดนี้จะแสดงข้อผิดพลาด JavaScript
removeError(id)	บูลีน: จริง หากข้อผิดพลาดถูกนําออก เป็นเท็จ	นําข้อผิดพลาดที่ระบุตามรหัสออกจากหน้าเว็บ 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 event ระบบจะส่งฟังก์ชันการจัดการที่เป็นอาร์กิวเมนต์เหตุการณ์เป็นพารามิเตอร์

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

เครื่องจัดการฟังสําหรับผู้ฟังใหม่ คุณใช้เครื่องจัดการเพื่อนํา 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

ชื่อสตริงเพื่อเรียกเหตุการณ์ คุณสามารถเลือกค่าสตริงที่ต้องการ

อาร์กิวเมนต์เหตุการณ์

[ไม่บังคับ] แผนที่ของคู่ชื่อ/ค่าเพื่อส่งผ่านไปยังวิธีการรับ เช่น {message: "Hello!!", คะแนน: 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')); 

Draw()

วาดการแสดงภาพในหน้าเว็บ เบื้องหลังจะดึงข้อมูลกราฟิกจากเซิร์ฟเวอร์หรือสร้างกราฟิกในหน้าเว็บโดยใช้โค้ดภาพที่ลิงก์ได้ คุณควรเรียกใช้วิธีนี้ทุกครั้งที่ข้อมูลหรือตัวเลือกมีการเปลี่ยนแปลง ควรวาดออบเจ็กต์ภายในองค์ประกอบ 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 ไม่มีข้อมูล การเลือกจะเป็นแถว หากค่าทั้งสองไม่เป็นค่าว่าง ระบบจะถือว่าเป็นรายการข้อมูลที่เฉพาะเจาะจง คุณเรียกใช้เมธอด 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() ไม่ควรทําให้เหตุการณ์ "เลือก" เริ่มทํางาน การแสดงภาพอาจไม่สนใจตัวเลือกบางส่วน เช่น ตารางที่แสดงเฉพาะแถวที่เลือกอาจไม่สนใจองค์ประกอบในเซลล์หรือคอลัมน์ในการใช้งาน setSelection() หรือจะเลือกทั้งแถวก็ได้

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

setSelection(selection_array)

อาร์เรย์การเลือก

อาร์เรย์ของออบเจ็กต์ที่มีพร็อพเพอร์ตี้แถวและ/หรือคอลัมน์ที่เป็นตัวเลข row และ column คือหมายเลขแถวหรือคอลัมน์ของ 0 ของรายการในตารางข้อมูลที่มีให้เลือก หากต้องการเลือกทั้งคอลัมน์ ให้ตั้งค่า row เป็น Null หากต้องการเลือกทั้งแถว ให้ตั้งค่า 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)

2 อาร์เรย์

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

opt_first แถวข้อมูล

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

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

DataTable ใหม่

ตัวอย่าง

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

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

แผนภูมิ_JSON_or_object

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

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

ตัวอย่าง

สร้างแผนภูมิตามแหล่งข้อมูลสเปรดชีต และรวมการค้นหา ก A, ที่ไหน D > 100 คําสั่งซื้อโดย 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()

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