แผนภูมิแท่งเทียน

ภาพรวม

แผนภูมิแท่งเทียนแบบอินเทอร์แอกทีฟ

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

ตัวอย่าง

<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([
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, 66, 22, 15]
      // Treat first row as data as well.
    ], true);

    var options = {
      legend:'none'
    };

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

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

แผนภูมิ Waterfall

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

ในโค้ดด้านล่าง เราจะลบ Wiwi ยอดนิยมโดยให้ค่าเดียวกันในคอลัมน์ที่ 1 และ 2 ส่วน Wicks ด้านล่างมีค่าเดียวกันในคอลัมน์ที่ 3 และ 4 เราตั้งค่า bar.groupWidth เป็น '100%' เพื่อนําการเว้นวรรคระหว่างแท่งออก

<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([
          ['Mon', 28, 28, 38, 38],
          ['Tue', 38, 38, 55, 55],
          ['Wed', 55, 55, 77, 77],
          ['Thu', 77, 77, 66, 66],
          ['Fri', 66, 66, 22, 22]
          // Treat the first row as data.
        ], true);

        var options = {
          legend: 'none',
          bar: { groupWidth: '100%' }, // Remove space between bars.
          candlestick: {
            fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
            risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
          }
        };

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

ปัจจุบันยังไม่มีวิธีติดป้ายกํากับได้ง่ายๆ ตัวเลือกที่ดีที่สุดคือการใช้การวางซ้อน

กําลังโหลด

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

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

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

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

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

คอลัมน์อย่างน้อย 5 คอลัมน์ โดยคอลัมน์แรกกําหนดค่าแกน X หรือป้ายกํากับกลุ่ม และคอลัมน์ข้อมูลแต่ละคอลัมน์จากทั้ง 4 คอลัมน์หลังจากนั้นจะกําหนดชุดที่ต่างกัน

  • Col 0: สตริง (cretete) ใช้เป็นป้ายกํากับกลุ่มบนแกน X หรือตัวเลข วันที่ วันที่ หรือช่วงเวลาของวัน (ต่อเนื่อง) เป็นค่าบนแกน X
  • ข้อ 1: ตัวเลขที่ระบุค่าต่ํา/ต่ําสุดของเครื่องหมายนี้ นี่คือส่วนล่างสุดของเส้นกึ่งกลางแท่งเทียน ป้ายกํากับคอลัมน์จะใช้เป็นป้ายกํากับชุดหนังสือในคําอธิบาย (แต่ระบบจะไม่สนใจป้ายกํากับของคอลัมน์อื่นๆ)
  • ข้อ 2: ตัวเลขที่ระบุค่าเปิด/เริ่มต้นของเครื่องหมายนี้ นี่คือขอบแนวตั้งที่ 1 ของแท่งเทียน หากน้อยกว่าค่าคอลัมน์ 3 ระบบจะเติมเทียน มิฉะนั้นจะกลวง
  • ข้อ 3: ตัวเลขที่ระบุค่าปิด/เครื่องหมายสุดท้ายของเครื่องหมายนี้ นี่คือเส้นขอบแนวตั้งที่ 2 ของเทียน หากน้อยกว่าค่าคอลัมน์ 2 เทียนจะเป็นโพรง ไม่เช่นนั้นจะเติมเทียน
  • ข้อ 4: ตัวเลขที่ระบุค่าสูงสุด/ค่าสูงสุดของเครื่องหมายนี้ นี่คือส่วนบนสุดของเส้นกึ่งกลางแท่งเทียน
  • Col 5 [ไม่บังคับ]: คอลัมน์เคล็ดลับเครื่องมือหรือรูปแบบสําหรับเทียน
คุณเพิ่มชุดคอลัมน์ 4 คอลัมน์ซึ่งมีโครงสร้างที่คล้ายกันลงในคอลัมน์ที่ 1-4 เพื่อให้มีชุดหนังสือมากขึ้นได้ ชุดแต่ละชุดแสดงถึงแท่งเทียนอีกชุด จํานวนคอลัมน์ทั้งหมดควรเท่ากับ 4 เท่าของจํานวนชุดหนังสือบวก 1 คอลัมน์ (และคอลัมน์เคล็ดลับเครื่องมือที่ไม่บังคับ)

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

