แผนภูมิแท่ง

ภาพรวม

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

ตัวอย่าง

แถบสี

มาความหนาแน่นของโลหะมีค่า 4 ชนิดดังนี้

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

การเลือกสีมีด้วยกัน 3 วิธี และตารางข้อมูลของเราจะแสดงสีเหล่านั้นทั้งหมด ได้แก่ ค่า RGB ชื่อสีภาษาอังกฤษ และการประกาศที่มีลักษณะเหมือน CSS ดังนี้

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

รูปแบบบาร์

บทบาทรูปแบบให้คุณควบคุมลักษณะต่างๆ ของแถบได้ด้วยการประกาศที่คล้ายกับ CSS ดังนี้

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

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

แถบ 2 แถบแรกจะใช้ color เฉพาะ (กลุ่มแรกที่มีชื่อภาษาอังกฤษ แท็บที่สองมีค่า RGB) ไม่ได้เลือก opacity ไว้ ระบบจึงใช้ค่าเริ่มต้น 1.0 (ทึบแสง) นั่นคือเหตุผลที่แถบที่ 2 บดบังตารางกริดอยู่ด้านหลัง ในแถบที่ 3 จะใช้ opacity เท่ากับ 0.2 เพื่อแสดงเส้นตาราง ในแถบที่ 4 แอตทริบิวต์สไตล์ 3 รายการจะใช้ ได้แก่ stroke-color และ stroke-width เพื่อวาดเส้นขอบ และ fill-color เพื่อระบุสีของสี่เหลี่ยมผืนผ้าภายใน แถบด้านขวาสุดจะใช้ stroke-opacity และ fill-opacity เพื่อเลือกความทึบแสงของเส้นขอบ และเติมสี ดังนี้

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

แถบป้ายกํากับ

แผนภูมิมีป้ายกํากับหลายประเภท เช่น ป้ายกํากับเครื่องหมายถูก ป้ายกํากับคําอธิบาย และป้ายกํากับในเคล็ดลับเครื่องมือ ในส่วนนี้ เราจะดูวิธีใส่ป้ายกํากับใน (หรือใกล้) แถบในแผนภูมิแท่ง

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

ในตารางข้อมูล เรากําหนดคอลัมน์ใหม่ด้วย { role: 'annotation' } เพื่อระงับป้ายกํากับแถบ ดังนี้

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

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

วิธีการนี้จะซับซ้อนกว่าที่ควรจะเป็นเล็กน้อยเพราะเราสร้าง DataView เพื่อระบุคําอธิบายประกอบสําหรับแถบแต่ละแถบ

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

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

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

จากนั้นเราอาจโทรคุยกับ calc: getValueAt.bind(undefined, 1)

หากป้ายกํากับมีขนาดใหญ่เกินกว่าจะใส่ลงในแถบทั้งหมด ป้ายกํากับจะแสดงข้างนอก

แผนภูมิแท่งแบบซ้อน

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

สร้างแผนภูมิแท่งแบบซ้อนได้โดยตั้งค่าตัวเลือก isStacked เป็น true

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

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

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

ซ้อนกัน
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
ซ้อนทับ 100%
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

การสร้างแผนภูมิแท่งสําหรับสื่อการสอน

ในปี 2014 Google ได้ประกาศหลักเกณฑ์ที่มีเจตนาที่จะสนับสนุนรูปลักษณ์ทั่วไปในพร็อพเพอร์ตี้และแอป (เช่น แอป Android) ที่ทํางานบนแพลตฟอร์มของ Google เราเรียกการดําเนินการนี้ว่า Material Design เราจะให้บริการแผนภูมิ "หลัก" ของแผนภูมิหลักทั้งหมดของเรา คุณสามารถใช้แผนภูมิได้หากต้องการ

การสร้างแผนภูมิแท่งสําหรับ Material คล้ายกับการสร้างค่าที่เราจะเรียกว่า "แผนภูมิแท่งแบบคลาสสิก" คุณโหลด GoogleVisual API (แม้ว่าจะใช้แพ็กเกจ 'bar' แทนแพ็กเกจ 'corechart') โปรดกําหนดตารางข้อมูล แล้วสร้างออบเจ็กต์ (แต่คลาส google.charts.Bar แทน google.visualization.BarChart)

