หน้านี้ได้รับการแปลโดย Cloud Translation API

แผนภูมิคำอธิบายประกอบ

ภาพรวม
ตัวอย่าง
กำลังโหลด
รูปแบบข้อมูล
ตัวเลือกการกำหนดค่า
เมธอด
เหตุการณ์
นโยบายข้อมูล
Notes

ภาพรวม

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

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

ตัวอย่าง

google.charts.load('current', {'packages':['annotationchart']});
      google.charts.setOnLoadCallback(drawChart);

function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addColumn('number', 'Gliese 163 mission');
        data.addColumn('string', 'Gliese title');
        data.addColumn('string', 'Gliese text');
        data.addRows([
          [new Date(2314, 2, 15), 12400, undefined, undefined,
                                  10645, undefined, undefined],
          [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                                  12374, undefined, undefined],
          [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                                  15766, 'Gallantors', 'First Encounter'],
          [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                                  34334, 'Gallantors', 'Statement of shared principles'],
          [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                                  66467, 'Gallantors', 'Mysteries revealed'],
          [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                                  79463, 'Gallantors', 'Omniscience achieved']
        ]);

var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

var options = {
          displayAnnotations: true
        };

chart.draw(data, options);
      }

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type='text/javascript'>
      google.charts.load('current', {'packages':['annotationchart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addColumn('number', 'Gliese 163 mission');
        data.addColumn('string', 'Gliese title');
        data.addColumn('string', 'Gliese text');
        data.addRows([
          [new Date(2314, 2, 15), 12400, undefined, undefined,
                                  10645, undefined, undefined],
          [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                                  12374, undefined, undefined],
          [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                                  15766, 'Gallantors', 'First Encounter'],
          [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                                  34334, 'Gallantors', 'Statement of shared principles'],
          [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                                  66467, 'Gallantors', 'Mysteries revealed'],
          [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                                  79463, 'Gallantors', 'Omniscience achieved']
        ]);

        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

        var options = {
          displayAnnotations: true
        };

        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id='chart_div' style='width: 900px; height: 600px;'></div>
  </body>
</html>

กำลังโหลด

ชื่อแพ็กเกจ google.charts.load คือ "annotationchart"

  google.charts.load("current", {packages: ['annotationchart']});

ชื่อคลาสของการแสดงภาพคือ google.visualization.AnnotationChart

  var visualization = new google.visualization.AnnotationChart(container);

รูปแบบข้อมูล

คุณสามารถแสดงเส้นบนแผนภูมิได้อย่างน้อย 1 เส้น แต่ละแถวจะแสดงตำแหน่ง X ในแผนภูมิ ซึ่งก็คือเวลาที่เจาะจง แต่ละบรรทัดจะอธิบายด้วยชุดคอลัมน์ 1-3 คอลัมน์

คอลัมน์แรกเป็นประเภท date หรือ datetime และระบุค่า X ของจุดบนแผนภูมิ หากคอลัมน์นี้เป็นประเภท date (ไม่ใช่ datetime) เวลาที่ความละเอียดน้อยที่สุดบนแกน X จะเป็น 1 วัน
จากนั้นข้อมูลแต่ละบรรทัดจะมีการอธิบายด้วยชุดคอลัมน์เพิ่มเติม 1-3 คอลัมน์ ตามที่อธิบายไว้ที่นี่
- ค่า Y - [ต้องระบุ, ตัวเลข] คอลัมน์แรกในแต่ละชุดจะอธิบายค่าของบรรทัด ณ เวลาที่เกี่ยวข้องจากคอลัมน์แรก ป้ายกำกับคอลัมน์จะแสดงเป็นชื่อของเส้นในแผนภูมิ
- ชื่อคำอธิบายประกอบ - [ไม่บังคับ สตริง] หากคอลัมน์สตริงตามหลังคอลัมน์ค่า และตัวเลือก displayAnnotations เป็นจริง คอลัมน์นี้จะมีชื่อย่อที่อธิบายจุดนี้ ตัวอย่างเช่น หากเส้นนี้แสดงอุณหภูมิในบราซิล และจุดนี้เป็นตัวเลขที่สูงมาก ชื่ออาจเป็น "วันที่ร้อนที่สุดตามบันทึก"
- ข้อความคำอธิบายประกอบ - [สตริงตัวเลือก] หากมีคอลัมน์สตริงที่ 2 สำหรับชุดนี้ ระบบจะใช้ค่าเซลล์เป็นข้อความอธิบายเพิ่มเติมสำหรับจุดนี้ คุณต้องตั้งค่าตัวเลือก displayAnnotations เป็น "จริง" เพื่อใช้คอลัมน์นี้ คุณใช้แท็ก HTML ได้หากคุณตั้งค่า allowHtml เป็น true โดยไม่มีขีดจำกัดขนาด แต่โปรดทราบว่ารายการที่ยาวเกินไปอาจล้นส่วนการแสดงผล คุณไม่จำเป็นต้องมีคอลัมน์นี้แม้ว่าคุณจะมีคอลัมน์ชื่อคำอธิบายประกอบสำหรับจุดนี้ก็ตาม แผนภูมิจะไม่ใช้ป้ายกำกับคอลัมน์ ตัวอย่างเช่น หากวันที่นี้เป็นวันที่อากาศร้อนที่สุดตามสถิติ คุณอาจพูดว่า "วันที่ที่ใกล้ที่สุด อากาศเย็นขึ้น 10 องศา"

ตัวเลือกการกำหนดค่า

ชื่อ
allowHtml	หากตั้งค่าเป็น "จริง" ข้อความคำอธิบายประกอบที่มีแท็ก HTML จะแสดงผลเป็น HTML ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
allValuesSuffix	คำต่อท้ายที่จะเพิ่มให้กับค่าทั้งหมดในคำอธิบาย และทำเครื่องหมายในป้ายกำกับในแกนแนวตั้ง ประเภท: สตริง ค่าเริ่มต้น: ไม่มี
annotationsWidth	ความกว้าง (เป็นเปอร์เซ็นต์) ของพื้นที่คำอธิบายประกอบ จากพื้นที่ทั้งหมดของแผนภูมิ ต้องเป็นตัวเลขในช่วง 5-80 ประเภท: ตัวเลข ค่าเริ่มต้น: 25
สี	สีที่จะใช้กับเส้นในแผนภูมิและป้ายกำกับ อาร์เรย์ของสตริง องค์ประกอบแต่ละรายการคือสตริงในรูปแบบสี HTML ที่ถูกต้อง เช่น "สีแดง" หรือ "#00cc00" ประเภท: อาร์เรย์ของสตริง ค่าเริ่มต้น: สีเริ่มต้น
dateFormat	รูปแบบที่ใช้แสดงข้อมูลวันที่ที่มุมขวาบน รูปแบบของช่องนี้จะเป็นไปตามที่ระบุโดยคลาส java SimpleDateFormat ประเภท: สตริง ค่าเริ่มต้น: "dd MMMM yyyy" หรือ "HH:mm MMMM dd, yyyy" ขึ้นอยู่กับประเภทของคอลัมน์แรก (วันที่ หรือวันที่และเวลาตามลำดับ)
displayAnnotations	หากตั้งค่าเป็น "เท็จ" แผนภูมิจะซ่อนตารางคำอธิบายประกอบ และคำอธิบายประกอบและ คำอธิบายประกอบText จะไม่ปรากฏ (ตารางคำอธิบายประกอบก็จะไม่แสดงเช่นกันหากไม่มีคำอธิบายประกอบในข้อมูล โดยไม่คำนึงถึงตัวเลือกนี้) เมื่อใช้ตัวเลือกนี้เป็น "จริง" คุณจะเพิ่มคอลัมน์สตริงคำอธิบายประกอบที่ไม่บังคับได้ 2 คอลัมน์หลังคอลัมน์ตัวเลข โดยคอลัมน์หนึ่งสำหรับชื่อคำอธิบายประกอบและอีก 1 คอลัมน์สำหรับข้อความคำอธิบายประกอบ ประเภท: บูลีน ค่าเริ่มต้น: true
displayAnnotationsFilter	หากตั้งค่าเป็น "จริง" แผนภูมิจะแสดงการควบคุมตัวกรองเพื่อกรองคำอธิบายประกอบ ใช้ตัวเลือกนี้เมื่อมีคำอธิบายประกอบจำนวนมาก ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
displayDateBarSeparator	เลือกว่าจะแสดงตัวคั่นแท่งขนาดเล็ก ( \| ) ระหว่างค่าชุดหนังสือและวันที่ในคำอธิบายหรือไม่ โดยที่ "จริง" หมายความว่าใช่ ประเภท: บูลีน ค่าเริ่มต้น: true
displayExactValues	เลือกว่าจะแสดงค่าในรูปแบบโค้งมนแบบย่อที่ด้านบนของกราฟเพื่อประหยัดพื้นที่หรือไม่ ค่าเท็จบ่งบอกว่าอาจแสดงค่าดังกล่าว ตัวอย่างเช่น หากตั้งค่าเป็น "เท็จ" 56123.45 อาจแสดงเป็น 56.12k ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
displayLegendDots	เลือกว่าจะแสดงจุดข้างค่าในข้อความคำอธิบายหรือไม่ โดยที่ "จริง" หมายถึง "ใช่" ประเภท: บูลีน ค่าเริ่มต้น: true
displayLegendValues	เลือกว่าจะแสดงค่าที่ไฮไลต์ในคำอธิบายหรือไม่ โดยที่ "จริง" หมายถึง "ใช่" ประเภท: บูลีน ค่าเริ่มต้น: true
displayRangeSelector	เลือกว่าจะแสดงพื้นที่สำหรับเลือกช่วงการซูม (พื้นที่ที่ด้านล่างของแผนภูมิ) หรือไม่ โดย "เท็จ" หมายถึงไม่ โครงร่างในตัวเลือกการซูมคือเวอร์ชันสเกลบันทึกของชุดแรกในแผนภูมิ โดยมีการปรับขนาดให้พอดีกับความสูงของตัวเลือกการซูม ประเภท: บูลีน ค่าเริ่มต้น: true
displayZoomButtons	แสดงปุ่มซูม ("1d 5d 1m" และอื่นๆ) หรือไม่ โดย "เท็จ" หมายถึงไม่ ประเภท: บูลีน ค่าเริ่มต้น: true
เติม	ตัวเลขตั้งแต่ 0-100 (รวมค่าอัลฟ่า) ที่ระบุอัลฟ่าของการเติมสีใต้แต่ละบรรทัดในกราฟเส้น 100 หมายถึงทึบแสง 100% และ 0 หมายถึงไม่มีการเติมเต็มเลย สีเติมจะเป็นสีเดียวกับเส้นด้านบน ประเภท: ตัวเลข ค่าเริ่มต้น: 0
legendPosition	เลือกว่าจะใส่คำอธิบายสีในแถวเดียวกันด้วยปุ่มซูมและวันที่ ("sameRow") หรือในแถวใหม่ ("newRow") ประเภท: สตริง ค่าเริ่มต้น: "sameRow"
สูงสุด	ค่าสูงสุดที่จะแสดงบนแกน Y หากจุดข้อมูลสูงสุดเกินค่านี้ ระบบจะไม่สนใจการตั้งค่านี้และแผนภูมิจะได้รับการปรับให้แสดงเครื่องหมายถูกหลักถัดไปเหนือจุดข้อมูลสูงสุด ซึ่งจะมีลำดับความสำคัญเหนือกว่าค่าสูงสุดในแกน Y ที่กำหนดโดย `scaleType` ซึ่งคล้ายกับ `maxValue` ในแผนภูมิหลัก ประเภท: ตัวเลข ค่าเริ่มต้น: อัตโนมัติ
นาที	ค่าต่ำสุดที่จะแสดงบนแกน Y หากจุดข้อมูลขั้นต่ำน้อยกว่าค่านี้ ระบบจะไม่สนใจการตั้งค่านี้และแผนภูมิจะปรับเปลี่ยนให้แสดงเครื่องหมายถูกหลักถัดไปที่อยู่ใต้จุดข้อมูลต่ำสุด ซึ่งจะมีลำดับความสำคัญเหนือกว่าค่าต่ำสุดของแกน Y ที่กำหนดโดย `scaleType` ซึ่งคล้ายกับ `minValue` ในแผนภูมิหลัก ประเภท: ตัวเลข ค่าเริ่มต้น: อัตโนมัติ
numberFormats	ระบุรูปแบบตัวเลขที่จะใช้ในการจัดรูปแบบค่าที่ด้านบนของกราฟ รูปแบบควรอยู่ในรูปแบบที่ระบุโดยคลาส java DecimalFormat ของ java หากไม่ได้ระบุ ระบบจะใช้รูปแบบรูปแบบเริ่มต้น หากระบุรูปแบบสตริงเดียว ระบบจะใช้รูปแบบดังกล่าวกับค่าทั้งหมด หากระบุแผนที่ คีย์จะเป็นดัชนี (แบบศูนย์) ของชุดข้อมูล และค่าจะเป็นรูปแบบที่จะใช้เพื่อจัดรูปแบบชุดข้อมูลที่ระบุ คุณไม่จำเป็นต้องใส่รูปแบบสำหรับทุกชุดในแผนภูมิ ซีรีส์ที่ไม่ระบุจะใช้รูปแบบเริ่มต้น หากระบุตัวเลือกนี้ ระบบจะไม่สนใจตัวเลือก `displayExactValues` ประเภท: สตริง หรือการแมปจำนวน:คู่สตริง ค่าเริ่มต้น: อัตโนมัติ
scaleColumns	ระบุค่าที่จะแสดงบนเครื่องหมายถูกที่แกน Y ในกราฟ ค่าเริ่มต้นคือมีสเกลเดียวทางด้านขวา ซึ่งจะมีผลกับทั้ง 2 ชุดข้อมูล แต่คุณให้ด้านต่างๆ ของกราฟปรับขนาดให้เป็นค่าชุดที่ต่างกันได้ ตัวเลือกนี้จะใช้อาร์เรย์ตัวเลข 0 ถึง 3 ตัวที่ระบุดัชนี (แบบศูนย์) ของชุดเพื่อใช้เป็นค่ามาตราส่วน ตำแหน่งที่ค่าเหล่านี้จะแสดงขึ้นอยู่กับจำนวนค่าที่คุณรวมไว้ในอาร์เรย์ หากคุณระบุอาร์เรย์ที่ว่างเปล่า แผนภูมิจะไม่แสดงค่า Y ถัดจากเครื่องหมายถูก หากระบุค่าใดค่าหนึ่ง สเกลของชุดที่ระบุจะแสดงที่ด้านขวาของแผนภูมิเท่านั้น หากระบุ 2 ค่า ระบบจะเพิ่มสเกลสำหรับชุดที่ 2 ที่ด้านขวาของแผนภูมิ หากระบุค่า 3 รายการ ระบบจะเพิ่มสเกลสำหรับชุดข้อมูลที่ 3 ไว้ตรงกลางแผนภูมิ ระบบจะไม่สนใจค่าที่อยู่หลังค่าที่ 3 ในอาร์เรย์ เมื่อแสดงมากกว่า 1 สเกล เราขอแนะนำให้ตั้งค่าตัวเลือก `scaleType` เป็น "allfixed" หรือ "allmaximized" อย่างใดอย่างหนึ่ง ประเภท: อาร์เรย์ของตัวเลข ค่าเริ่มต้น: อัตโนมัติ
scaleFormat	รูปแบบตัวเลขที่จะใช้สำหรับป้ายกำกับเครื่องหมายถูกบนแกน ค่าเริ่มต้นของ `'#'` จะแสดงเป็นจำนวนเต็ม ประเภท: สตริง ค่าเริ่มต้น: '#'
scaleType	ตั้งค่าสูงสุดและค่าต่ำสุดที่แสดงบนแกน Y ซึ่งมีตัวเลือกต่อไปนี้ "ขยายใหญ่สุด" - แกน Y จะขยายค่าต่ำสุดไปจนถึงค่าสูงสุดของชุดข้อมูล หากมีมากกว่า 1 ชุด ให้ใช้ allmaximized "คงที่" [ค่าเริ่มต้น] - แกน Y จะแตกต่างกันไปตามค่าข้อมูล ดังนี้ หากค่าทั้งหมดเป็น >=0 แกน Y จะเริ่มจาก 0 ถึงค่าสูงสุด หากค่าทั้งหมดเป็น <=0 แกน Y จะเริ่มจาก 0 ถึงค่าข้อมูลต่ำสุด หากค่าเป็นทั้งค่าบวกและค่าลบ แกน Y จะอยู่ในช่วงตั้งแต่ค่าสูงสุดของชุดข้อมูลไปจนถึงค่าต่ำสุดของชุด หากมีหลายชุด ให้ใช้ "allfixed" "allmaximized" - เหมือนกับ "ขยายใหญ่สุด" แต่ใช้เมื่อแสดงสเกลหลายขนาด แผนภูมิทั้ง 2 แบบจะขยายใหญ่สุดในสเกลเดียวกัน ซึ่งหมายความว่าแผนภูมิหนึ่งๆ จะสื่อให้เข้าใจผิดกับแกน Y แต่เมื่อวางเมาส์เหนือแต่ละชุดจะแสดงค่าที่แท้จริงของแผนภูมินั้น "allfixed" - เหมือนกับ "คงที่" แต่จะใช้เมื่อแสดงสเกลหลายแบบ การตั้งค่านี้จะปรับแต่ละสเกลตามชุดที่เกี่ยวข้อง (ใช้ร่วมกับ `scaleColumns`) หากคุณระบุตัวเลือกต่ำสุดและ/หรือสูงสุด ตัวเลือกเหล่านี้จะมีลำดับความสำคัญเหนือกว่าค่าต่ำสุดและสูงสุดที่กำหนดโดยประเภทสเกล ประเภท: สตริง ค่าเริ่มต้น: "คงที่"
โต๊ะ	มีตัวเลือกที่เกี่ยวข้องกับตารางคำอธิบายประกอบ หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณสามารถใช้รูปแบบสัญกรณ์ของออบเจ็กต์ได้โดยทำดังนี้ var options: { table: { sortAscending: true, sortColumn: 1 } }; ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
table.sortAscending	หากตั้งค่าเป็น `true` จะกลับลำดับของตารางคำอธิบายประกอบและแสดงตามลำดับจากน้อยไปมาก ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
table.sortColumn	ดัชนีคอลัมน์ของตารางคำอธิบายประกอบที่จะจัดเรียงคำอธิบายประกอบ ดัชนีต้องเป็น 0 สำหรับคอลัมน์ป้ายกำกับคำอธิบายประกอบ หรือ 1 สำหรับคอลัมน์ข้อความคำอธิบายประกอบ ประเภท: ตัวเลข ค่าเริ่มต้น: 0
ความหนา	ตัวเลขตั้งแต่ 0-10 (รวม) ที่ระบุความหนาของเส้น โดย 0 คือบางที่สุด ประเภท: ตัวเลข ค่าเริ่มต้น: 0
zoomEndTime	ตั้งค่าวันที่/เวลาสิ้นสุดของช่วงการซูมที่เลือก ประเภท: วันที่ ค่าเริ่มต้น: ไม่มี
zoomStartTime	ตั้งค่าวันที่/เวลาเริ่มต้นของช่วงการซูมที่เลือก ประเภท: วันที่ ค่าเริ่มต้น: ไม่มี

วิธีการ

วิธีการ
`clearChart()`	ล้างแผนภูมิ และปล่อยทรัพยากรที่จัดสรรทั้งหมด ประเภทการคืนสินค้า: ไม่มี
`draw(data, options, state)`	วาดแผนภูมิ ประเภทการคืนสินค้า: ไม่มี
`getContainer()`	ดึงข้อมูลแฮนเดิลไปยังองค์ประกอบคอนเทนเนอร์ที่มีแผนภูมิคำอธิบายประกอบ ประเภทการแสดงผล: แฮนเดิลกับองค์ประกอบ DOM
`getSelection()`	การใช้ `getSelection()` มาตรฐาน องค์ประกอบที่เลือกคือองค์ประกอบของเซลล์ ผู้ใช้เลือกเซลล์ได้เพียงครั้งละ 1 เซลล์ ประเภทผลลัพธ์: อาร์เรย์ขององค์ประกอบการเลือก
`getVisibleChartRange()`	แสดงผลออบเจ็กต์ที่มีพร็อพเพอร์ตี้ `start` และ `end` ซึ่งแต่ละรายการเป็นออบเจ็กต์ `Date` ซึ่งแสดงการเลือกเวลาปัจจุบัน Return Type: ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ `start` และ `end`
`hideDataColumns(columnIndexes)`	ซ่อนชุดข้อมูลที่ระบุจากแผนภูมิ ยอมรับพารามิเตอร์ 1 รายการซึ่งอาจเป็นตัวเลขหรืออาร์เรย์ของจำนวน โดย 0 หมายถึงชุดข้อมูลแรก และอื่นๆ ประเภทการคืนสินค้า: ไม่มี
`setVisibleChartRange(start, end)`	ตั้งค่าช่วงที่มองเห็นได้ (ซูม) เป็นช่วงที่ระบุ ยอมรับพารามิเตอร์ 2 รายการประเภท `Date` ที่แสดงครั้งแรกและครั้งสุดท้ายของช่วงที่มองเห็นได้ที่ต้องการที่เลือก ตั้งค่า start เป็น null เพื่อรวมทุกอย่างตั้งแต่วันแรกสุดไปจนถึงสิ้นสุด ตั้งค่า end เป็น null เพื่อรวมทุกอย่างตั้งแต่ start ไปจนถึงวันที่สุดท้าย ประเภทการคืนสินค้า: ไม่มี
`showDataColumns(columnIndexes)`	แสดงชุดข้อมูลที่ระบุจากแผนภูมิ หลังจากซ่อนโดยใช้เมธอด `hideDataColumns` ยอมรับพารามิเตอร์ 1 รายการซึ่งอาจเป็นตัวเลขหรืออาร์เรย์ของตัวเลข โดย 0 หมายถึงชุดข้อมูลแรก และอื่นๆ ประเภทการคืนสินค้า: ไม่มี

กิจกรรม

ชื่อ

ชื่อ
`rangechange`	เริ่มทำงานเมื่อผู้ใช้เปลี่ยนแถบเลื่อนช่วง ปลายทางของช่วงใหม่จะพร้อมใช้งานเป็น `event['start']` และ `event['end']` google.visualization.events.addListener(chart, 'rangechange', rangechange_handler); function rangechange_handler(e) { console.log('You changed the range to ', e['start'], ' and ', e['end']); } พร็อพเพอร์ตี้: เริ่มต้น สิ้นสุด
`ready`	แผนภูมิพร้อมสำหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด `draw` และเรียกใช้หลังจากที่เหตุการณ์เริ่มทำงานแล้วเท่านั้น พร็อพเพอร์ตี้: ไม่มี
`select`	เริ่มทำงานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูสิ่งที่เลือก โปรดโทรหา `getSelection()` พร็อพเพอร์ตี้: ไม่มี

rangechange

เริ่มทำงานเมื่อผู้ใช้เปลี่ยนแถบเลื่อนช่วง ปลายทางของช่วงใหม่จะพร้อมใช้งานเป็น event['start'] และ event['end']

google.visualization.events.addListener(chart, 'rangechange', rangechange_handler);

function rangechange_handler(e) {
  console.log('You changed the range to ', e['start'], ' and ', e['end']);
}

พร็อพเพอร์ตี้: เริ่มต้น สิ้นสุด

ready

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

พร็อพเพอร์ตี้: ไม่มี

select

เริ่มทำงานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูสิ่งที่เลือก โปรดโทรหา getSelection()

พร็อพเพอร์ตี้: ไม่มี

นโยบายข้อมูล

โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ โดยจะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