ชื่อ
เป้าหมายการรวม
วิธีการรวมข้อมูลประเภทต่างๆ ลงในเคล็ดลับเครื่องมือ
  • 'category': จัดกลุ่มข้อมูลที่เลือกตาม x-value
  • 'series': จัดกลุ่มข้อมูลที่เลือกตามชุดหนังสือ
  • 'auto': จัดกลุ่มข้อมูลที่เลือกตาม x-value หากการเลือกทั้งหมดมีค่า x-value เหมือนกันและตามชุดรายการ
  • 'none': แสดงเคล็ดลับเครื่องมือเพียงรายการเดียวต่อการเลือก
โดยปกติแล้วจะใช้ 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',
};
    
ประเภท: สตริง
ค่าเริ่มต้น: "อัตโนมัติ"
ภาพเคลื่อนไหว.ระยะเวลา

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
การปรับขนาดภาพเคลื่อนไหว

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

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

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

ประเภท: บูลีน
ค่าเริ่มต้น เท็จ
แกนชื่อตําแหน่ง

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

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

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

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

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

ประเภท: สตริง
ค่าเริ่มต้น: "#666"
พื้นหลังของสี.ความกว้างความกว้าง

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

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

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

ประเภท: สตริง
ค่าเริ่มต้น: "สีขาว"
ความกว้างของกลุ่ม
ความกว้างของกลุ่มเทียน ซึ่งอยู่ในรูปแบบใดรูปแบบหนึ่งต่อไปนี้
  • พิกเซล (เช่น 50)
  • เปอร์เซ็นต์ความกว้างที่ใช้ได้สําหรับแต่ละกลุ่ม (เช่น "20%") โดย "100%" หมายความว่ากลุ่มไม่มีช่องว่างระหว่างกลุ่มเหล่านั้น
ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตราส่วนทองคํา ประมาณ '61.8%'
candle Stick.hollowIsRising

หากเป็น "จริง" เทียนที่พุ่งสูงขึ้นจะดูเป็นโพรงและเทียนที่ตกลงจะปรากฏเป็นสีทึบไม่เป็นเช่นนั้น

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ (จะเปลี่ยนเป็นจริงในภายหลัง)
candlestick.fallingColor.fill

สีเติมของเทียนซึ่งเป็นสตริงสี HTML

ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ (ขึ้นอยู่กับสีของชุดหนังสือและชุดโปร่ง)
ท่าแคนเดิลสติก

สีเส้นชัยของเทียนที่ตกหล่นเป็นสตริงสี HTML

ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ (สีชุด)
candlestick.fallingColor.scoreWidth

ความกว้างของเส้นชัยของเทียนที่ลอยอยู่ เป็นสตริงสี HTML

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

สีเติมของเทียนที่กําลังเพิ่มขึ้นเป็นสตริงสี HTML

ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ (สีขาวหรือสีของชุดหนังสือ ขึ้นอยู่กับ HollowIsRising)
candle Stick.risingColor.Stack

สีเส้นขีดของเทียนที่เพิ่มขึ้นเป็นสตริงสี HTML

ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ (สีชุดหรือสีขาว ขึ้นอยู่กับ hollowIsRising)
candle Stick.risingColor.strWidth

ความกว้างของเส้นของเทียนที่กําลังเพิ่มขึ้นเป็นสตริงสี HTML

ประเภท: ตัวเลข
ค่าเริ่มต้น: 2
แผนภูมิพื้นที่

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

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
แผนภูมิพื้นที่พื้นหลังพื้นหลัง
สีพื้นหลังของแผนภูมิ เมื่อใช้สตริง อาจเป็นสตริงเลขฐานสิบหก (เช่น "#fdc") หรือชื่อสีภาษาอังกฤษ เมื่อใช้ออบเจ็กต์ คุณจะระบุพร็อพเพอร์ตี้ต่อไปนี้ได้
  • stroke: สีที่ระบุเป็นสตริงเลขฐานสิบหกหรือชื่อสีภาษาอังกฤษ
  • strokeWidth: หากวาด ให้วาดเส้นขอบรอบๆ พื้นที่แผนภูมิของความกว้างที่ระบุ (และใช้สี stroke)
ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: "สีขาว"
แผนภูมิพื้นที่ซ้าย

วิธีการวาดแผนภูมิจากเส้นขอบด้านซ้าย

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

วิธีการวาดแผนภูมิจากเส้นขอบด้านบน

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

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

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

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

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

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

ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: สีเริ่มต้น
เปิดใช้การโต้ตอบ

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

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
โฟกัสเป้าหมาย

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

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

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

