การแสดงภาพ: แผนภูมิพื้นที่

ภาพรวม

แผนภูมิพื้นที่ที่แสดงผลภายในเบราว์เซอร์โดยใช้ SVG หรือ VML แสดงเคล็ดลับเมื่อวางเมาส์เหนือจุด

ตัวอย่างง่ายๆ

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

พื้นที่กองซ้อน

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

ทางด้านซ้ายจะตั้งค่า isStacked เป็น "เท็จ" (ค่าเริ่มต้น) และทางด้านขวาจะเป็น "จริง":

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

แผนภูมิพื้นที่แบบซ้อนยังรองรับการซ้อนกัน 100% ซึ่งกลุ่มองค์ประกอบที่ค่าโดเมนแต่ละค่าจะมีการปรับขนาดให้รวมกันได้ 100% ตัวเลือกในกรณีนี้คือ isStacked: 'percent' ซึ่งจัดรูปแบบแต่ละค่าเป็นเปอร์เซ็นต์ของ 100% และ isStacked: 'relative' ซึ่งจัดรูปแบบแต่ละค่าเป็นเศษส่วนของ 1 นอกจากนี้ยังมีตัวเลือก isStacked: 'absolute' ด้วย ซึ่งมีฟังก์ชันการทำงานเทียบเท่ากับ isStacked: true

โปรดทราบว่าในแผนภูมิแบบซ้อน 100% ทางด้านขวา ค่าเครื่องหมายถูกจะอิงตามสเกล 0-1 สัมพัทธ์ในรูปแบบเศษส่วนของ 1

