ฮิสโตแกรม

ภาพรวม

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

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

ตัวอย่าง

นี่คือฮิสโตแกรมความยาวของไดโนเสาร์

ฮิสโตแกรมบอกเราว่าถังขยะที่ใช้มากที่สุดคือ < 10 เมตร และมีไดโนเสาร์เพียงตัวเดียวที่ยาวกว่า 40 เมตร เราสามารถวางเมาส์เหนือแท่งเพื่อค้นพบว่านี่คือพันธุ์ซีสโมซอรัส (ซึ่งอาจเป็นไดโนเสาร์พันธุ์ที่ยิ่งใหญ่มาก นักบรรพชีวินวิทยาไม่มั่นใจ)

โค้ดสำหรับสร้างฮิสโตแกรมแสดงอยู่ด้านล่างนี้ หลังจากกำหนดข้อมูล (ที่นี่ด้วย google.visualization.arrayToDataTable) แผนภูมิจะกำหนดด้วยการเรียก google.visualization.Histogram และวาดด้วยเมธอด draw

<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([
          ['Dinosaur', 'Length'],
          ['Acrocanthosaurus (top-spined lizard)', 12.2],
          ['Albertosaurus (Alberta lizard)', 9.1],
          ['Allosaurus (other lizard)', 12.2],
          ['Apatosaurus (deceptive lizard)', 22.9],
          ['Archaeopteryx (ancient wing)', 0.9],
          ['Argentinosaurus (Argentina lizard)', 36.6],
          ['Baryonyx (heavy claws)', 9.1],
          ['Brachiosaurus (arm lizard)', 30.5],
          ['Ceratosaurus (horned lizard)', 6.1],
          ['Coelophysis (hollow form)', 2.7],
          ['Compsognathus (elegant jaw)', 0.9],
          ['Deinonychus (terrible claw)', 2.7],
          ['Diplodocus (double beam)', 27.1],
          ['Dromicelomimus (emu mimic)', 3.4],
          ['Gallimimus (fowl mimic)', 5.5],
          ['Mamenchisaurus (Mamenchi lizard)', 21.0],
          ['Megalosaurus (big lizard)', 7.9],
          ['Microvenator (small hunter)', 1.2],
          ['Ornithomimus (bird mimic)', 4.6],
          ['Oviraptor (egg robber)', 1.5],
          ['Plateosaurus (flat lizard)', 7.9],
          ['Sauronithoides (narrow-clawed lizard)', 2.0],
          ['Seismosaurus (tremor lizard)', 45.7],
          ['Spinosaurus (spiny lizard)', 12.2],
          ['Supersaurus (super lizard)', 30.5],
          ['Tyrannosaurus (tyrant lizard)', 15.2],
          ['Ultrasaurus (ultra lizard)', 30.5],
          ['Velociraptor (swift robber)', 1.8]]);

        var options = {
          title: 'Lengths of dinosaurs, in meters',
          legend: { position: 'none' },
        };

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

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

การควบคุมสี

นี่คือฮิสโตแกรมของประชากรในประเทศ

มีประเทศต่างๆ กว่า 200 ประเทศที่มีประชากรไม่ถึง 100 ล้านคน และค่อยๆ แพร่หลายไปอย่างมากหลังจากนั้น

ฮิสโตแกรมนี้ใช้ตัวเลือก colors เพื่อดึงข้อมูลเป็นสีเขียว

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['green'],
  };

คุณสามารถระบุสีเป็นชื่อภาษาอังกฤษหรือค่าเลขฐาน 16 ได้ เช่นเดียวกับแผนภูมิ Google ทั้งหมด

การควบคุมที่เก็บข้อมูล

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

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

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

ตัวอย่างนี้ยังแสดงวิธีที่เราสามารถเปลี่ยนสเกลของแกนแนวตั้งไปใช้สเกล "บันทึกมิเรอร์" ซึ่งช่วยในการสร้างแผนภูมิกับข้อมูลที่มีค่ามากๆ น้อยๆ ได้อีกด้วย 

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { lastBucketPercentile: 5 },
    vAxis: { scaleType: 'mirrorLog' }
  };

ตามที่คุณเห็น การนำด้านบนและด้านล่าง 5 เปอร์เซ็นต์ออกจากการคำนวณทำให้ขนาดที่เก็บข้อมูลเท่ากับ 10,000,000 แทนที่จะเท่ากับ 100,000,000 อย่างนั้น ถ้าคุณรู้ตลอดว่าอยากได้ที่เก็บข้อมูลขนาด 10,000,000 ขนาด คุณก็ใช้ histogram.bucketSize ทำแบบนั้นได้

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { bucketSize: 10000000 }
  };

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

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

โปรดทราบว่าเราระบุ chartArea.width เพื่อที่ว่าจำนวนของที่เก็บข้อมูลจะพอดีมากขึ้นโดยไม่ต้องมีอาร์ติแฟกต์ภาพ ตัวอย่างของตัวอย่างนี้มีดังนี้ 

  var options = {
    title: 'Approximating Normal Distribution',
    legend: { position: 'none' },
    colors: ['#4285F4'],

    chartArea: { width: 405 },
    hAxis: {
      ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
    },
    bar: { gap: 0 },

    histogram: {
      bucketSize: 0.01,
      maxNumBuckets: 400,
      minValue: -1,
      maxValue: 1
    }
  };

