บทบาทของคอลัมน์

หน้านี้อธิบายแนวคิดและการใช้บทบาทในตารางข้อมูลแผนภูมิ

  1. บทบาทคืออะไร
  2. บทบาทที่พร้อมใช้งานมีอะไรบ้าง
  3. ลําดับชั้นและการเชื่อมโยง
  4. การมอบหมายบทบาท

บทบาทคืออะไร

ตอนนี้ออบเจ็กต์ Google DataTable และ DataView รองรับบทบาทของคอลัมน์ที่กําหนดไว้อย่างชัดเจนแล้ว บทบาทในคอลัมน์อธิบายวัตถุประสงค์ของข้อมูลในคอลัมน์นั้น เช่น คอลัมน์อาจเก็บข้อมูลที่อธิบายข้อความเคล็ดลับเครื่องมือ คําอธิบายประกอบจุดข้อมูล หรือตัวบ่งชี้ความไม่แน่นอน บทบาทส่วนใหญ่ของคอลัมน์จะมีผลกับคอลัมน์ "ข้อมูล" ที่อยู่ก่อนคอลัมน์ ไม่ว่าจะอยู่ก่อนหรือก่อนคอลัมน์กลุ่มบทบาทที่ต่อเนื่องกันก่อน เช่น คุณอาจมี 2 คอลัมน์ตามคอลัมน์ "ข้อมูล" และอีกคอลัมน์สําหรับ "เคล็ดลับเครื่องมือ" และอีกคอลัมน์สําหรับ "หมายเหตุ" แต่โดยทั่วไปแล้ว บทบาท "annotation" และ "annotationText" จะอยู่หลังคอลัมน์ "โดเมน"

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

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

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

ต่อไปนี้คือการเปรียบเทียบสิ่งที่คุณทําได้กับแผนภูมิเส้นโดยใช้บทบาทที่อนุมานเริ่มต้นเท่านั้น เทียบกับบทบาทเพิ่มเติมที่ได้รับมอบหมายอย่างชัดแจ้ง

รูปแบบตารางข้อมูลแผนภูมิเส้น

  คอลัมน์ 0 คอลัมน์ที่ 1 ... คอลัมน์ N
วัตถุประสงค์ ค่าบรรทัดที่ 1 ... ค่าบรรทัด N
ประเภทข้อมูล number ... number
บทบาท โดเมน ข้อมูล ... ข้อมูล
บทบาทคอลัมน์
ที่รองรับ (ไม่บังคับ)
  • คำอธิบายประกอบ
  • ข้อความคําอธิบายประกอบ
  • คำอธิบายประกอบ
  • ข้อความคําอธิบายประกอบ
  • แน่นอน
  • การเน้น
  • ช่วงเวลา
  • ขอบเขต
  • รูปแบบ
  • เคล็ดลับเครื่องมือ
...
  • คำอธิบายประกอบ
  • ข้อความคําอธิบายประกอบ
  • แน่นอน
  • การเน้น
  • ช่วงเวลา
  • ขอบเขต
  • รูปแบบ
  • เคล็ดลับเครื่องมือ

 

แผนภูมิที่ไม่มีบทบาทในคอลัมน์ที่ชัดเจน แผนภูมิที่มีบทบาทคอลัมน์ที่ชัดเจน

แผนภูมินี้ไม่ได้ใช้บทบาทอย่างชัดแจ้ง ดังนั้นจึงใช้ได้เฉพาะรูปแบบข้อมูลพื้นฐานและคอลัมน์ของโดเมนที่แสดงด้านบน

ตารางข้อมูล

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
  ['April',1000],
  ['May',  1170],
  ['June',  660],
  ['July', 1030]
]);

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

  • คอลัมน์ หมายเหตุ จะระบุป้ายกํากับแบบคงที่ในแผนภูมิ ส่วน "A", "B", "C" คือคําอธิบายประกอบ
  • คอลัมน์ annotationText จะระบุข้อความที่วางเมาส์เหนือข้อความเมื่อวางเมาส์เหนือคําอธิบายประกอบ (ไม่ใช่จุดข้อมูล)
  • คอลัมน์ Interval ระบุจุดบนสุดและล่างสุดของแถบ I ในแผนภูมิ แผนภูมิแท่งมี 3 แท่ง
  • คอลัมน์ความแน่นอนจะระบุว่าข้อมูล ณ เวลานั้นแน่ใจหรือไม่ จุดข้อมูลสุดท้ายยังไม่แน่ใจ เส้นจึงนําไปยังจุด

ตารางข้อมูล

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'});  // interval role col.
data.addColumn({type:'number', role:'interval'});  // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
    ['April',1000,  900, 1100,  'A','Stolen data', true],
    ['May',  1170, 1000, 1200,  'B','Coffee spill', true],
    ['June',  660,  550,  800,  'C','Wumpus attack', true],
    ['July', 1030, null, null, null, null, false]
]);