แบบเรียงซ้อน
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
ซ้อนกัน 100%
        var options_fullStacked = {
          isStacked: 'relative',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

สมมติว่าชุดหนึ่งไม่มีข้อมูลของค่า x บางส่วน ตัวอย่างเช่น ในแผนภูมิด้านบน สมมติว่าโดรนไม่พร้อมให้บริการจนถึงปี 2015 และ Segways ไม่พร้อมให้บริการในปี 2014 โปรดทราบว่าเราใช้ค่า Null เมื่อไม่มีข้อมูล แผนภูมิจึงจะมีลักษณะดังนี้

หากความไม่ต่อเนื่องเหล่านั้นไม่น่าสนใจ คุณสามารถใช้เลขศูนย์แทนค่า Null และ/หรือตั้งค่าตัวเลือก InterpolateNulls เป็น "จริง" ดังนี้

กำลังโหลด

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

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

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

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

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

แถว: แต่ละแถวในตารางแสดงชุดจุดข้อมูลที่มีตำแหน่งแกน x เดียวกัน

คอลัมน์:

  คอลัมน์ 0 คอลัมน์ที่ 1 ... คอลัมน์ N
จุดประสงค์ในการใช้: ค่าบรรทัดที่ 1 ... ค่าบรรทัด N
ประเภทข้อมูล: ตัวเลข ... ตัวเลข
บทบาท: โดเมน ข้อมูล ... ข้อมูล
บทบาทของคอลัมน์ที่ไม่บังคับมีดังนี้ ...

 

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

ชื่อ
aggregationTarget
วิธีรวมข้อมูลหลายรายการไว้ในเคล็ดลับเครื่องมือ
  • 'category': จัดกลุ่มข้อมูลที่เลือกตามค่า x
  • 'series': จัดกลุ่มข้อมูลที่เลือกตามชุด
  • 'auto': จัดกลุ่มข้อมูลที่เลือกตามค่า x-ค่า หากการเลือกทั้งหมดมีค่า x เหมือนกัน และตามชุดข้อมูล
  • 'none': แสดงเคล็ดลับเครื่องมือเพียง 1 รายการต่อการเลือก
aggregationTarget มักใช้ควบคู่กับ selectionMode และ tooltip.trigger เช่น 
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
ประเภท: สตริง
ค่าเริ่มต้น: "auto"
animation.duration

ระยะเวลาของภาพเคลื่อนไหวเป็นมิลลิวินาที โปรดดูรายละเอียดในเอกสารประกอบเกี่ยวกับภาพเคลื่อนไหว

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
animation.easing

ฟังก์ชันการค่อยๆ เปลี่ยนที่ใช้กับภาพเคลื่อนไหว โดยมีตัวเลือกดังต่อไปนี้

  • "เชิงเส้น" - ความเร็วคงที่
  • "เข้า" - ค่อยๆ เริ่ม - เริ่มต้นช้าๆ แล้วเร่งความเร็ว
  • "out" - ค่อยๆ ออก - เริ่มต้นอย่างรวดเร็วและช้าลง
  • 'inAndOut' - ค่อยๆ เข้าและออก - เริ่มช้าๆ เร่งความเร็ว แล้วลดความเร็ว
ประเภท: สตริง
ค่าเริ่มต้น: "เชิงเส้น"
animation.startup

กำหนดว่าแผนภูมิจะเคลื่อนไหวเมื่อวาดครั้งแรกหรือไม่ หากเป็น true แผนภูมิจะเริ่มต้นที่เกณฑ์พื้นฐานและเคลื่อนไหวเป็นสถานะสุดท้าย

ประเภท: บูลีน
ค่าเริ่มต้น false
annotations.boxStyle

สำหรับแผนภูมิที่รองรับคำอธิบายประกอบ ออบเจ็กต์ annotations.boxStyle จะควบคุมลักษณะที่ปรากฏของช่องที่อยู่รอบคำอธิบายประกอบ ดังนี้ 

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

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

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
annotations.datum
สำหรับแผนภูมิที่รองรับคำอธิบายประกอบ ออบเจ็กต์ annotations.datum จะช่วยให้คุณลบล้างตัวเลือกของ Google แผนภูมิสำหรับคำอธิบายประกอบที่มีให้สำหรับองค์ประกอบข้อมูลแต่ละรายการได้ (เช่น ค่าที่แสดงพร้อมกับแต่ละแท่งในแผนภูมิแท่ง) คุณควบคุมสีได้ด้วย annotations.datum.stem.color, ความยาวของก้านด้วย annotations.datum.stem.length และสไตล์ด้วย annotations.datum.style
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: สีคือ "ดำ" ความยาวคือ 12 รูปแบบคือ "จุด"
annotations.domain
สำหรับแผนภูมิที่รองรับคำอธิบายประกอบ ออบเจ็กต์ annotations.domain จะช่วยให้คุณลบล้างตัวเลือกของ Google แผนภูมิสำหรับคำอธิบายประกอบที่มีให้สำหรับโดเมน (แกนหลักของแผนภูมิ เช่น แกน X ในแผนภูมิเส้นทั่วไป) คุณควบคุมสีได้ด้วย annotations.domain.stem.color, ความยาวของก้านด้วย annotations.domain.stem.length และสไตล์ด้วย annotations.domain.style
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: สีคือ "ดำ" ความยาวคือ 5 รูปแบบคือ "จุด"
annotations.highContrast
สำหรับแผนภูมิที่รองรับคำอธิบายประกอบ บูลีน annotations.highContrast จะให้คุณลบล้างตัวเลือกสีคำอธิบายประกอบของ Google แผนภูมิได้ โดยค่าเริ่มต้น annotations.highContrast จะเป็น "จริง" ซึ่งทำให้แผนภูมิเลือกสีของคำอธิบายประกอบที่มีคอนทราสต์ดี นั่นคือสีอ่อนบนพื้นหลังสีเข้มและสีเข้มเมื่อสีอ่อน หากตั้งค่า annotations.highContrast เป็น "เท็จ" และไม่ได้ระบุสีคำอธิบายประกอบของคุณเอง Google แผนภูมิจะใช้สีเริ่มต้นของชุดคำอธิบายประกอบสำหรับคำอธิบายประกอบ
ประเภท: บูลีน
ค่าเริ่มต้น: true
annotations.stem
สำหรับแผนภูมิที่รองรับคำอธิบายประกอบ ออบเจ็กต์ annotations.stem จะช่วยให้คุณลบล้างตัวเลือกของ Google แผนภูมิสำหรับรูปแบบแท่งได้ คุณควบคุมสีได้ด้วย annotations.stem.color และความยาวของก้านด้วย annotations.stem.length โปรดทราบว่าตัวเลือกความยาวความยาวเองไม่มีผลต่อคำอธิบายประกอบที่มีรูปแบบ 'line' สำหรับคำอธิบายประกอบข้อมูล 'line' ความยาวรากไม้จะเหมือนกับข้อความเสมอ และสำหรับคำอธิบายประกอบโดเมน 'line' ระยะเวลาจะขยายทั่วทั้งแผนภูมิ
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: สีคือ "สีดำ" ความยาวคือ 5 สำหรับคำอธิบายประกอบโดเมนและ 12 สำหรับคำอธิบายประกอบข้อมูลมูลฐาน
annotations.style
สำหรับแผนภูมิที่รองรับคำอธิบายประกอบ ตัวเลือก annotations.style จะช่วยให้คุณลบล้างตัวเลือกประเภทคำอธิบายประกอบของ Google แผนภูมิได้ ซึ่งจะเป็น 'line' หรือ 'point' ก็ได้
ประเภท: สตริง
ค่าเริ่มต้น: "point"
annotations.textStyle
สำหรับแผนภูมิที่รองรับคำอธิบายประกอบ ออบเจ็กต์ annotations.textStyle จะควบคุมลักษณะที่ปรากฏของข้อความคำอธิบายประกอบ ดังนี้ 
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

ปัจจุบันตัวเลือกนี้รองรับแผนภูมิพื้นที่ แผนภูมิแท่ง แผนภูมิคอลัมน์ แผนภูมิผสม แผนภูมิเส้น และแผนภูมิกระจาย ซึ่ง แผนภูมิคำอธิบายประกอบ ไม่รองรับ

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
areaOpacity

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

ประเภท: ตัวเลข 0.0-1.0
ค่าเริ่มต้น: 0.3
axisTitlesPosition

ตำแหน่งที่จะวางชื่อแกนเมื่อเทียบกับพื้นที่แผนภูมิ ค่าที่รองรับ

  • in - วาดชื่อแกนภายในพื้นที่แผนภูมิ
  • out - วาดชื่อแกนนอกพื้นที่แผนภูมิ
  • ไม่มี - ไม่ใส่ชื่อแกน
ประเภท: สตริง
ค่าเริ่มต้น: "out"
backgroundColor

สีพื้นหลังสำหรับพื้นที่หลักของแผนภูมิ อาจเป็นสตริงสี HTML แบบง่าย เช่น 'red' หรือ '#00cc00' หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้

ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: "white"
backgroundColor.stroke

สีเส้นขอบของแผนภูมิ เป็นสตริงสี HTML

ประเภท: สตริง
ค่าเริ่มต้น: "#666"
backgroundColor.strokeWidth

ความกว้างของขอบเป็นพิกเซล

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
backgroundColor.fill

สีเติมแผนภูมิ เป็นสตริงสี HTML

ประเภท: สตริง
ค่าเริ่มต้น: "white"
chartArea

ออบเจ็กต์ที่มีสมาชิกเพื่อกำหนดค่าตำแหน่งและขนาดของพื้นที่แผนภูมิ (บริเวณที่มีการวาดแผนภูมิ ยกเว้นแกนและคำอธิบาย) ระบบรองรับ 2 รูปแบบคือ ตัวเลขหรือตัวเลขตามด้วย % ตัวเลขง่ายๆ คือค่าที่มีหน่วยเป็นพิกเซล ตัวเลขตามด้วย % คือเปอร์เซ็นต์ เช่น chartArea:{left:20,top:0,width:'50%',height:'75%'}

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
chartArea.backgroundColor
สีพื้นหลังของพื้นที่แผนภูมิ เมื่อใช้สตริง อาจเป็นสตริงเลขฐาน 16 (เช่น "#fdc') หรือชื่อสีภาษาอังกฤษ เมื่อมีการใช้ออบเจ็กต์ จะมีพร็อพเพอร์ตี้ต่อไปนี้ให้ใช้งาน
  • stroke: สีที่ระบุเป็นสตริงเลขฐานสิบหกหรือชื่อสีภาษาอังกฤษ
  • strokeWidth: หากระบุ จะวาดเส้นขอบรอบพื้นที่แผนภูมิตามความกว้างที่ระบุ (และมีสีของ stroke)
ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: "white"
chartArea.left

ระยะห่างในการวาดแผนภูมิจากเส้นขอบด้านซ้าย

ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
chartArea.top

ระยะห่างในการวาดแผนภูมิจากเส้นขอบด้านบน

ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
chartArea.width

ความกว้างพื้นที่แผนภูมิ

ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
chartArea.height

ความสูงพื้นที่แผนภูมิ

ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
สี

สีที่ใช้สำหรับองค์ประกอบของแผนภูมิ อาร์เรย์ของสตริง โดยที่องค์ประกอบแต่ละรายการเป็นสตริงสี HTML เช่น colors:['red','#004411']

ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: สีเริ่มต้น
ไม้กางเขน

ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ไม้กางเขนสำหรับแผนภูมิ

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
crosshair.color

สีกากบาทที่แสดงเป็นชื่อสี (เช่น "น้ำเงิน") หรือค่า RGB (เช่น "#adf")

ประเภท: สตริง
ประเภท: ค่าเริ่มต้น
crosshair.focused

ออบเจ็กต์ที่มีพร็อพเพอร์ตี้เส้นไขว้เมื่อโฟกัส
ตัวอย่างเช่น crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: ค่าเริ่มต้น
crosshair.opacity

ความทึบแสงของเส้นด้ายที่ 0.0 แสดงความโปร่งใสเต็มที่และ 1.0 ทึบแสงเต็มที่

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1.0
crosshair.orientation

การวางแนวของกากบาท ซึ่งอาจเป็น "แนวตั้ง" สำหรับผมในแนวตั้งเท่านั้น, "แนวนอน" สำหรับผมในแนวนอนเท่านั้น หรือ "ทั้ง 2 แบบ" สำหรับเส้นกากบาทแบบดั้งเดิม

ประเภท: สตริง
ค่าเริ่มต้น: "ทั้งสองแบบ"
crosshair.selected

ออบเจ็กต์ที่มีพร็อพเพอร์ตี้เครื่องหมายกากบาทเมื่อเลือก
ตัวอย่าง: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: ค่าเริ่มต้น
crosshair.trigger

กรณีที่ควรแสดงกากบาท: ใน 'focus', 'selection' หรือ 'both'

ประเภท: สตริง
ค่าเริ่มต้น: "ทั้งสองแบบ"
dataOpacity

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1.0
enableInteractivity

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

ประเภท: บูลีน
ค่าเริ่มต้น: true
explorer

ตัวเลือก explorer ช่วยให้ผู้ใช้เลื่อนและซูมแผนภูมิของ Google ได้ explorer: {} มีลักษณะการทำงานเริ่มต้นของนักสำรวจ ซึ่งทำให้ผู้ใช้สามารถเลื่อนในแนวนอนและแนวตั้งได้ด้วยการลาก และซูมเข้าและออกด้วยการเลื่อน

ฟีเจอร์นี้ยังอยู่ในช่วงทดลอง และอาจมีการเปลี่ยนแปลงในเวอร์ชันต่อๆ ไป

หมายเหตุ: นักสำรวจจะทำงานกับแกนที่มีต่อเนื่อง (เช่น ตัวเลขหรือวันที่) เท่านั้น

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
explorer.actions

โปรแกรมสำรวจ Google แผนภูมิรองรับการทำงาน 3 อย่างดังนี้

  • dragToPan: ลากเพื่อเลื่อนไปรอบๆ แผนภูมิในแนวนอนและแนวตั้ง หากต้องการแพนตามแกนแนวนอนเท่านั้น ให้ใช้ explorer: { axis: 'horizontal' } เช่นเดียวกันสำหรับแกนแนวตั้ง
  • dragToZoom: ลักษณะการทำงานเริ่มต้นของนักสำรวจคือการซูมเข้าและออกเมื่อผู้ใช้เลื่อนหน้าจอ หากใช้ explorer: { actions: ['dragToZoom', 'rightClickToReset'] } การลากผ่านพื้นที่สี่เหลี่ยมผืนผ้าจะซูมเข้าไปยังพื้นที่นั้น เราขอแนะนำให้ใช้ rightClickToReset เมื่อใดก็ตามที่ใช้ dragToZoom ดูการปรับแต่งการซูมใน explorer.maxZoomIn, explorer.maxZoomOut และ explorer.zoomDelta
  • rightClickToReset: การคลิกขวาที่แผนภูมิจะทำให้แผนภูมิกลับสู่ระดับการเลื่อนและซูมเดิม
ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: ['dragToPan', 'rightClickToReset']
explorer.axis

โดยค่าเริ่มต้น ผู้ใช้จะเลื่อนได้ทั้งแนวนอนและแนวตั้งเมื่อใช้ตัวเลือก explorer หากต้องการให้ผู้ใช้เลื่อนในแนวนอนเท่านั้น ให้ใช้ explorer: { axis: 'horizontal' } ในทำนองเดียวกัน explorer: { axis: 'vertical' } จะเปิดใช้การแพนกล้องในแนวตั้งเท่านั้น

ประเภท: สตริง
ค่าเริ่มต้น: การแพนกล้องทั้งในแนวนอนและแนวตั้ง
explorer.keepInBounds

โดยค่าเริ่มต้น ผู้ใช้จะเลื่อนไปรอบๆ ได้ไม่ว่าข้อมูลจะอยู่ที่ใด ให้ใช้ explorer: { keepInBounds: true } เพื่อให้แน่ใจว่าผู้ใช้จะไม่เลื่อนผ่านแผนภูมิต้นฉบับ

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
explorer.maxZoomIn

จำนวนสูงสุดที่นักสำรวจสามารถซูมเข้าได้ โดยค่าเริ่มต้น ผู้ใช้จะซูมเข้าได้เพียงพอที่จะเห็นเพียง 25% ของมุมมองเดิม การตั้งค่า explorer: { maxZoomIn: .5 } จะทำให้ผู้ใช้ซูมเข้าได้ไกลพอที่จะเห็นมุมมองต้นฉบับเพียงครึ่งเดียว

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0.25
explorer.maxZoomOut

จำนวนสูงสุดที่นักสำรวจจะซูมออกได้ โดยค่าเริ่มต้น ผู้ใช้จะซูมออกได้ไกลพอที่แผนภูมิจะใช้พื้นที่เพียง 1/4 ของพื้นที่ว่าง การตั้งค่า explorer: { maxZoomOut: 8 } จะทำให้ผู้ใช้ซูมออกได้ไกลพอที่แผนภูมิจะใช้พื้นที่เพียง 1/8 ของพื้นที่ว่าง

ประเภท: ตัวเลข
ค่าเริ่มต้น: 4
explorer.zoomDelta

เมื่อผู้ใช้ซูมเข้าหรือออก explorer.zoomDelta จะกำหนดระดับการซูม ตัวเลขยิ่งน้อย การซูมทำได้ราบรื่นและช้าลง

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1.5
focusTarget

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

  • "มูลฐาน" - โฟกัสที่จุดข้อมูลจุดเดียว เกี่ยวข้องกับเซลล์ในตารางข้อมูล
  • 'category' - เน้นการจัดกลุ่มจุดข้อมูลทั้งหมดตามแกนหลัก สัมพันธ์กับแถวในตารางข้อมูล

ในโฟกัสTarget "หมวดหมู่" เคล็ดลับเครื่องมือจะแสดงค่าหมวดหมู่ทั้งหมด วิธีนี้อาจเป็นประโยชน์ในการเปรียบเทียบค่าของชุดข้อมูลต่างๆ

ประเภท: สตริง
ค่าเริ่มต้น: "มูลฐาน"
fontSize

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
fontName

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

ประเภท: สตริง
ค่าเริ่มต้น: 'สวัสดิการ'
forceIFrame

วาดแผนภูมิภายในเฟรมแบบอินไลน์ (โปรดทราบว่าใน IE8 ตัวเลือกนี้จะถูกละเว้น และแผนภูมิ IE8 ทั้งหมดวาดใน i-frame)

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
hAxis

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
hAxis.baseline

เกณฑ์พื้นฐานสำหรับแกนแนวนอน

ตัวเลือกนี้รองรับเฉพาะแกน continuous

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
hAxis.baselineColor

สีของเกณฑ์พื้นฐานสำหรับแกนแนวนอน เป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00'

ตัวเลือกนี้รองรับเฉพาะแกน continuous

ประเภท: ตัวเลข
ค่าเริ่มต้น: "black"
hAxis.direction

ทิศทางที่ค่าตามแกนแนวนอนขยายตัว ระบุ -1 เพื่อกลับลำดับของค่า

ประเภท: 1 หรือ -1
ค่าเริ่มต้น: 1
hAxis.format

สตริงรูปแบบสำหรับป้ายกำกับตัวเลขหรือแกนวันที่

สำหรับป้ายกำกับแกนตัวเลข นี่คือส่วนย่อยของการจัดรูปแบบทศนิยม ชุดรูปแบบ ICU เช่น {format:'#,###%'} จะแสดงค่า "1,000%", "750%" และ "50%" สำหรับค่า 10, 7.5 และ 0.5 นอกจากนี้ คุณยังระบุข้อมูลดังต่อไปนี้ได้ด้วย

  • {format: 'none'}: แสดงตัวเลขที่ไม่มีการจัดรูปแบบ (เช่น 8000000)
  • {format: 'decimal'}: แสดงตัวเลขที่มีตัวคั่นหลักพัน (เช่น 8,000,000)
  • {format: 'scientific'}: แสดงตัวเลขในรูปแบบสัญกรณ์วิทยาศาสตร์ (เช่น 8E6)
  • {format: 'currency'}: แสดงหมายเลขในสกุลเงินท้องถิ่น (เช่น 240,000,000.00 บาท)
  • {format: 'percent'}: แสดงตัวเลขเป็นเปอร์เซ็นต์ (เช่น 800,000,000%)
  • {format: 'short'}: แสดงตัวเลขแบบย่อ (เช่น 8 ล้าน)
  • {format: 'long'}: แสดงตัวเลขเป็นคำที่สมบูรณ์ (เช่น 8 ล้าน)

สำหรับป้ายกำกับแกนวันที่ นี่คือส่วนย่อยของการจัดรูปแบบวันที่ ชุดรูปแบบ ICU เช่น {format:'MMM d, y'} จะแสดงค่า "1 กรกฎาคม 2011" สําหรับวันที่แรกของเดือนกรกฎาคมในปี 2011

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

ในการคำนวณค่าเครื่องหมายถูกและเส้นตาราง เราจะพิจารณาชุดค่าผสมทางเลือกต่างๆ ของตัวเลือกเส้นตารางที่เกี่ยวข้องทั้งหมด และจะปฏิเสธทางเลือกอื่นหากป้ายกำกับเครื่องหมายถูกที่จัดรูปแบบซ้ำหรือทับซ้อนกัน คุณจึงระบุ format:"#" ได้หากต้องการแสดงเฉพาะค่าขีดจำนวนเต็ม แต่โปรดทราบว่าหากไม่มีตัวเลือกอื่นที่ตรงกับเกณฑ์นี้ ระบบจะไม่แสดงเส้นตารางหรือเครื่องหมายถูก

ตัวเลือกนี้รองรับเฉพาะแกน continuous เท่านั้น

ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
hAxis.gridlines

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

{color: '#333', minSpacing: 20}

ตัวเลือกนี้รองรับเฉพาะแกน continuous เท่านั้น

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
hAxis.gridlines.color

สีของเส้นตารางแนวนอนภายในพื้นที่แผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง

ประเภท: สตริง
ค่าเริ่มต้น: "#CCC"
hAxis.gridlines.count

จำนวนเส้นตารางแนวนอนโดยประมาณภายในพื้นที่แผนภูมิ หากคุณระบุจำนวนบวกสำหรับ gridlines.count ระบบจะใช้จำนวนดังกล่าวเพื่อคำนวณ minSpacing ระหว่างเส้นตาราง คุณระบุค่า 1 เพื่อวาดเส้นตารางเพียง 1 เส้น หรือ 0 เพื่อวาดเส้นตารางก็ได้ ป้อน -1 ซึ่งเป็นค่าเริ่มต้นเพื่อคำนวณจำนวนเส้นตารางโดยอัตโนมัติตามตัวเลือกอื่นๆ

ประเภท: ตัวเลข
ค่าเริ่มต้น: -1
hAxis.gridlines.interval

อาร์เรย์ของขนาด (เป็นค่าข้อมูล ไม่ใช่พิกเซล) ระหว่างเส้นตารางที่อยู่ติดกัน ขณะนี้ตัวเลือกนี้ใช้ได้กับแกนตัวเลขเท่านั้น แต่คล้ายกับตัวเลือก gridlines.units.<unit>.interval ที่ใช้สำหรับวันที่และเวลาเท่านั้น สำหรับสเกลเชิงเส้น ค่าเริ่มต้นคือ [1, 2, 2.5, 5] ซึ่งหมายความว่าค่าของเส้นตารางอาจอยู่ในทุกหน่วย (1) หน่วยคู่ (2) หรือพหุคูณของ 2.5 หรือ 5 กําลังพิจารณาเลขใดก็ตามที่มี 10 เท่าของค่าเหล่านี้ด้วย (เช่น [10, 20, 25, 50] และ [.1, .2, .25, .5]) สำหรับสเกลบันทึก ค่าเริ่มต้นคือ [1, 2, 5]

ประเภท: ตัวเลขตั้งแต่ 1 ถึง 10 โดยไม่รวม 10
ค่าเริ่มต้น: คำนวณ
hAxis.gridlines.minSpacing

พื้นที่หน้าจอต่ำสุด (หน่วยเป็นพิกเซล) ระหว่างเส้นตารางหลัก hAxis ค่าเริ่มต้นสำหรับเส้นตารางหลักคือ 40 สำหรับสเกลเชิงเส้น และ 20 สำหรับสเกลบันทึก หากคุณระบุ count ไม่ใช่ minSpacing ระบบจะคำนวณ minSpacing จากจำนวนดังกล่าว และในทางกลับกัน หากคุณระบุ minSpacing ไม่ใช่ count ระบบจะคํานวณจํานวนจาก minSpacing หากคุณระบุทั้ง 2 อย่าง ระบบจะลบล้าง minSpacing

ประเภท: ตัวเลข
ค่าเริ่มต้น: คำนวณ
hAxis.gridlines.multiple

ค่าเส้นตารางและเครื่องหมายถูกทั้งหมดต้องเป็นพหุคูณของค่าของตัวเลือกนี้ โปรดทราบว่าไม่คํานึงถึงกำลังเป็นจำนวน 10 เท่าของจำนวนคูณ ซึ่งต่างจากช่วงเวลา คุณบังคับให้ทิกเป็นจำนวนเต็มได้โดยการระบุ gridlines.multiple = 1 หรือบังคับให้จุดเริ่มเป็นพหุคูณของ 1, 000 ด้วยการระบุ gridlines.multiple = 1000

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
hAxis.gridlines.units

ลบล้างรูปแบบเริ่มต้นสำหรับข้อมูลประเภทวันที่/วันที่และเวลา/เวลาของวันในลักษณะต่างๆ เมื่อใช้กับเส้นตารางที่คำนวณในแผนภูมิ อนุญาตการจัดรูปแบบสำหรับปี เดือน วัน ชั่วโมง นาที วินาที และมิลลิวินาที

รูปแบบทั่วไปคือ

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
hAxis.minorGridlines

ออบเจ็กต์ที่มีสมาชิกสำหรับกำหนดค่าเส้นตารางย่อยบนแกนแนวนอน ซึ่งคล้ายกับตัวเลือก hAxis.gridlines

ตัวเลือกนี้รองรับเฉพาะแกน continuous เท่านั้น

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
hAxis.minorGridlines.color

สีของเส้นตารางย่อยแนวนอนภายในพื้นที่แผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง

ประเภท: สตริง
ค่าเริ่มต้น: การผสมผสานของสีของเส้นตารางและสีพื้นหลัง
hAxis.minorGridlines.count

ระบบเลิกใช้งานตัวเลือก minorGridlines.count เป็นส่วนใหญ่แล้ว ยกเว้นการปิดใช้เส้นตารางย่อยโดยการตั้งค่าจำนวนเป็น 0 ตอนนี้จำนวนเส้นตารางย่อยจะขึ้นอยู่กับช่วงเวลาระหว่างเส้นตารางหลัก (ดู hAxis.gridlines.interval) และพื้นที่ขั้นต่ำที่จำเป็น (ดู hAxis.minorGridlines.minSpacing)

ประเภท: ตัวเลข
ค่าเริ่มต้น:1
hAxis.minorGridlines.interval

ตัวเลือก minGridlines.interval เป็นเหมือนตัวเลือกช่วงเส้นตารางหลัก แต่ช่วงเวลาที่เลือกจะเป็นตัวหารคู่ของช่วงเส้นตารางหลักเสมอ ช่วงเวลาเริ่มต้นสำหรับสเกลเชิงเส้นคือ [1, 1.5, 2, 2.5, 5] และสำหรับสเกลบันทึกคือ [1, 2, 5]

ประเภท: ตัวเลข
ค่าเริ่มต้น:1
hAxis.minorGridlines.minSpacing

พื้นที่ขั้นต่ำที่จำเป็น (หน่วยเป็นพิกเซล) ระหว่างเส้นตารางย่อยที่อยู่ติดกัน และระหว่างเส้นตารางย่อยกับเส้นตารางหลัก ค่าเริ่มต้นคือ 1/2 ขั้นต่ำของเส้นตารางหลักสำหรับสเกลเชิงเส้น และ 1/5 minSpacing สำหรับสเกลบันทึก

ประเภท: ตัวเลข
ค่าเริ่มต้น: คำนวณ
hAxis.minorGridlines.multiple

เหมือนกับอีเมลหลัก gridlines.multiple

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
hAxis.minorGridlines.units

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

รูปแบบทั่วไปคือ

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
hAxis.logScale

พร็อพเพอร์ตี้ hAxis ที่ทำให้แกนแนวนอนเป็นสเกลลอการิทึม (ค่าทั้งหมดต้องเป็นบวก) ตั้งค่าเป็น "จริง" สำหรับ "ใช่"

ตัวเลือกนี้รองรับเฉพาะแกน continuous

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
hAxis.scaleType

พร็อพเพอร์ตี้ hAxis ที่ทำให้แกนแนวนอนเป็นสเกลลอการิทึม อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้

  • null - ไม่มีการปรับขนาดลอการิทึม
  • 'log' - การปรับขนาดลอการิทึม ระบบจะไม่พล็อตค่าลบและค่าศูนย์ ตัวเลือกนี้เหมือนกับการตั้งค่า hAxis: { logscale: true }
  • "mirrorLog" - การปรับขนาดลอการิทึมที่มีการพล็อตค่าลบและค่าศูนย์ ค่าที่พล็อตของจำนวนลบเป็นค่าลบของบันทึกข้อมูลของค่าสัมบูรณ์ ระบบจะพล็อตค่าที่ใกล้เคียงกับ 0 ในสเกลเชิงเส้น

ตัวเลือกนี้รองรับเฉพาะแกน continuous

ประเภท: สตริง
ค่าเริ่มต้น: null
hAxis.textPosition

ตำแหน่งของข้อความแกนแนวนอนที่สัมพันธ์กับพื้นที่แผนภูมิ ค่าที่รองรับ: "out", "in", "none"

ประเภท: สตริง
ค่าเริ่มต้น: "out"
hAxis.textStyle

วัตถุที่ระบุรูปแบบข้อความของแกนแนวนอน ออบเจ็กต์มีรูปแบบดังนี้

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' ดู fontName และ fontSize ด้วย

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

แทนที่เครื่องหมายแสดงตำแหน่งบนแกน X ที่สร้างขึ้นโดยอัตโนมัติด้วยอาร์เรย์ที่ระบุ องค์ประกอบแต่ละรายการของอาร์เรย์ควรเป็นค่าเครื่องหมายถูกที่ถูกต้อง (เช่น ตัวเลข วันที่ วันที่และเวลา หรือเวลาของวัน) หรือออบเจ็กต์ หากเป็นออบเจ็กต์ ควรมีพร็อพเพอร์ตี้ v สำหรับค่า Tick และมีพร็อพเพอร์ตี้ f ที่ไม่บังคับซึ่งมีสตริงตามตัวอักษรที่จะแสดงเป็นป้ายกำกับ

ViewWindow จะขยายโดยอัตโนมัติเพื่อรวมจุดต่ำสุดและสูงสุด เว้นแต่คุณจะระบุ viewWindow.min หรือ viewWindow.max เพื่อลบล้าง

ตัวอย่าง

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

ตัวเลือกนี้รองรับเฉพาะแกน continuous เท่านั้น

ประเภท: อาร์เรย์ขององค์ประกอบ
ค่าเริ่มต้น: อัตโนมัติ
hAxis.title

พร็อพเพอร์ตี้ hAxis ที่ระบุชื่อของแกนแนวนอน

ประเภท: สตริง
ค่าเริ่มต้น: null
hAxis.titleTextStyle

วัตถุที่ระบุรูปแบบข้อความชื่อแกนแนวนอน ออบเจ็กต์มีรูปแบบดังนี้ 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' ดู fontName และ fontSize ด้วย

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

หากเป็น "เท็จ" จะซ่อนป้ายกำกับด้านนอกสุดแทนที่จะครอบตัดตามคอนเทนเนอร์ของแผนภูมิ หากเป็น "จริง" จะอนุญาตให้มีการครอบตัดป้ายกำกับ

ตัวเลือกนี้รองรับเฉพาะแกน discrete

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
hAxis.slantedText

หากเป็น "จริง" ให้วาดข้อความของแกนแนวนอนในมุมหนึ่งเพื่อช่วยให้ข้อความพอดีกับแกนมากขึ้น หากเป็น "เท็จ" ให้วาดข้อความของแกนแนวนอนให้ตั้งตรง ลักษณะการทำงานเริ่มต้นคือการปรับข้อความเอียงหากไม่สามารถจัดวางได้พอดีเมื่อวาดตั้งตรง โปรดทราบว่าตัวเลือกนี้จะพร้อมใช้งานเมื่อตั้งค่า hAxis.textPosition เป็น "out" (ซึ่งเป็นค่าเริ่มต้น) เท่านั้น ค่าเริ่มต้นของวันที่และเวลาคือ false

ประเภท: บูลีน
ค่าเริ่มต้น: อัตโนมัติ
hAxis.slantedTextAngle

มุมของข้อความแกนแนวนอน หากวาดเอียง ไม่สนใจหาก hAxis.slantedText คือ false หรืออยู่ในโหมดอัตโนมัติ และแผนภูมิเลือกที่จะวาดข้อความในแนวนอน หากมุมเป็นค่าบวก การหมุนจะทวนเข็มนาฬิกา แต่หากเป็นค่าลบ การหมุนจะเป็นตามเข็มนาฬิกา

ประเภท: ตัวเลข -90—90
ค่าเริ่มต้น: 30
hAxis.maxAlternation

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 2
hAxis.maxTextLines

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
hAxis.minTextSpacing

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: ค่าของ hAxis.textStyle.fontSize
hAxis.showTextEvery

จำนวนป้ายกำกับในแกนแนวนอนที่จะแสดง โดย 1 หมายถึงแสดงป้ายกำกับทุกป้าย และ 2 หมายถึงแสดงป้ายกำกับอื่นๆ ทั้งหมด และอื่นๆ ค่าเริ่มต้นคือพยายามแสดงป้ายกำกับให้ได้มากที่สุดโดยไม่ทับซ้อนกัน

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
hAxis.maxValue

ย้ายค่าสูงสุดของแกนแนวนอนเป็นค่าที่ระบุ ซึ่งจะอยู่ด้านขวาในแผนภูมิส่วนใหญ่ ไม่สนใจหากตั้งค่าเป็นค่าที่น้อยกว่าค่า x สูงสุดของข้อมูล hAxis.viewWindow.max จะลบล้างพร็อพเพอร์ตี้นี้

ตัวเลือกนี้รองรับเฉพาะแกน continuous เท่านั้น

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
hAxis.minValue

ย้ายค่าต่ำสุดของแกนแนวนอนเป็นค่าที่ระบุ ซึ่งจะอยู่ทางซ้ายในแผนภูมิส่วนใหญ่ จะไม่สนใจหากตั้งค่านี้เป็นค่าที่มากกว่าค่า x ขั้นต่ำของข้อมูล hAxis.viewWindow.min จะลบล้างพร็อพเพอร์ตี้นี้

ตัวเลือกนี้รองรับเฉพาะแกน continuous เท่านั้น

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
hAxis.viewWindowMode

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

  • "pretty" - ปรับขนาดค่าแนวนอนเพื่อให้แสดงผลค่าสูงสุดและต่ำสุดที่ด้านซ้ายและขวาของพื้นที่แผนภูมิเล็กน้อย ViewWindow จะขยายไปยังเส้นตารางหลักที่ใกล้ที่สุดสำหรับตัวเลข หรือเส้นตารางรองที่ใกล้ที่สุดสำหรับวันที่และเวลา
  • "ขยายใหญ่สุด" - ปรับขนาดค่าแนวนอนเพื่อให้ค่าของข้อมูลสูงสุดและต่ำสุดสัมผัสทางด้านซ้ายและขวาของพื้นที่แผนภูมิ ซึ่งจะทำให้ระบบละเว้น haxis.viewWindow.min และ haxis.viewWindow.max
  • "Explicit" คือตัวเลือกที่เลิกใช้งานสำหรับระบุค่าสเกลด้านซ้ายและขวาของพื้นที่แผนภูมิ (เลิกใช้งานแล้วเนื่องจากมี haxis.viewWindow.min และ haxis.viewWindow.max ซ้ำซ้อน) ระบบจะครอบตัดค่าข้อมูลที่อยู่นอกค่าเหล่านี้ คุณต้องระบุออบเจ็กต์ hAxis.viewWindow ที่อธิบายค่าสูงสุดและค่าต่ำสุดที่จะแสดง

ตัวเลือกนี้รองรับเฉพาะแกน continuous เท่านั้น

ประเภท: สตริง
ค่าเริ่มต้น: เทียบเท่ากับ "pretty" แต่ haxis.viewWindow.min และ haxis.viewWindow.max จะมีความสำคัญเหนือกว่าหากมีการใช้งาน
hAxis.viewWindow

ระบุช่วงการครอบตัดของแกนแนวนอน

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
hAxis.viewWindow.max

  • สำหรับแกน continuous

    ค่าข้อมูลแนวนอนสูงสุดที่จะแสดง

  • สำหรับแกน discrete ให้ทำดังนี้

    ดัชนีแถวที่อิงตาม 0 ซึ่งกรอบเวลาการครอบตัดสิ้นสุด ระบบจะครอบตัดจุดข้อมูลที่ดัชนีนี้และสูงกว่าออก ตัวแปรนี้ใช้ร่วมกับ vAxis.viewWindowMode.min เพื่อกําหนดช่วงที่เปิดครึ่งหนึ่ง [min, max) ซึ่งแสดงถึงดัชนีองค์ประกอบที่จะแสดง กล่าวคือ ทุกดัชนีที่แสดง min <= index < max

ไม่สนใจเมื่อ hAxis.viewWindowMode เป็น "pretty" หรือ "maximized"

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
hAxis.viewWindow.min

  • สำหรับแกน continuous ให้ทำดังนี้

    ค่าข้อมูลแนวนอนขั้นต่ำที่จะแสดง

  • สำหรับแกน discrete ให้ทำดังนี้

    ดัชนีแถวที่อิงตาม 0 ซึ่งเป็นจุดที่หน้าต่างการครอบตัดเริ่มต้น ระบบจะครอบตัดจุดข้อมูลที่ดัชนีต่ำกว่าค่านี้ออก ตัวแปรนี้ใช้ร่วมกับ vAxis.viewWindowMode.max เพื่อกําหนดช่วงที่เปิดครึ่งหนึ่ง [min, max) ซึ่งแสดงถึงดัชนีองค์ประกอบที่จะแสดง กล่าวคือ ทุกดัชนีที่ min <= index < max ดังกล่าวจะแสดง

ไม่สนใจเมื่อ hAxis.viewWindowMode เป็น "pretty" หรือ "maximized"

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
ส่วนสูง

ความสูงของแผนภูมิเป็นพิกเซล

ประเภท: ตัวเลข
ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มีอยู่
interpolateNulls

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

ไม่รองรับแผนภูมิพื้นที่ที่มีตัวเลือก isStacked: true/'percent'/'relative'/'absolute'

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
isStacked

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

ตัวเลือก isStacked ยังรองรับการเรียงซ้อน 100% ด้วย ซึ่งจะปรับขนาดกององค์ประกอบที่ค่าโดเมนแต่ละค่าใหม่ให้รวมกันได้ 100%

ตัวเลือกสำหรับ isStacked มีดังนี้

  • false — องค์ประกอบจะไม่ซ้อนกัน ประเภทการทำงานนี้เป็นค่าเริ่มต้น
  • true — ซ้อนเอลิเมนต์สำหรับทุกชุดที่ค่าโดเมนแต่ละค่า
  • 'percent' — ซ้อนองค์ประกอบสำหรับชุดข้อมูลทั้งหมดที่แต่ละค่าโดเมนและปรับขนาดใหม่ให้รวมกันได้ 100% โดยค่าขององค์ประกอบแต่ละรายการจะคำนวณเป็นเปอร์เซ็นต์ของ 100%
  • 'relative' — ซ้อนองค์ประกอบสำหรับชุดข้อมูลทั้งหมดที่แต่ละค่าโดเมนและปรับขนาดใหม่โดยรวมกันเป็น 1 โดยค่าขององค์ประกอบแต่ละค่าจะคำนวณเป็นเศษส่วน 1
  • 'absolute' — ทำงานเหมือนกับ isStacked: true

สำหรับการซ้อน 100% ค่าที่คำนวณแล้วของแต่ละองค์ประกอบจะปรากฏในเคล็ดลับเครื่องมือหลังจากค่าจริง

แกนเป้าหมายจะมีค่าเริ่มต้นเป็นการเลือกค่าตามสเกล 0-1 สัมพัทธ์เป็นเศษส่วน ของ 1 สำหรับ 'relative' และ 0-100% สำหรับ 'percent' (หมายเหตุ: เมื่อใช้ตัวเลือก 'percent' ค่าแกน/เครื่องหมายถูกจะแสดงเป็นเปอร์เซ็นต์ แต่ค่าจริงจะเป็นค่าสเกล 0-1 สัมพัทธ์ เนื่องจากเครื่องหมายถูกบนแกนเปอร์เซ็นต์เป็นผลมาจากการใช้รูปแบบ "#.##%" กับค่าสเกล 0-1 สัมพัทธ์ เมื่อใช้ isStacked: 'percent' อย่าลืมระบุเครื่องหมายขีด/เส้นตารางโดยใช้ค่าสเกล 0-1 สัมพัทธ์) คุณสามารถปรับแต่งค่าและการจัดรูปแบบของเส้นตาราง/เครื่องหมายถูกโดยใช้ตัวเลือก hAxis/vAxis ที่เหมาะสม

การเรียงซ้อน 100% รองรับเฉพาะค่าข้อมูลประเภท number และต้องมีเกณฑ์พื้นฐานเป็น 0

ประเภท: บูลีน/สตริง
ค่าเริ่มต้น: เท็จ
คำอธิบาย

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
legend.alignment

การปรับแนวคำอธิบาย อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้

  • "start" - สอดคล้องกับจุดเริ่มต้นของพื้นที่ที่จัดสรรให้กับคำอธิบาย
  • "center" - อยู่กึ่งกลางในพื้นที่ที่จัดสรรไว้สำหรับคำอธิบาย
  • "end" - ปรับแนวไปยังจุดสิ้นสุดของพื้นที่ที่จัดสรรให้กับคำอธิบาย

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

ค่าเริ่มต้นจะขึ้นอยู่กับตำแหน่งของคำอธิบาย สำหรับคำอธิบาย "ด้านล่าง" ค่าเริ่มต้นคือ "center" ส่วนคำอธิบายอื่นๆ จะมีค่าเริ่มต้นเป็น "start"

ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
legend.maxLines

จำนวนบรรทัดสูงสุดในคำอธิบาย ตั้งค่านี้ให้มากกว่า 1 เพื่อเพิ่มบรรทัดในคำอธิบาย หมายเหตุ: ตรรกะแบบตรงที่ใช้ในการกำหนดจำนวนจริงของบรรทัดที่แสดงผลนั้นยังคงอยู่ในรูปแบบ Flux

ปัจจุบันตัวเลือกนี้จะทำงานเมื่อ Legend.position เป็น "ด้านบน" เท่านั้น

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
legend.pageIndex

เลือกดัชนีหน้าฐาน 0 ของคำอธิบายที่เลือกในตอนแรก

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
legend.position

ตำแหน่งของคำอธิบาย อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้

  • "bottom" - ใต้แผนภูมิ
  • "ซ้าย" - ทางด้านซ้ายของแผนภูมิ ในกรณีที่แกนด้านซ้ายไม่มีชุดที่เชื่อมโยงกับแผนภูมิ ถ้าต้องการให้คำอธิบายอยู่ทางซ้าย ให้ใช้ตัวเลือก targetAxisIndex: 1
  • "ใน" - ภายในแผนภูมิตามมุมซ้ายบน
  • "none" - ไม่แสดงคำอธิบาย
  • "ขวา" - ทางด้านขวาของแผนภูมิ ไม่สามารถใช้ร่วมกับตัวเลือก vAxes
  • "top" - เหนือแผนภูมิ
ประเภท: สตริง
ค่าเริ่มต้น: "ขวา"
legend.textStyle

ออบเจ็กต์ที่ระบุรูปแบบข้อความคำอธิบาย ออบเจ็กต์มีรูปแบบดังนี้

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' ดู fontName และ fontSize ด้วย

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
lineDashStyle

รูปแบบการเปิดและปิดสำหรับเส้นประ ตัวอย่างเช่น [4, 4] จะใส่ขีดกลางยาว 4 ความยาวซ้ำตามด้วยช่องว่างความยาว 4 และ [5, 1, 3] จะแสดงขีดกลางยาว 5 ความยาว ช่องว่างความยาว 1 ช่องว่างซ้ำ ขีดกลางความยาว 3 ช่องว่าง ช่องว่าง 5 ความยาว ขีดกลางความยาว 1 และช่องว่าง 3 ความยาว ดูข้อมูลเพิ่มเติมได้ที่เส้นประ

ประเภท: อาร์เรย์ของตัวเลข
ค่าเริ่มต้น: null
lineWidth

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 2
การวางแนว

การวางแนวของแผนภูมิ เมื่อตั้งค่าเป็น 'vertical' จะหมุนแกนของแผนภูมิเพื่อให้แผนภูมิคอลัมน์เป็นแผนภูมิแท่ง และแผนภูมิพื้นที่จะขยายไปทางขวาแทนที่จะเลื่อนขึ้น

ประเภท: สตริง
ค่าเริ่มต้น: "แนวนอน"
pointShape

รูปร่างขององค์ประกอบข้อมูลแต่ละองค์ประกอบ ได้แก่ "วงกลม" "สามเหลี่ยม" "สี่เหลี่ยมจัตุรัส" "ข้าวหลามตัด" "ดาว" หรือ "รูปหลายเหลี่ยม" ดูตัวอย่างได้ใน เอกสารประกอบเกี่ยวกับคะแนน

ประเภท: สตริง
ค่าเริ่มต้น: "แวดวง"
pointSize

เส้นผ่านศูนย์กลางของจุดที่แสดงในหน่วยพิกเซล ใช้ศูนย์เพื่อซ่อนจุดทั้งหมด คุณลบล้างค่าของแต่ละชุดได้โดยใช้พร็อพเพอร์ตี้ series หากใช้เส้นแนวโน้ม ตัวเลือก pointSize จะมีผลกับความกว้างของเส้นแนวโน้ม เว้นแต่คุณจะลบล้างด้วยตัวเลือก trendlines.n.pointsize

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
pointsVisible

กำหนดว่าจะแสดงคะแนนหรือไม่ ตั้งค่าเป็น false เพื่อซ่อนจุดทั้งหมด คุณจะลบล้างค่าของแต่ละชุดได้โดยใช้พร็อพเพอร์ตี้ series หากคุณใช้เส้นแนวโน้ม ตัวเลือก pointsVisible จะมีผลกับการแสดงจุดบนเส้นแนวโน้มทั้งหมด เว้นแต่คุณจะลบล้างด้วยตัวเลือก trendlines.n.pointsVisible

ซึ่งลบล้างได้โดยใช้บทบาทรูปแบบในรูปแบบ "point {visible: true}"

ประเภท: บูลีน
ค่าเริ่มต้น: true
reverseCategories

หากตั้งค่าเป็น "จริง" จะวาดอนุกรมจากขวาไปซ้าย ค่าเริ่มต้นคือวาดจากซ้ายไปขวา

ตัวเลือกนี้รองรับเฉพาะแกน discrete major

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
selectionMode

เมื่อ selectionMode คือ 'multiple' ผู้ใช้อาจเลือกจุดข้อมูลหลายจุด

ประเภท: สตริง
ค่าเริ่มต้น: "single"
ซีรีส์

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

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

    series: {
  0: {
    annotations: {
      textStyle: {fontSize: 12, color: 'red' }
    }
  }
}

    โปรดดูตัวเลือกต่างๆ ของ annotations สำหรับรายการที่สมบูรณ์ยิ่งขึ้นของสิ่งที่ปรับแต่งได้

  • areaOpacity - ลบล้าง areaOpacity ส่วนกลางสำหรับชุดหนังสือนี้
  • color - สีที่ใช้สำหรับชุดนี้ ระบุสตริงสี HTML ที่ถูกต้อง
  • labelInLegend - คำอธิบายของชุดที่จะปรากฏในคำอธิบายแผนภูมิ
  • lineDashStyle - ลบล้างค่า lineDashStyle ร่วมสำหรับชุดนี้
  • lineWidth - ลบล้างค่า lineWidth ร่วมสำหรับชุดนี้
  • pointShape - ลบล้างค่า pointShape ร่วมสำหรับชุดนี้
  • pointSize - ลบล้างค่า pointSize ร่วมสำหรับชุดนี้
  • pointsVisible - ลบล้างค่า pointsVisible ร่วมสำหรับชุดนี้
  • targetAxisIndex - จะกำหนดแกนนี้ให้แกนใด โดย 0 คือแกนเริ่มต้น และ 1 คือแกนตรงข้าม ค่าเริ่มต้นคือ 0 ตั้งค่าเป็น 1 เพื่อกำหนดแผนภูมิที่มีการแสดงผลชุดที่ต่างกันในแกนต่างๆ มีการจัดสรรชุดข้อมูลอย่างน้อย 1 ชุดให้กับแกนเริ่มต้น คุณกำหนดสเกลที่ต่างกันสำหรับแกนต่างๆ ได้
  • visibleInLegend - ค่าบูลีน โดยที่ "จริง" หมายความว่าชุดหนังสือควรมีรายการคำอธิบาย และ "เท็จ" หมายความว่าไม่ควรใส่ ค่าเริ่มต้นเป็น True

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

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
ประเภท: อาร์เรย์ของออบเจ็กต์ หรือออบเจ็กต์ที่มีออบเจ็กต์ที่ซ้อนกัน
ค่าเริ่มต้น: {}
ธีม [theme]

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

  • "ขยายใหญ่สุด" - ขยายพื้นที่ในแผนภูมิให้ใหญ่สุด ดึงคำอธิบายและป้ายกำกับทั้งหมดภายในพื้นที่แผนภูมิ ตั้งค่าตัวเลือกต่อไปนี้ 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
ประเภท: สตริง
ค่าเริ่มต้น: null
title

ข้อความที่จะแสดงเหนือแผนภูมิ

ประเภท: สตริง
ค่าเริ่มต้น: ไม่มีชื่อ
titlePosition

ตำแหน่งที่จะวางชื่อแผนภูมิเมื่อเทียบกับพื้นที่แผนภูมิ ค่าที่รองรับ

  • in - วาดชื่อไว้ภายในบริเวณแผนภูมิ
  • out - วาดชื่อไว้นอกแผนภูมิ
  • ไม่มี - ไม่ระบุชื่อ
ประเภท: สตริง
ค่าเริ่มต้น: "out"
titleTextStyle

วัตถุที่ระบุรูปแบบข้อความชื่อ ออบเจ็กต์มีรูปแบบดังนี้

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' ดู fontName และ fontSize ด้วย

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
เคล็ดลับเครื่องมือ

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
tooltip.ignoreBounds

หากตั้งค่าเป็น true จะช่วยให้การวาดเคล็ดลับเครื่องมือออกนอกขอบเขตของแผนภูมิทุกด้าน

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

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
tooltip.isHtml

หากตั้งค่าเป็น "จริง" ให้ใช้เคล็ดลับเครื่องมือที่แสดงผล HTML (แทนการแสดงผล SVG) ดูรายละเอียดเพิ่มเติมได้ที่การปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ

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

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
tooltip.showColorCode

หากจริง ให้แสดงสี่เหลี่ยมสีถัดจากข้อมูลชุดในเคล็ดลับเครื่องมือ ค่าเริ่มต้นจะเป็น "จริง" เมื่อตั้งค่า focusTarget เป็น "หมวดหมู่" มิเช่นนั้น ค่าเริ่มต้นจะเป็น "เท็จ"

ประเภท: บูลีน
ค่าเริ่มต้น: อัตโนมัติ
tooltip.textStyle

ออบเจ็กต์ที่ระบุรูปแบบข้อความของเคล็ดลับเครื่องมือ ออบเจ็กต์มีรูปแบบดังนี้

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' ดู fontName และ fontSize ด้วย

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

การโต้ตอบของผู้ใช้ที่ทำให้เคล็ดลับเครื่องมือปรากฏขึ้น

  • "โฟกัส" - เคล็ดลับเครื่องมือจะแสดงเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ
  • "none" - เคล็ดลับเครื่องมือจะไม่ปรากฏ
  • "selection" - เคล็ดลับเครื่องมือจะปรากฏขึ้นเมื่อผู้ใช้เลือกองค์ประกอบ
ประเภท: สตริง
ค่าเริ่มต้น: "โฟกัส"
vAxes

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

หากต้องการระบุแผนภูมิที่มีแกนแนวตั้งหลายแกน ให้กำหนดแกนใหม่โดยใช้ series.targetAxisIndex จากนั้นกำหนดค่าแกนโดยใช้ vAxes ตัวอย่างต่อไปนี้กำหนดชุดที่ 2 ให้กับแกนด้านขวาและระบุชื่อและรูปแบบข้อความที่กำหนดเอง 

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}

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

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
ประเภท: อาร์เรย์ของออบเจ็กต์ หรือออบเจ็กต์ที่มีออบเจ็กต์ย่อย
ค่าเริ่มต้น: null
vAxis

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

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
vAxis.baseline

พร็อพเพอร์ตี้ vAxis ที่ระบุเส้นฐานสำหรับแกนแนวตั้ง หากเส้นฐานใหญ่กว่าเส้นตารางกริดสูงสุดหรือเล็กกว่าเส้นตารางกริดต่ำสุด ระบบจะปัดเศษเส้นตารางให้ใกล้กับเส้นตารางมากที่สุด

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
vAxis.baselineColor

ระบุสีของเกณฑ์พื้นฐานสำหรับแกนแนวตั้ง เป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00'

ประเภท: ตัวเลข
ค่าเริ่มต้น: "black"
vAxis.direction

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

ประเภท: 1 หรือ -1
ค่าเริ่มต้น: 1
vAxis.format

สตริงรูปแบบสำหรับป้ายกำกับแกนตัวเลข นี่คือชุดย่อยของ ชุดรูปแบบ ICU เช่น {format:'#,###%'} จะแสดงค่า "1,000%", "750%" และ "50%" สำหรับค่า 10, 7.5 และ 0.5 นอกจากนี้ คุณยังระบุข้อมูลดังต่อไปนี้ได้ด้วย

  • {format: 'none'}: แสดงตัวเลขที่ไม่มีการจัดรูปแบบ (เช่น 8000000)
  • {format: 'decimal'}: แสดงตัวเลขที่มีตัวคั่นหลักพัน (เช่น 8,000,000)
  • {format: 'scientific'}: แสดงตัวเลขในรูปแบบสัญกรณ์วิทยาศาสตร์ (เช่น 8E6)
  • {format: 'currency'}: แสดงหมายเลขในสกุลเงินท้องถิ่น (เช่น 240,000,000.00 บาท)
  • {format: 'percent'}: แสดงตัวเลขเป็นเปอร์เซ็นต์ (เช่น 800,000,000%)
  • {format: 'short'}: แสดงตัวเลขแบบย่อ (เช่น 8 ล้าน)
  • {format: 'long'}: แสดงตัวเลขเป็นคำที่สมบูรณ์ (เช่น 8 ล้าน)

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

ในการคำนวณค่าเครื่องหมายถูกและเส้นตาราง เราจะพิจารณาชุดค่าผสมทางเลือกต่างๆ ของตัวเลือกเส้นตารางที่เกี่ยวข้องทั้งหมด และจะปฏิเสธทางเลือกอื่นหากป้ายกำกับเครื่องหมายถูกที่จัดรูปแบบซ้ำหรือทับซ้อนกัน คุณจึงระบุ format:"#" ได้หากต้องการแสดงเฉพาะค่าขีดจำนวนเต็ม แต่โปรดทราบว่าหากไม่มีตัวเลือกอื่นที่ตรงกับเกณฑ์นี้ ระบบจะไม่แสดงเส้นตารางหรือเครื่องหมายถูก

ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
vAxis.gridlines

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

{color: '#333', minSpacing: 20}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
vAxis.gridlines.color

สีของเส้นตารางแนวตั้งภายในพื้นที่แผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง

ประเภท: สตริง
ค่าเริ่มต้น: "#CCC"
vAxis.gridlines.count

จำนวนเส้นตารางแนวนอนโดยประมาณภายในพื้นที่แผนภูมิ หากคุณระบุจำนวนบวกสำหรับ gridlines.count ระบบจะใช้จำนวนดังกล่าวเพื่อคำนวณ minSpacing ระหว่างเส้นตาราง คุณระบุค่า 1 เพื่อวาดเส้นตารางเพียง 1 เส้น หรือ 0 เพื่อวาดเส้นตารางก็ได้ ป้อน -1 ซึ่งเป็นค่าเริ่มต้นเพื่อคำนวณจำนวนเส้นตารางโดยอัตโนมัติตามตัวเลือกอื่นๆ

ประเภท: ตัวเลข
ค่าเริ่มต้น: -1
vAxis.gridlines.interval

อาร์เรย์ของขนาด (เป็นค่าข้อมูล ไม่ใช่พิกเซล) ระหว่างเส้นตารางที่อยู่ติดกัน ขณะนี้ตัวเลือกนี้ใช้ได้กับแกนตัวเลขเท่านั้น แต่คล้ายกับตัวเลือก gridlines.units.<unit>.interval ที่ใช้สำหรับวันที่และเวลาเท่านั้น สำหรับสเกลเชิงเส้น ค่าเริ่มต้นคือ [1, 2, 2.5, 5] ซึ่งหมายความว่าค่าของเส้นตารางอาจอยู่ในทุกหน่วย (1) หน่วยคู่ (2) หรือพหุคูณของ 2.5 หรือ 5 กําลังพิจารณาเลขใดก็ตามที่มี 10 เท่าของค่าเหล่านี้ด้วย (เช่น [10, 20, 25, 50] และ [.1, .2, .25, .5]) สำหรับสเกลบันทึก ค่าเริ่มต้นคือ [1, 2, 5]

ประเภท: ตัวเลขตั้งแต่ 1 ถึง 10 โดยไม่รวม 10
ค่าเริ่มต้น: คำนวณ
vAxis.gridlines.minSpacing

พื้นที่หน้าจอต่ำสุด (หน่วยเป็นพิกเซล) ระหว่างเส้นตารางหลัก hAxis ค่าเริ่มต้นสำหรับเส้นตารางหลักคือ 40 สำหรับสเกลเชิงเส้น และ 20 สำหรับสเกลบันทึก หากคุณระบุ count ไม่ใช่ minSpacing ระบบจะคำนวณ minSpacing จากจำนวนดังกล่าว และในทางกลับกัน หากคุณระบุ minSpacing ไม่ใช่ count ระบบจะคํานวณจํานวนจาก minSpacing หากคุณระบุทั้ง 2 อย่าง ระบบจะลบล้าง minSpacing

ประเภท: ตัวเลข
ค่าเริ่มต้น: คำนวณ
vAxis.gridlines.multiple

ค่าเส้นตารางและเครื่องหมายถูกทั้งหมดต้องเป็นพหุคูณของค่าของตัวเลือกนี้ โปรดทราบว่าไม่คํานึงถึงกำลังเป็นจำนวน 10 เท่าของจำนวนคูณ ซึ่งต่างจากช่วงเวลา คุณบังคับให้ทิกเป็นจำนวนเต็มได้โดยการระบุ gridlines.multiple = 1 หรือบังคับให้จุดเริ่มเป็นพหุคูณของ 1, 000 ด้วยการระบุ gridlines.multiple = 1000

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
vAxis.gridlines.units

ลบล้างรูปแบบเริ่มต้นสำหรับข้อมูลประเภทวันที่/วันที่และเวลา/เวลาของวันในลักษณะต่างๆ เมื่อใช้กับเส้นตารางที่คำนวณในแผนภูมิ อนุญาตการจัดรูปแบบสำหรับปี เดือน วัน ชั่วโมง นาที วินาที และมิลลิวินาที

รูปแบบทั่วไปคือ

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
vAxis.minorGridlines

ออบเจ็กต์ที่มีสมาชิกสำหรับกำหนดค่าเส้นตารางย่อยบนแกนแนวตั้ง ซึ่งคล้ายกับตัวเลือก vAxis.gridlines

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
vAxis.minorGridlines.color

สีของเส้นตารางย่อยแนวตั้งภายในพื้นที่แผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง

ประเภท: สตริง
ค่าเริ่มต้น: การผสมผสานของสีของเส้นตารางและสีพื้นหลัง
vAxis.minorGridlines.interval

ตัวเลือก minGridlines.interval เป็นเหมือนตัวเลือกช่วงเส้นตารางหลัก แต่ช่วงเวลาที่เลือกจะเป็นตัวหารคู่ของช่วงเส้นตารางหลักเสมอ ช่วงเวลาเริ่มต้นสำหรับสเกลเชิงเส้นคือ [1, 1.5, 2, 2.5, 5] และสำหรับสเกลบันทึกคือ [1, 2, 5]

ประเภท: ตัวเลข
ค่าเริ่มต้น:1
vAxis.minorGridlines.minSpacing

พื้นที่ขั้นต่ำที่จำเป็น (หน่วยเป็นพิกเซล) ระหว่างเส้นตารางย่อยที่อยู่ติดกัน และระหว่างเส้นตารางย่อยกับเส้นตารางหลัก ค่าเริ่มต้นคือ 1/2 ขั้นต่ำของเส้นตารางหลักสำหรับสเกลเชิงเส้น และ 1/5 minSpacing สำหรับสเกลบันทึก

ประเภท: ตัวเลข
ค่าเริ่มต้น: คำนวณ
vAxis.minorGridlines.multiple

เหมือนกับอีเมลหลัก gridlines.multiple

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
vAxis.minorGridlines.count

เลิกใช้งานตัวเลือก minGridlines.count ส่วนใหญ่แล้ว ยกเว้นการปิดใช้เส้นตารางกริดย่อยโดยการตั้งค่าจำนวนเป็น 0 จำนวนเส้นตารางย่อยจะขึ้นอยู่กับช่วงเวลาระหว่างเส้นตารางหลัก (ดู vAxis.gridlines.interval) และพื้นที่ขั้นต่ำที่ต้องการ (ดูที่ vAxis.minorGridlines.minSpacing)

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
vAxis.minorGridlines.units

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

รูปแบบทั่วไปคือ

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
vAxis.logScale

หากจริง จะทำให้แกนแนวตั้งเป็นสเกลลอการิทึม หมายเหตุ: ค่าทั้งหมดต้องเป็นค่าบวก

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
vAxis.scaleType

พร็อพเพอร์ตี้ vAxis ที่ทำให้แกนแนวตั้งเป็นสเกลลอการิทึม อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้

  • null - ไม่มีการปรับขนาดลอการิทึม
  • 'log' - การปรับขนาดลอการิทึม ระบบจะไม่พล็อตค่าลบและค่าศูนย์ ตัวเลือกนี้เหมือนกับการตั้งค่า vAxis: { logscale: true }
  • "mirrorLog" - การปรับขนาดลอการิทึมที่มีการพล็อตค่าลบและค่าศูนย์ ค่าที่พล็อตของจำนวนลบเป็นค่าลบของบันทึกข้อมูลของค่าสัมบูรณ์ ระบบจะพล็อตค่าที่ใกล้เคียงกับ 0 ในสเกลเชิงเส้น

ตัวเลือกนี้รองรับเฉพาะแกน continuous

ประเภท: สตริง
ค่าเริ่มต้น: null
vAxis.textPosition

ตำแหน่งของข้อความแกนแนวตั้งที่สัมพันธ์กับพื้นที่แผนภูมิ ค่าที่รองรับ: "out", "in", "none"

ประเภท: สตริง
ค่าเริ่มต้น: "out"
vAxis.textStyle

วัตถุที่ระบุรูปแบบข้อความของแกนแนวตั้ง ออบเจ็กต์มีรูปแบบดังนี้

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' ดู fontName และ fontSize ด้วย

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

แทนที่เครื่องหมายแสดงตำแหน่งบนแกน Y ที่สร้างขึ้นโดยอัตโนมัติด้วยอาร์เรย์ที่ระบุ องค์ประกอบแต่ละรายการของอาร์เรย์ควรเป็นค่าเครื่องหมายถูกที่ถูกต้อง (เช่น ตัวเลข วันที่ วันที่และเวลา หรือเวลาของวัน) หรือออบเจ็กต์ หากเป็นออบเจ็กต์ ควรมีพร็อพเพอร์ตี้ v สำหรับค่าเครื่องหมายถูก และพร็อพเพอร์ตี้ f (ไม่บังคับ) ซึ่งมีสตริงตามตัวอักษรที่จะแสดงเป็นป้ายกำกับ

ViewWindow จะขยายโดยอัตโนมัติเพื่อรวมจุดต่ำสุดและสูงสุด เว้นแต่คุณจะระบุ viewWindow.min หรือ viewWindow.max เพื่อลบล้าง

ตัวอย่าง

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
ประเภท: อาร์เรย์ขององค์ประกอบ
ค่าเริ่มต้น: อัตโนมัติ
vAxis.title

พร็อพเพอร์ตี้ vAxis ที่ระบุชื่อสำหรับแกนแนวตั้ง

ประเภท: สตริง
ค่าเริ่มต้น: ไม่มีชื่อ
vAxis.titleTextStyle

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

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' ดู fontName และ fontSize ด้วย

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

ย้ายค่าสูงสุดของแกนแนวตั้งเป็นค่าที่ระบุ ซึ่งจะอยู่ด้านบนในแผนภูมิส่วนใหญ่ ไม่สนใจหากตั้งค่านี้เป็นค่าที่น้อยกว่าค่า y สูงสุดของข้อมูล vAxis.viewWindow.max จะลบล้างพร็อพเพอร์ตี้นี้

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
vAxis.minValue

ย้ายค่าขั้นต่ำของแกนแนวตั้งไปยังค่าที่ระบุ ซึ่งจะเลื่อนลงไปด้านล่างในแผนภูมิส่วนใหญ่ จะไม่สนใจหากตั้งค่านี้เป็นค่าที่มากกว่าค่า y ต่ำสุดของข้อมูล vAxis.viewWindow.min จะลบล้างพร็อพเพอร์ตี้นี้

ประเภท: ตัวเลข
ค่าเริ่มต้น: null
vAxis.viewWindowMode

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

  • "pretty" - ปรับขนาดค่าแนวตั้งเพื่อให้แสดงผลค่าสูงสุดและต่ำสุดที่ด้านด้านล่างและด้านบนของแผนภูมิเล็กน้อย ViewWindow จะขยายไปยังเส้นตารางหลักที่ใกล้ที่สุดสำหรับตัวเลข หรือเส้นตารางรองที่ใกล้ที่สุดสำหรับวันที่และเวลา
  • "ขยายใหญ่สุด" - ปรับขนาดค่าแนวตั้งเพื่อให้ค่าสูงสุดและต่ำสุดแตะ ด้านบนและด้านล่างของพื้นที่แผนภูมิ ซึ่งจะทำให้ระบบละเว้น vaxis.viewWindow.min และ vaxis.viewWindow.max
  • "Explicit" - ตัวเลือกที่เลิกใช้งานสำหรับการระบุค่าสเกลด้านบนและด้านล่างของพื้นที่แผนภูมิ (เลิกใช้งานแล้วเนื่องจากซ้ำซ้อนกับ vaxis.viewWindow.min และ vaxis.viewWindow.max ระบบจะครอบตัดค่าข้อมูลที่อยู่นอกค่าเหล่านี้ คุณต้องระบุออบเจ็กต์ vAxis.viewWindow ที่อธิบายค่าสูงสุดและค่าต่ำสุดที่จะแสดง
ประเภท: สตริง
ค่าเริ่มต้น: เทียบเท่ากับ "pretty" แต่ vaxis.viewWindow.min และ vaxis.viewWindow.max จะมีความสำคัญเหนือกว่าหากมีการใช้งาน
vAxis.viewWindow

ระบุช่วงการครอบตัดของแกนแนวตั้ง

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
vAxis.viewWindow.max

ค่าข้อมูลประเภทธุรกิจสูงสุดที่จะแสดง

ไม่สนใจเมื่อ vAxis.viewWindowMode เป็น "pretty" หรือ "maximized"

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
vAxis.viewWindow.min

ค่าข้อมูลแนวตั้งขั้นต่ำที่จะแสดง

ไม่สนใจเมื่อ vAxis.viewWindowMode เป็น "pretty" หรือ "maximized"

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
ความกว้าง

ความกว้างของแผนภูมิเป็นพิกเซล

ประเภท: ตัวเลข
ค่าเริ่มต้น: ความกว้างขององค์ประกอบที่มีอยู่

วิธีการ

วิธีการ
draw(data, options)

วาดแผนภูมิ แผนภูมิยอมรับการเรียกใช้เมธอดเพิ่มเติมหลังจากที่เหตุการณ์ ready เริ่มทํางานแล้วเท่านั้น Extended description.

ประเภทการคืนสินค้า: ไม่มี
getAction(actionID)

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

ประเภทผลลัพธ์: ออบเจ็กต์
getBoundingBox(id)

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

var cli = chart.getChartLayoutInterface();

ความสูงของพื้นที่แผนภูมิ
cli.getBoundingBox('chartarea').height
ความกว้างของแท่งที่ 3 ในแผนภูมิแท่งหรือแผนภูมิคอลัมน์ชุดแรก
cli.getBoundingBox('bar#0#2').width
กล่องล้อมรอบของลิ่มที่ 5 ของแผนภูมิวงกลม
cli.getBoundingBox('slice#4')
ช่องขอบเขตของข้อมูลแผนภูมิของแผนภูมิแนวตั้ง (เช่น คอลัมน์)
cli.getBoundingBox('vAxis#0#gridline')
กล่องขอบเขตของข้อมูลแผนภูมิของแผนภูมิแนวนอน (เช่น แท่ง)
cli.getBoundingBox('hAxis#0#gridline')

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

ประเภทผลลัพธ์: ออบเจ็กต์
getChartAreaBoundingBox()

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

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

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

ประเภทผลลัพธ์: ออบเจ็กต์
getChartLayoutInterface()

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

เมธอดต่อไปนี้สามารถเรียกใช้ในออบเจ็กต์ที่แสดงผล

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ประเภทผลลัพธ์: ออบเจ็กต์
getHAxisValue(xPosition, optional_axis_index)

แสดงผลค่าข้อมูลแนวนอนที่ xPosition ซึ่งเป็นออฟเซ็ตพิกเซลจากขอบด้านซ้ายของคอนเทนเนอร์แผนภูมิ อาจเป็นเชิงลบได้

ตัวอย่าง: chart.getChartLayoutInterface().getHAxisValue(400)

เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ประเภทการคืนสินค้า: ตัวเลข
getImageURI()

แสดงผลแผนภูมิที่เรียงลำดับเป็น URI รูปภาพ

เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ดูการพิมพ์แผนภูมิ PNG

ประเภทการแสดงผล: สตริง
getSelection()

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

ประเภทผลลัพธ์: อาร์เรย์ขององค์ประกอบการเลือก
getVAxisValue(yPosition, optional_axis_index)

แสดงผลค่าข้อมูลแนวตั้งที่ yPosition ซึ่งเป็นออฟเซ็ตพิกเซลจากขอบด้านบนของคอนเทนเนอร์แผนภูมิ อาจเป็นเชิงลบได้

ตัวอย่าง: chart.getChartLayoutInterface().getVAxisValue(300)

เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ประเภทการคืนสินค้า: ตัวเลข
getXLocation(dataValue, optional_axis_index)

แสดงผลพิกัด x ของพิกเซลของ dataValue ที่สัมพัทธ์กับขอบด้านซ้ายของคอนเทนเนอร์ของแผนภูมิ

ตัวอย่าง: chart.getChartLayoutInterface().getXLocation(400)

เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ประเภทการคืนสินค้า: ตัวเลข
getYLocation(dataValue, optional_axis_index)

แสดงผลพิกัด y ของพิกเซลของ dataValue ที่สัมพันธ์กับขอบด้านบนของคอนเทนเนอร์ของแผนภูมิ

ตัวอย่าง: chart.getChartLayoutInterface().getYLocation(300)

เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ประเภทการคืนสินค้า: ตัวเลข
removeAction(actionID)

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

ประเภทการคืนสินค้า: none
setAction(action)

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

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

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

ประเภทการคืนสินค้า: none
setSelection()

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

ประเภทการคืนสินค้า: ไม่มี
clearChart()

ล้างแผนภูมิ และปล่อยทรัพยากรที่จัดสรรทั้งหมด

ประเภทการคืนสินค้า: ไม่มี

กิจกรรม

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

ชื่อ
animationfinish

เริ่มทำงานเมื่อภาพเคลื่อนไหวการเปลี่ยนเสร็จสมบูรณ์

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

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

พร็อพเพอร์ตี้: targetID
error

เริ่มทำงานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลแผนภูมิ

พร็อพเพอร์ตี้: รหัส ข้อความ
legendpagination

เริ่มทำงานเมื่อผู้ใช้คลิกลูกศรใส่เลขหน้าคำอธิบาย ส่งกลับดัชนีหน้าที่มีฐาน 0 ในคำอธิบายปัจจุบันและจำนวนหน้าทั้งหมด

พร็อพเพอร์ตี้:currentPageIndex, totalPages
onmouseover

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

พร็อพเพอร์ตี้: แถว คอลัมน์
onmouseout

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

พร็อพเพอร์ตี้: แถว คอลัมน์
ready

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

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

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

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

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

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