หลายชุด

ต่อไปนี้คือฮิสโตแกรมของประจุของอนุภาคย่อยของอะตอมตามโมเดลมาตรฐาน

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

ในแผนภูมินี้ เราใช้อนุกรมที่ต่างกัน (และสี) สำหรับอนุภาคย่อยของอะตอมทั้ง 4 ประเภท เราตั้งค่า interpolateNulls เป็น false อย่างชัดแจ้งเพื่อดูแลให้ไม่มีการพล็อตค่า Null (จำเป็นเนื่องจากชุดดังกล่าวมีความยาวไม่เท่ากัน) และเรายังตั้งค่า legend.maxLines ให้เพิ่มบรรทัดใหม่ในคำอธิบายด้วย

  var data = google.visualization.arrayToDataTable([
    ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
    [2/3, -1, 0, 0],
    [2/3, -1, 0, null],
    [2/3, -1, 0, null],
    [-1/3, 0, 1, null],
    [-1/3, 0, -1, null],
    [-1/3, 0, null, null],
    [-1/3, 0, null, null]
  ]);

  var options = {
    title: 'Charges of subatomic particles',
    legend: { position: 'top', maxLines: 2 },
    colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
    interpolateNulls: false,
  };

กำลังโหลด

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

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

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

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

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

การสร้างตารางข้อมูลฮิสโตแกรมมี 2 วิธี หากมีแค่ชุดเดียว

  var data = google.visualization.arrayToDataTable([
    ['Name', 'Number'],
    ['Name 1', number1],
    ['Name 2', number2],
    ['Name 3', number3],
    ...
  ]);

...และเมื่อมีหลายชุด

  var data = google.visualization.arrayToDataTable([
    ['Series Name 1', 'Series Name 2', 'Series Name 3', ...],
    [series1_number1, series2_number1, series3_number1, ...],
    [series1_number2, series2_number2, series3_number2, ...],
    [series1_number3, series2_number3, series3_number3, ...],
    ...
  ]);

ในขณะนี้ยังไม่มีการรองรับบทบาทคอลัมน์ที่เป็นตัวเลือกสำหรับฮิสโตแกรม

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

ชื่อ
animation.duration

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ประเภท: สตริง
ค่าเริ่มต้น: "white"
bar.groupWidth
ความกว้างของกลุ่มแท่ง โดยจะระบุไว้ในรูปแบบใดรูปแบบหนึ่งต่อไปนี้
  • พิกเซล (เช่น 50)
  • เปอร์เซ็นต์ความกว้างที่ใช้ได้ของแต่ละกลุ่ม (เช่น "20%") โดย "100%" หมายความว่ากลุ่มไม่มีช่องว่างระหว่างกลุ่ม
ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตราส่วนทองคำ ประมาณ "61.8%"
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']

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{color: '#333', minSpacing: 20}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: 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

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: 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.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.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.viewWindowMode

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

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

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

ฮาร์ดโค้ดขนาดของแท่งฮิสโตแกรมแต่ละแท่ง แทนที่จะปล่อยให้ถูกกำหนดโดยอัลกอริทึม

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

ละเว้นการแบ่งบางๆ ระหว่างบล็อกของฮิสโตแกรมออก ทำให้กลายเป็นชุดของแท่งแข็ง

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

เมื่อคำนวณขนาดที่เก็บข้อมูลของฮิสโตแกรม ให้ละเว้น lastBucketPercentile เปอร์เซ็นต์ด้านบนและด้านล่าง ค่ายังคงรวมอยู่ในฮิสโตแกรม แต่จะไม่ส่งผลต่อการฝากข้อมูล

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

ขยายช่วงของที่เก็บข้อมูลเพื่อรวมค่านี้

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ - ใช้ข้อมูลขั้นต่ำ
histogram.maxValue

ขยายช่วงของที่เก็บข้อมูลเพื่อรวมค่านี้

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ - ใช้ข้อมูลสูงสุด
histogram.numBucketsRule

วิธีคำนวณจำนวนที่เก็บข้อมูลเริ่มต้น โดยค่าที่เป็นไปได้มีดังนี้

  • 'sqrt' - คำนวณรากที่สองของจำนวนจุดข้อมูล
  • 'sturges' - มาจากการแจกแจงแบบทวินาม สมมติว่ามีการกระจายตามปกติโดยประมาณ
  • 'rice' - ทางเลือกที่ง่ายกว่ากฎของ Sturges
ดูรายละเอียดเพิ่มเติมได้ที่ วิกิพีเดีย - ฮิสโตแกรม: จำนวนถังขยะและความกว้าง

ประเภท: สตริง
ค่าเริ่มต้น:'sqrt'
ส่วนสูง

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

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

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

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

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

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

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

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

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
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.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 ในสเกลเชิงเส้น
ประเภท: สตริง
ค่าเริ่มต้น: 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()

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

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

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