บทบาทใดบ้าง

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

บทบาท คำอธิบาย ตัวอย่าง
หมายเหตุ

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

คําอธิบายประกอบมี 2 รูปแบบ ได้แก่ จุด (ค่าเริ่มต้น) ซึ่งจะวาดข้อความของคําอธิบายประกอบใกล้จุดที่ระบุ และเส้น ซึ่งจะวาดคําอธิบายประกอบในเส้นที่ตัดกับพื้นที่ของแผนภูมิ คุณระบุรูปแบบเส้นได้โดยตั้งค่าตัวเลือกแผนภูมินี้: annotations: {'column_id': {style: 'line'}}

ประเภทข้อมูล: สตริง

ค่าเริ่มต้น: สตริงว่าง

ข้อมูล

label: "ปี", "ฝ่ายขาย", Null, ไม่มีข้อมูล, "ค่าใช้จ่าย", ไม่มีข้อมูล, ศูนย์: โดเมน, ข้อมูล, หมายเหตุ, หมายเหตุ, หมายเหตุ, ข้อมูล, หมายเหตุ, ข้อความ "2004", 1000, ไม่มีข้อมูล, 400, ค่าว่าง, 0', 01, 03, 01, 03, 01, 09, 01, 09, 01, 09, 01, 09, 01, 09, 01, 04, 01, 04, 01, 04, 01, 07, 07, 07, 07, 10 อะไรบ้าง, 0', 0', 0', 0', 0', 0', 0', 0', 0', 0', 0', 0', 3'

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

ยอมรับค่า Null ทั้งสําหรับเซลล์ข้อมูลเสริมและเซลล์ข้อมูลคําอธิบายประกอบ อย่างไรก็ตาม หากคุณมีค่าคําอธิบายประกอบ textView คุณต้องมีค่าคําอธิบายประกอบที่เกี่ยวข้อง

ข้อความหมายเหตุ

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

ประเภทข้อมูล: สตริง

ค่าเริ่มต้น: สตริงว่าง

แน่นอน

ระบุว่าจุดข้อมูลแน่นอนหรือไม่ วิธีแสดงผลนี้ขึ้นอยู่กับประเภทของแผนภูมิ เช่น อาจระบุด้วยเส้นประหรือสีทึบ

สําหรับแผนภูมิเส้นและแผนภูมิพื้นที่ กลุ่มระหว่างจุดข้อมูล 2 จุดจะมีค่าที่แน่นอนในกรณีที่ไม่แน่ใจ

ประเภทข้อมูล: บูลีน ในกรณีที่เป็นจริง เท็จ ไม่แน่นอน

ค่าเริ่มต้น: จริง

การเน้น

เน้นที่จุดข้อมูลแผนภูมิที่ระบุ แสดงเป็นเส้นหนาและ/หรือจุดขนาดใหญ่

สําหรับแผนภูมิเส้นและแผนภูมิพื้นที่ จะเน้นกลุ่มระหว่างจุดข้อมูลทั้ง 2 จุดในกรณีที่เน้นจุดข้อมูลทั้ง 2 จุดเท่านั้น

ประเภทข้อมูล: บูลีน

ค่าเริ่มต้น: เท็จ

ข้อมูล

label: 'Year',  'Sales',     null, 'Expenses',     null
 role: domain,   data,   emphasis,     data,   emphasis
       '2004',   1000,       true,      400,      false
       '2005',   1170,       true,      460,       true
       '2006',    660,      false,     1120,       true
       '2007',   1030,      false,      540,       true

ในแผนภูมินี้ ชุด "การขาย" มี 1 กลุ่มที่เน้นการแสดงผล ซึ่งกําหนดโดยคอลัมน์ 3 แถว 1 และ 2 ชุด "ค่าใช้จ่าย" มี 2 กลุ่มที่เน้นการแสดงผล โดยระบุด้วยคอลัมน์ที่ 5, แถวที่ 2, 3 และ 4 โปรดทราบว่าการเน้นต้องเน้นจุดแบ่งทั้ง 2 จุด

ช่วงเวลา

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

ประเภทข้อมูล: ตัวเลข

ค่าเริ่มต้น: ไม่มีช่วงเวลา

ข้อมูล

label: 'Day',  'Stock value',   null,     null
 role: domain,     data,    interval, interval
        'Mon',       38,          20,       45
        'Tue',       55,          31,       66
        'Wed',       77,          50,       80
      'Thurs',       66,          50,       77

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

หมายเหตุ: ดูรายละเอียดทั้งหมดในช่วงตามช่วงเวลา