ประเภท: สตริง
ค่าเริ่มต้น: 'datum'
ขนาดแบบอักษร

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
ชื่อแบบอักษร

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

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

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

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

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

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

เส้นฐานสําหรับแกนนอน

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

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

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

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

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

ทิศทางที่ค่าในแกนนอนเติบโตขึ้น ระบุ -1 เพื่อกลับลําดับค่า

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

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

สําหรับป้ายกํากับแกนตัวเลข นี่คือชุดย่อยของรูปแบบ 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.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 เพื่อวาดตารางกริดได้เพียงรายการเดียว หรือ 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.multi

ค่าตารางกริดและเครื่องหมายถูกทั้งหมดต้องเป็นหลายค่าของตัวเลือกนี้ โปรดทราบว่าจะไม่นับ 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.interval

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

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

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

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

เช่นเดียวกับ gridlines.multiple หลัก

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

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: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"

ประเภท: สตริง
ค่าเริ่มต้น: "ออก"
รูปแบบข้อความ hAxis.text

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

{ 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 สําหรับค่าเครื่องหมายถูก และพร็อพเพอร์ตี้ 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.titleText

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

{ 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 เป็น "ออก" (ซึ่งเป็นค่าเริ่มต้น) ค่าเริ่มต้นคือ false สําหรับวันที่และเวลา

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

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

ประเภท: หมายเลข, -90-90
ค่าเริ่มต้น: 30
hAxis.maxAlternation

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

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

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

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

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

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

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

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

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

ตัวเลือกนี้ใช้ได้กับแกน continuous เท่านั้น

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

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

ตัวเลือกนี้ใช้ได้กับแกน continuous เท่านั้น

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

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

  • "pretty" - ปรับขนาดค่าแนวนอนเพื่อให้ค่าของข้อมูลสูงสุดและต่ําสุดแสดงผลเล็กน้อยทางด้านซ้ายและขวาของพื้นที่แผนภูมิ หน้าต่างมุมมองจะขยายเป็นตารางกริดหลักที่ใกล้ที่สุดสําหรับตัวเลข หรือตารางกริดย่อยที่ใกล้ที่สุดสําหรับวันที่และเวลา
  • "maximized" - ปรับขนาดค่าแนวนอนเพื่อให้ค่าสูงสุดของข้อมูลและค่าขั้นต่ําสัมผัสทางซ้ายและขวาของพื้นที่แผนภูมิ ซึ่งจะทําให้ละเว้น 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 <= index < max จะแสดง

ไม่สนใจเมื่อ hAxis.viewWindowMode เป็น "สวย" หรือ "ขยายเต็มหน้าจอ"

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
hAxis.viewWindow.min
  • สําหรับแกน continuous ให้ทําดังนี้

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

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

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

ไม่สนใจเมื่อ hAxis.viewWindowMode เป็น "สวย" หรือ "ขยายเต็มหน้าจอ"

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

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

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

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

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

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

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

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

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

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

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

ปัจจุบันตัวเลือกนี้ใช้งานได้เฉพาะเมื่อตํานาน 'ตําแหน่ง' เป็น "ด้านบน"

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
ดัชนีหน้า

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
ตําแหน่ง.

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

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

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

{ 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' ให้หมุนแกนของแผนภูมิเพื่อให้แผนภูมิ (เช่น) กลายเป็นแผนภูมิแท่ง และแผนภูมิพื้นที่จะเติบโตไปทางขวาแทนที่จะขึ้น

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

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

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

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
โหมดการเลือก

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

ประเภท: สตริง
ค่าเริ่มต้น: 'เดี่ยว'
ซีรีส์

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

  • color - สีที่จะใช้สําหรับชุดนี้ ระบุสตริงสี HTML ที่ถูกต้อง
  • fallingColor.fill - ลบล้างค่า candlestick.fallingColor.fill ทั่วโลกของชุดนี้
  • fallingColor.stroke - ลบล้างค่า candlestick.fallingColor.stroke ทั่วโลกของชุดนี้
  • fallingColor.strokeWidth - ลบล้างค่า candlestick.fallingColor.strokeWidth ทั่วโลกของชุดนี้
  • labelInLegend - คําอธิบายชุดหนังสือที่ต้องการให้ปรากฏในคําอธิบายแผนภูมิ
  • risingColor.fill - ลบล้างค่า candlestick.risingColor.fill ทั่วโลกของชุดนี้
  • risingColor.stroke - ลบล้างค่า candlestick.risingColor.stroke ทั่วโลกของชุดนี้
  • risingColor.strokeWidth - ลบล้างค่า candlestick.risingColor.strokeWidth ทั่วโลกของชุดนี้
  • targetAxisIndex - แกนอื่นที่จะกําหนดชุดนี้ โดยที่ 0 คือแกนเริ่มต้น และ 1 คือแกนที่ตรงข้ามกัน ค่าเริ่มต้นคือ 0 ตั้งค่าเป็น 1 เพื่อกําหนดแผนภูมิที่จะแสดงชุดต่างๆ กับแกนอื่น จัดสรรอย่างน้อย 1 ชุดให้กับแกนเริ่มต้น คุณสามารถกําหนดสเกลที่แตกต่างกันสําหรับแกนต่างๆ ได้
  • visibleInLegend - ค่าบูลีน โดยที่ค่าจริงหมายความว่าชุดควรมีรายการคําอธิบาย และเท็จหมายความว่าไม่ควรระบุ ค่าเริ่มต้นคือจริง

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

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

ธีมคือชุดค่าตัวเลือกที่กําหนดไว้ล่วงหน้าซึ่งทํางานร่วมกันเพื่อให้ทํางานตามแผนภูมิหรือเอฟเฟกต์ภาพที่ต้องการ ตอนนี้มีเพียงธีมเดียวที่ใช้ได้

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

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

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

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

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

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

{ 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
troubleshooter.ignoreBounds

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

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

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

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

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

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

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

ประเภท: บูลีน
ค่าเริ่มต้น: อัตโนมัติ
troubleshooter.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>}
เคล็ดลับเครื่องมือ

การโต้ตอบของผู้ใช้ที่ทําให้เคล็ดลับเครื่องมือแสดง

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

ระบุพร็อพเพอร์ตี้สําหรับแกนแนวตั้งแต่ละตัว หากแผนภูมิมีแกนแนวตั้งหลายแกน ออบเจ็กต์ย่อยแต่ละรายการเป็นออบเจ็กต์ 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'

ประเภท: ตัวเลข
ค่าเริ่มต้น: "ดํา"
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.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 เพื่อวาดตารางกริดได้เพียงรายการเดียว หรือ 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.multi

ค่าตารางกริดและเครื่องหมายถูกทั้งหมดต้องเป็นหลายค่าของตัวเลือกนี้ โปรดทราบว่าจะไม่นับ 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

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

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

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

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

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

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

เช่นเดียวกับ 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 จะได้รับการพล็อตในสเกลเชิงเส้น

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

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

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

ประเภท: สตริง
ค่าเริ่มต้น: "ออก"
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

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

  • "ttty" - ปรับขนาดค่าแนวตั้งเพื่อให้ค่าสูงสุดของข้อมูลและค่าขั้นต่ําแสดงเล็กน้อยที่ด้านล่างและด้านบนของพื้นที่แผนภูมิ หน้าต่างมุมมองจะขยายเป็นตารางกริดหลักที่ใกล้ที่สุดสําหรับตัวเลข หรือตารางกริดย่อยที่ใกล้ที่สุดสําหรับวันที่และเวลา
  • "maximized" - ปรับขนาดค่าแนวตั้งเพื่อให้ค่าสูงสุดและค่าต่ําสุดของข้อมูลสัมผัสที่ด้านบนและด้านล่างของพื้นที่แผนภูมิ ซึ่งจะทําให้ละเว้น 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 เป็น "สวย" หรือ "ขยายเต็มหน้าจอ"

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

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

ไม่สนใจเมื่อ vAxis.viewWindowMode เป็น "สวย" หรือ "ขยายเต็มหน้าจอ"

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

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

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

เมธอด

วิธีการ
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()

แสดงผลอาร์เรย์ของเอนทิตีแผนภูมิที่เลือก เอนทิตีที่เลือกได้คือเทียนเทียน รายการสัญลักษณ์ และหมวดหมู่ สําหรับแผนภูมินี้ คุณจะเลือกเอนทิตีได้เพียงรายการเดียวในช่วงเวลาที่กําหนด 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 ของพิกเซล 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()

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

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

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