แผนภูมิพื้นที่แบบขั้นบันได

ภาพรวม

แผนภูมิพื้นที่แบบขั้นบันไดที่แสดงผลภายในเบราว์เซอร์โดยใช้ 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([
          ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
          ['Alfred Hitchcock (1935)', 8.4,         7.9],
          ['Ralph Thomas (1959)',     6.9,         6.5],
          ['Don Sharp (1978)',        6.5,         6.4],
          ['James Hawes (2008)',      4.4,         6.2]
        ]);

        var options = {
          title: 'The decline of \'The 39 Steps\'',
          vAxis: {title: 'Accumulated Rating'},
          isStacked: true
        };

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

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

ตัวเลือกทั่วไป

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

ในแผนภูมิด้านบน เราได้เปลี่ยนสีพื้นหลังด้วย backgroundColor, ย้ายคำอธิบายไปด้านล่างสุดด้วย legend.position, นำเส้นแนวตั้งออกโดยตั้งค่า connectSteps เป็น false และปรับแต่งสี โดยทำดังนี้

  var options = {
      backgroundColor: '#ddd',
      legend: { position: 'bottom' },
      connectSteps: false,
      colors: ['#4374E0', '#53A8FB', '#F1CA3A', '#E49307'],
      isStacked: true,
  };

แผนภูมิพื้นที่แบบขั้นบันไดแบบซ้อน

แผนภูมิพื้นที่แบบขั้นบันไดยังรองรับการซ้อนข้อความ รวมถึงการกองซ้อน 100% ด้วย แผนภูมิพื้นที่แบบซ้อนเป็นแผนภูมิพื้นที่แบบขั้นบันไดที่วางค่าที่เกี่ยวข้องกันไว้ด้านบน หากมีค่าติดลบ ค่าเหล่านั้นจะเรียงซ้อนกันในลำดับที่กลับกันใต้เส้นฐานของแผนภูมิ สำหรับการกองซ้อน 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]
          }
        };
    

กำลังโหลด

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

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

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

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

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

แถว: แต่ละแถวในตารางแสดงกลุ่มแท่ง

คอลัมน์:

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

 

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

ชื่อ
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
areaOpacity

ความทึบแสงเริ่มต้นของพื้นที่ด้านล่างขั้นตอน โดย 0.0 หมายถึงโปร่งแสงเต็มที่ และ 1.0 คือทึบแสงเต็มที่ ไม่ส่งผลกระทบต่อความทึบแสงของเส้นขั้นบันได หากต้องการเห็นแผนภูมิเส้นแบบขั้นบันได ให้ตั้งค่านี้เป็น 0 หากต้องการระบุความทึบแสงสำหรับแต่ละชุด ให้ตั้งค่า areaOpacity ในพร็อพเพอร์ตี้ 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']

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

หากตั้งค่าเป็น "จริง" จะเชื่อมต่อขั้นตอนเพื่อสร้างเส้นขั้น ไม่เช่นนั้น จะมีเพียงบรรทัดบนสุดปรากฏขึ้น ค่าเริ่มต้นคือเชื่อมต่อระหว่างขั้นตอน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ประเภท: 1 หรือ -1
ค่าเริ่มต้น: 1
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] }
ประเภท: อาร์เรย์ขององค์ประกอบ
ค่าเริ่มต้น: อัตโนมัติ
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

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

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
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.viewWindow

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

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

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

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

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

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

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

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

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มีอยู่
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.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
reverseCategories

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

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

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

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

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

  • areaOpacity - ลบล้าง areaOpacity ส่วนกลางสำหรับชุดหนังสือนี้
  • color - สีที่ใช้สำหรับชุดนี้ ระบุสตริงสี HTML ที่ถูกต้อง
  • labelInLegend - คำอธิบายของชุดที่จะปรากฏในคำอธิบายแผนภูมิ
  • lineDashStyle - ลบล้างค่า lineDashStyle ร่วมสำหรับชุดนี้
  • 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.minorGridlines

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

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

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

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

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

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

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

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

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

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

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

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

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