ขอบเขต

ระบุว่าจุดอยู่ในหรือนอกขอบเขตหรือไม่ หากจุดใดอยู่นอกขอบเขต รูปภาพจะถูกตัดออกชั่วคราว

สําหรับแผนภูมิแผนภูมิเส้นและพื้นที่ กลุ่มระหว่างจุดข้อมูล 2 จุดจะอยู่ในขอบเขตหากปลายทางอยู่ในขอบเขต

ประเภทข้อมูล: บูลีน โดยที่เป็นจริงในขอบเขต

ค่าเริ่มต้น: จริง

ข้อมูล

label: 'Year',   'Sales',    null,    'Expenses',      null
 role: domain,     data,    scope,        data,       scope
        '2004',    1000,    false,         400,        true
        '2005',    1170,    false,         460,       false
        '2006',     660,     true,        1120,       false
        '2007',    1030,     true,         540,       false

คอลัมน์ขอบเขตแรกใช้กับคอลัมน์ข้อมูล "การขาย" ทางด้านซ้าย กลุ่มแรกแสดงผลอยู่นอกขอบเขตเนื่องจากจุดขอบเขตทั้งสองอยู่นอกขอบเขต คอลัมน์ขอบเขตที่ 2 ใช้กับคอลัมน์ข้อมูล "ค่าใช้จ่าย" ทางด้านซ้าย กลุ่มแรกถูกทําเครื่องหมายเป็นขอบเขต เนื่องจากจุดหนึ่งของขอบเขตอยู่ในขอบเขต ส่วนที่เหลือของบรรทัดอยู่นอกขอบเขต เนื่องจากจุดอื่นๆ ทั้งหมดถูกทําเครื่องหมายว่าอยู่นอกขอบเขต

รูปแบบ

จัดรูปแบบพร็อพเพอร์ตี้บางรายการสําหรับแง่มุมต่างๆ ของข้อมูล ค่าเหล่านี้คือ

  • color
  • opacity
  • stroke-width
  • stroke-color
  • stroke-opacity
  • fill-color
  • fill-opacity