หมายเหตุ: แผนภูมิเนื้อหาจะใช้งานไม่ได้ใน Internet Explorer เวอร์ชันเก่า (IE8 และเวอร์ชันก่อนหน้านี้ไม่รองรับ SVG ซึ่ง Material Charts ต้องใช้)

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

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

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

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

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

แผนภูมิ Material อยู่ในเบต้า ลักษณะที่ปรากฏและการโต้ตอบส่วนใหญ่ถือเป็นที่สิ้นสุด แต่ตัวเลือกต่างๆ ที่มีในแผนภูมิแบบคลาสสิกยังไม่มีให้บริการ คุณดูรายการตัวเลือกที่ระบบยังไม่รองรับในปัญหานี้ได้

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

chart.draw(data, options);

...ด้วยรูปแบบต่อไปนี้

chart.draw(data, google.charts.Bar.convertOptions(options));

การใช้ google.charts.Bar.convertOptions() ช่วยให้คุณใช้ประโยชน์จากฟีเจอร์บางอย่างได้ เช่น ตัวเลือกค่าที่กําหนดล่วงหน้าของ hAxis/vAxis.format

แผนภูมิคู่

หมายเหตุ: แกน Dual-X ใช้ได้เฉพาะกับแผนภูมิวัสดุ (เช่น ที่มีแพ็กเกจ bar)

บางครั้งคุณอาจต้องการแสดงชุดหนังสือ 2 ชุดในแผนภูมิแท่งที่มีแกน X อิสระ 2 แกน ได้แก่ แกนด้านบนสําหรับชุดหนึ่งและแกนด้านล่างสําหรับชุดอื่น

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Opening Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Chess opening moves',
                   subtitle: 'popularity by percentage' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Percentage'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

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

กําลังโหลด

ชื่อแพ็กเกจ google.charts.load คือ "corechart" ชื่อคลาสของการแสดงภาพคือ google.visualization.BarChart 

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

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

สําหรับแผนภูมิแท่งของ Material ชื่อแพ็กเกจของ google.charts.load คือ "bar" ชื่อคลาสของการแสดงภาพคือ google.charts.Bar 

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

  var chart = new google.charts.Bar(container);

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

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

คอลัมน์

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

 

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

ชื่อ
ภาพเคลื่อนไหว.ระยะเวลา

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

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

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

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

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

ประเภท: บูลีน
ค่าเริ่มต้น เท็จ
คําอธิบายประกอบตลอดเวลา

ในแผนภูมิแผนภูมิแท่งและคอลัมน์ หากตั้งค่าเป็น true จะวาดคําอธิบายประกอบทั้งหมดนอกแถบ/คอลัมน์

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
คําอธิบายประกอบ datum
สําหรับแผนภูมิที่รองรับหมายเหตุ ออบเจ็กต์ annotations.datum ช่วยให้คุณลบล้างตัวเลือกของ Google Charts สําหรับคําอธิบายประกอบที่ให้ไว้สําหรับองค์ประกอบข้อมูลแต่ละรายการได้ (เช่น ค่าที่แสดงกับแท่งแต่ละแท่งในแผนภูมิแท่ง) คุณสามารถควบคุมสีด้วย annotations.datum.stem.color ความยาวก้านจับที่มี annotations.datum.stem.length และรูปแบบด้วย annotations.datum.style
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: สีคือ "สีดํา" ความยาวคือ 12 รูปแบบคือ "จุด"
คําอธิบายประกอบ.โดเมน
สําหรับแผนภูมิที่รองรับหมายเหตุ ออบเจ็กต์ annotations.domain จะช่วยให้คุณลบล้างตัวเลือกของ Google Charts สําหรับคําอธิบายประกอบที่ระบุให้โดเมนได้ (แกนหลักของแผนภูมิ เช่น แกน X ในแผนภูมิเส้นทั่วไป) คุณสามารถควบคุมสีด้วย annotations.domain.stem.color ความยาวก้านจับที่มี annotations.domain.stem.length และรูปแบบด้วย annotations.domain.style
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: สีคือ "สีดํา" ความยาวคือ 5 รูปแบบคือ "จุด"
ข้อมูลรูปแบบคําอธิบายประกอบ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แผนภูมิแท่งใน สื่อการสอน แผนภูมิแท่ง ในแนวตั้งหรือแนวนอน ตัวเลือกนี้ไม่มีผลต่อแผนภูมิแท่งแบบคลาสสิกหรือแผนภูมิคอลัมน์แบบคลาสสิก

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

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

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

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

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

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

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

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

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

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

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

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

