แผนภูมิแท่ง

ภาพรวม

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

ตัวอย่าง

แถบสี

ลองสร้างแผนภูมิความหนาแน่นของโลหะมีค่า 4 ชนิด

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

การเลือกสีมี 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>

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

      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]
          }
        };

การสร้างแผนภูมิแท่งของ Material

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

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

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

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

<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>

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

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

chart.draw(data, options);


...ด้วย URL ต่อไปนี้

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

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

แผนภูมิ Dual-X

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

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

โปรดทราบว่าแกน x ทั้ง 2 แกนของเรามีป้ายกำกับต่างกัน ("พาร์เซก" เทียบกับ "ขนาดที่ปรากฏ") แต่ทุกแกนมีสเกลและเส้นตารางอิสระของตนเอง หากต้องการปรับแต่งลักษณะการทำงานนี้ ให้ใช้ตัวเลือก hAxis.gridlines

ในโค้ดด้านล่าง ตัวเลือก axes และ series ร่วมกันระบุลักษณะที่ปรากฏแบบ Dual-X ของแผนภูมิ ตัวเลือก series จะระบุแกนที่จะใช้กับแต่ละแกน ('distance' และ 'brightness' ซึ่งไม่จำเป็นต้องเกี่ยวข้องกับชื่อคอลัมน์ในตารางข้อมูล) จากนั้นตัวเลือก axes จะทำให้แผนภูมินี้เป็นแผนภูมิคู่ X โดยวางแกน 'apparent magnitude' ที่ด้านบนและแกน 'parsecs' ด้านล่าง 

<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([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var options = {
          width: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
            }
          }
        };

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

แผนภูมิอันดับสูงสุด

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

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

<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);

สำหรับแผนภูมิแท่งวัสดุ ชื่อแพ็กเกจ 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 ค่าในกลุ่มนี้
ประเภทข้อมูล: ตัวเลข ... ตัวเลข
บทบาท: โดเมน ข้อมูล ... ข้อมูล
บทบาทของคอลัมน์ที่ไม่บังคับมีดังนี้ ...

 

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

ชื่อ
animation.duration

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ประเภท: "แนวนอน" หรือ "แนวตั้ง"
ค่าเริ่มต้น: "vertical"
chartArea

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่าง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เส้นแนวโน้มจะถูกระบุแบบทีละชุด ดังนั้นตัวเลือกส่วนใหญ่ของคุณจะมีลักษณะดังนี้ 

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

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

ประเภท: สตริง
ค่าเริ่มต้น: สีชุดเริ่มต้น
trendlines.n.degree

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

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

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

ประเภท: สตริง
ค่าเริ่มต้น: null
trendlines.n.lineWidth

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

สำหรับป้ายกำกับแกนวันที่ นี่คือส่วนย่อยของการจัดรูปแบบวันที่ ชุดรูปแบบ 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 เพื่อวาดเส้นตารางเพียง 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่าง

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

ตัวเลือกนี้รองรับเฉพาะแกน 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

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

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

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

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

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

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

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

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

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

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

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

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

วิธีการ

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

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

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

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

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

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

var cli = chart.getChartLayoutInterface();

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

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

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

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

var cli = chart.getChartLayoutInterface();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เลือกเอนทิตีแผนภูมิที่ระบุ ยกเลิกรายการที่เลือกก่อนหน้า เอนทิตีที่เลือกได้คือแท่ง รายการคำอธิบาย และหมวดหมู่ สำหรับแผนภูมินี้ คุณสามารถเลือกเอนทิตีได้ครั้งละ 1 รายการเท่านั้น Extended description

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

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

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

กิจกรรม

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

ชื่อ
animationfinish

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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