ประเภทข้อมูล: สตริงซึ่งสามารถใช้รูปแบบต่างๆ โดยใช้ไวยากรณ์ 'firstProperty: value; secondProperty: value' หรือตั้งค่ารูปแบบเฉพาะสําหรับ bar, line, และ point โดยระบุประเภทและรวมพร็อพเพอร์ตี้ของรูปแบบไว้ในวงเล็บปีกกา (เช่น bar { //properties go here })

ค่าเริ่มต้น: Null

ข้อมูล

label: 'Character', 'Popularity',   'Style',
role:  domain,      data,   style,
'Hulk',             50,    'color: green',
'Captain America',  75,    'color: #0000cf;' +
                           'stroke-color: #cf001d',
'Wolverine',        90,    'opacity: 0.5;' +
                           'stroke-width: 5;' +
                           'stroke-color: #01a0ff;' +
                           'fill-color: #fff600',
'Iron Man',         60,    'color: #db9500;' +
                           'stroke-width: 10;' +
                           'stroke-color: #a30300',
'Spider Man',       100,   'bar {' +
                           'fill-color: #c8001d;' +
                           'stroke-width: 3;' +
                           'stroke-color: #1800c8}'

      

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

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

เคล็ดลับเครื่องมือ

ข้อความที่จะแสดงเมื่อผู้ใช้วางเมาส์เหนือจุดข้อมูลที่เชื่อมโยงกับแถวนี้

หมายเหตุ: ไม่ใช่ที่รองรับโดยแผนภูมิฟองอากาศ เนื้อหาของเคล็ดลับเครื่องมือ HTML ของแผนภูมิฟองอากาศจะปรับแต่งไม่ได้

ประเภทข้อมูล: สตริง

ค่าเริ่มต้น: ค่าของจุดข้อมูล

ข้อมูล

label: 'Year',   'Sales',    null,   'Expenses',    null
 role: domain,     data,    tooltip,    data,      tooltip
        '2004',    1000, '1M$ sales,     400,    '$0.4M expenses
                           in 2004'                  in 2004'
        '2005',    1170, '1.17M$ sales,  460,    '$0.46M expenses
                            in 2005'                  in 2005'
        '2006',     660, '.66$ sales,   1120,     '$1.12M expenses
                            in 2006'                 in 2006'
        '2007',    1030, '1.03M$ sales,  540,    '$0.54M expenses
                            in 2007'                  in 2007'

วางเมาส์เหนือจุดข้อมูลเพื่อแสดงข้อความเคล็ดลับเครื่องมือ ระบบจะกําหนดข้อมูลเคล็ดลับเครื่องมือให้กับทุกจุดในทั้ง 2 บรรทัดในคอลัมน์ 3 และ 5

หมายเหตุ: ดูรายละเอียดเพิ่มเติมเกี่ยวกับการปรับแต่งเคล็ดลับเครื่องมือได้ที่เคล็ดลับเครื่องมือ

โดเมน

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

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

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

ข้อมูล:

label: '2009,  '2009,     '2009,   '2008,    '2008    '2008
      Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role:  domain,   data,       data,   domain,   data,     data
      'Q1/09',   1000,        400,  'Q1/08',    800,      300
      'Q2/09',   1170,        460,  'Q2/08',    750,      400
      'Q3/09',    660,       1120,  'Q3/08',    700,      540
      'Q4/09',   1030,        540,  'Q4/08',    820,      620

ตัวอย่างนี้แสดงแผนภูมิหลายโดเมน คอลัมน์ข้อมูล 2 คอลัมน์แรกแก้ไขโดเมนแรก ("2009 Quarter") และคอลัมน์ข้อมูล 2 คอลัมน์สุดท้ายแก้ไขโดเมนที่สอง ("2008 Quarter") โดเมนทั้ง 2 รายการจะซ้อนบนสเกลแกนเดียวกัน

ข้อมูล

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

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

ประเภทข้อมูล: ตัวเลข

 

ลําดับชั้นและการเชื่อมโยง

แผนภาพต่อไปนี้แสดงคอลัมน์บทบาทที่ใช้กับคอลัมน์บทบาทอื่นๆ ได้ คอลัมน์ทั้งหมด ยกเว้นคอลัมน์โดเมนกับเพื่อนบ้านที่ใกล้ที่สุด ที่จะนําคอลัมน์ไปใช้ได้

เช่น คอลัมน์ scope จะใช้กับคอลัมน์ data ที่ใกล้เคียงที่สุด โดยคอลัมน์ annotationText จะมีผลกับคอลัมน์ notnotation ที่ใกล้ที่สุดทางด้านซ้าย และ notation จะมีผลกับคอลัมน์ data หรือ domain ที่ใกล้ที่สุดทางด้านซ้าย

การมอบหมายบทบาท

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

เทคนิค 2 อย่างแรกวาดแผนภูมิต่อไปนี้

เมธอด DataTable.addColumn

ตัวอย่างต่อไปนี้สร้างแผนภูมิแท่งที่มีตัวทําเครื่องหมายช่วงเวลาบนแถบ 3 แถบ คอลัมน์ช่วงเวลาจะระบุด้วยคอลัมน์ที่ 3 และ 4 โดยใช้เมธอด DataTable.addColumn()

       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Month'); // Implicit domain column.
       data.addColumn('number', 'Sales'); // Implicit data column.
       data.addColumn({type:'number', role:'interval'});
       data.addColumn({type:'number', role:'interval'});
       data.addColumn('number', 'Expenses');
       data.addRows([
         ['April',1000,  900, 1100,   400],
         ['May',  1170, 1000, 1200,   460],
         ['June',  660,  550,  800,  1120],
         ['July', 1030,    ,     ,    540]
       ]);

       var chart = new google.visualization.BarChart(
                document.getElementById('visualization'));
       chart.draw(data,
          {width: 800, height: 600, title: 'Company Performance'});

รูปแบบสัญพจน์ของ JavaScript

ใน JSON ตามตัวอักษร คุณต้องระบุพร็อพเพอร์ตี้ p ของคอลัมน์ที่มีค่า "role":"role-type" ตัวอย่างต่อไปนี้สาธิตวิธีการระบุบทบาทโดยใช้สัญพจน์ของ JavaScript ซึ่งจะทําได้ในขณะสร้างตารางเท่านั้น

{"cols":[
  {"id":"","label":"Month","pattern":"","type":"string"},
  {"id":"","label":"Sales","pattern":"","type":"number"},
  {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
  {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
  {"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
  {"c":[
    {"v":"April","f":null},
    {"v":1000,"f":null},
    {"v":900,"f":null},
    {"v":1100,"f":null},
    {"v":400,"f":null}]},
  {"c":[
    {"v":"May","f":null},
    {"v":1170,"f":null},
    {"v":1000,"f":null},
    {"v":1200,"f":null},
    {"v":460,"f":null}]},
  {"c":[{"v":"June","f":null},
    {"v":660,"f":null},
    {"v":550,"f":null},
    {"v":800,"f":null},
    {"v":1120,"f":null}]},
  {"c":[
    {"v":"July","f":null},
    {"v":1030,"f":null},
    {"v":null,"f":null},
    {"v":null,"f":null},
    {"v":540,"f":null}]}],
"p":null
}

เมธอด DataView.setColumn

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