ประเภท: สตริง
ค่าเริ่มต้น: Null
ชื่อแผนภูมิ

สําหรับแผนภูมิวัสดุ ตัวเลือกนี้จะระบุชื่อ

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

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

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

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

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

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

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

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

ฟีเจอร์นี้เป็นแบบทดลองและอาจมีการเปลี่ยนแปลงในรุ่นในอนาคต

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

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
เครื่องมือสํารวจ

เครื่องมือสํารวจ Google Charts รองรับการดําเนินการ 3 รายการต่อไปนี้

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

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

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

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

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

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

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

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

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

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1.5
โฟกัสเป้าหมาย

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: -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.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 ที่ทําให้แกนแนวนอนเป็นสเกลลอการิทึม (ต้องมีค่าทั้งหมดเป็นบวก) ตั้งค่าเป็นจริงสําหรับใช่

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวเลือก 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
ดัชนีหน้า

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ดูตัวเลือกต่างๆ ของ annotations เพื่อดูรายการที่ปรับแต่งได้ทั้งหมด

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

แสดงเส้นแนวโน้มในแผนภูมิในแผนภูมิที่รองรับ โดยค่าเริ่มต้น เราจะใช้เส้นแนวโน้มเชิงเส้น แต่ปรับแต่งด้วยตัวเลือก trendlines.n.type ได้

เราระบุเทรนด์ไว้ตามชุดรายการ ดังนั้นตัวเลือกส่วนใหญ่ของคุณจะมีลักษณะดังนี้ 

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
Trendslines.n.color

สีของเส้นแนวโน้ม แสดงเป็นชื่อสีภาษาอังกฤษหรือสตริงฐานสิบหก

ประเภท: สตริง
ค่าเริ่มต้น: สีเริ่มต้นของชุด
Trendylines.n.องศา

สําหรับ เส้นแนวโน้ม ของ type: 'polynomial', องศาของพหุนาม (2 สําหรับกําลังสอง, 3 สําหรับลูกบาศก์ และอื่นๆ) (องศาเริ่มต้นอาจเปลี่ยนจาก 3 เป็น 2 ใน Google Charts รุ่นที่กําลังจะเปิดตัว)

ประเภท: ตัวเลข
ค่าเริ่มต้น: 3
Trendslines.n.labelInLegend

หากตั้งค่า เส้นแนวโน้ม จะแสดงในคําอธิบายเป็นสตริงนี้

ประเภท: สตริง
ค่าเริ่มต้น: Null
เส้นแนวโน้ม.n.lineWidth

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 2
เส้นแนวโน้ม.p.city

ความโปร่งใสของเส้นแนวโน้มตั้งแต่ 0.0 (โปร่งใส) ถึง 1.0 (ทึบ)

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1.0
เส้นแนวโน้ม.n.pointSize

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
Trendslines.n.points ที่มองเห็นได้

เส้นแนวโน้ม เกิดจากการประทับจุดจํานวนมากในแผนภูมิ ตัวเลือก pointsVisible ของเส้นแนวโน้มเป็นตัวกําหนดว่าคะแนนของเส้นแนวโน้มนั้นๆ จะปรากฏหรือไม่

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
เส้นแนวโน้ม.n.showR2

จะแสดงสัมประสิทธิ์การตัดสินใจในเคล็ดลับเครื่องมือคําอธิบายหรือเส้นแนวโน้มหรือไม่

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

ไม่ว่า เส้นแนวโน้ม คือ 'linear' (ค่าเริ่มต้น), 'exponential' หรือ 'polynomial'

ประเภท: สตริง
ค่าเริ่มต้น: เชิงเส้น
เส้นแนวโน้ม.n.visibleInLegend

สมการเส้นแนวโน้มจะปรากฏในคําอธิบายหรือไม่ (จะปรากฏในเคล็ดลับเครื่องมือเส้นแนวโน้ม)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ประเภท: อาร์เรย์ขององค์ประกอบ
ค่าเริ่มต้น: อัตโนมัติ
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 จะลบล้างพร็อพเพอร์ตี้นี้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ไม่สนใจเมื่อ 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()

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

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

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