การแสดงภาพ: แผนภูมิฟองอากาศ

ภาพรวม

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

แผนภูมิฟองอากาศใช้เพื่อแสดงภาพชุดข้อมูลที่มี 2 ถึง 4 มิติ ภาพ 2 มิติแรกจะแสดงเป็นภาพพิกัด ภาพสุดท้ายเป็นสี ส่วนภาพที่ 4 เป็นภาพขนาด

ตัวอย่าง

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

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}
      };

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

สีตามตัวเลข

คุณใช้ตัวเลือก colorAxis เพื่อเติมสีลูกโป่งให้ตามสัดส่วนของค่าได้ ดังที่แสดงในตัวอย่างด้านล่าง

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['ID', 'X', 'Y', 'Temperature'],
          ['',   80,  167,      120],
          ['',   79,  136,      130],
          ['',   78,  184,      50],
          ['',   72,  278,      230],
          ['',   81,  200,      210],
          ['',   72,  170,      100],
          ['',   68,  477,      80]
        ]);

        var options = {
          colorAxis: {colors: ['yellow', 'red']}
        };

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

การปรับแต่งป้ายกํากับ

คุณสามารถควบคุมลักษณะแบบอักษร แบบอักษร และสีของลูกโป่งได้ด้วยตัวเลือก bubble.textStyle

ตัวเลือก
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        fontSize: 12,
        fontName: 'Times-Roman',
        color: 'green',
        bold: true,
        italic: true
      }
    }
  };
หน้าเว็บแบบเต็ม
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            fontSize: 12,
            fontName: 'Times-Roman',
            color: 'green',
            bold: true,
            italic: true
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));

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

ป้ายกํากับในแผนภูมิด้านบนนั้นอ่านยากและหนึ่งในสาเหตุคือพื้นที่ว่างรอบป้ายกํากับ เราเรียกสิ่งนี้ว่าอะรา และหากคุณต้องการสร้างแผนภูมิโดยไม่มีแผนภูมิ ให้ตั้ง bubble.textStyle.auraColor เป็น 'none'

ตัวเลือก
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        auraColor: 'none'
      }
    }
  };
หน้าเว็บแบบเต็ม
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            auraColor: 'none',
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));

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

กําลังโหลด

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

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

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

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

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

แถว: แต่ละแถวในตารางแสดงบับเบิลรายการเดียว

คอลัมน์

  คอลัมน์ 0 คอลัมน์ที่ 1 คอลัมน์ที่ 2 คอลัมน์ที่ 3 (ไม่บังคับ) คอลัมน์ที่ 4 (ไม่บังคับ)
จุดประสงค์ในการใช้: รหัส (ชื่อ) ของลูกโป่ง พิกัด X พิกัด Y รหัสชุดหรือค่าที่แสดงถึงสีในระดับโทนสี ทั้งนี้ขึ้นอยู่กับประเภทคอลัมน์ ดังนี้
  • สตริง
    สตริงที่ระบุบับเบิลในชุดเดียวกัน ใช้ค่าเดียวกันเพื่อระบุบับเบิลทั้งหมดที่เป็นของชุดเดียวกัน บับเบิลในชุดเดียวกันจะมีสีเดียวกัน กําหนดค่าชุดหนังสือได้โดยใช้ตัวเลือก series
  • ตัวเลข
    ค่าที่แมปกับสีจริงในสเกลการไล่ระดับสีโดยใช้ตัวเลือก colorAxis
ขนาด ค่าในคอลัมน์นี้จะเชื่อมโยงกับค่าพิกเซลจริงโดยใช้ตัวเลือก sizeAxis
ประเภทข้อมูล: สตริง number number สตริงหรือตัวเลข number

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าพร็อพเพอร์ตี้ภาพของลูกโป่ง

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
ลูกโป่งความทึบแสง

ความทึบแสงของลูกโป่ง โดยที่ 0 คือโปร่งใสทั้งหมด และ 1 คือทึบแสงทั้งหมด

ประเภท: ตัวเลขระหว่าง 0.0 ถึง 1.0
ค่าเริ่มต้น: 0.8
บับเบิล

สีของโรคหลอดเลือดสมอง

ประเภท: สตริง
ค่าเริ่มต้น: '#ccc'
บับเบิลข้อความ

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
colorAxis.minValue

หากมี ให้ระบุค่าต่ําสุดของข้อมูลสีแผนภูมิ ค่าของข้อมูลสีของค่านี้และค่าล่างจะแสดงเป็นสีแรกในช่วง colorAxis.colors

ประเภท: ตัวเลข
ค่าเริ่มต้น: ค่าต่ําสุดของคอลัมน์สีในข้อมูลแผนภูมิ
colorAxis.maxValue

หากมี ให้ระบุค่าสูงสุดสําหรับข้อมูลสีแผนภูมิ ค่าของข้อมูลค่าของค่านี้และสูงกว่าจะแสดงเป็นสีสุดท้ายในช่วง colorAxis.colors

ประเภท: ตัวเลข
ค่าเริ่มต้น: ค่าสูงสุดของคอลัมน์สีในข้อมูลแผนภูมิ
colorAxis.values

หากมี ให้ควบคุมวิธีการเชื่อมโยงค่ากับสี แต่ละค่าเชื่อมโยงกับสีที่สอดคล้องกันในอาร์เรย์ colorAxis.colors ค่าเหล่านี้มีผลกับข้อมูลสีแผนภูมิ ระบายสีตามการไล่ระดับสีของค่าที่ระบุที่นี่ การไม่ระบุค่าสําหรับตัวเลือกนี้เทียบเท่ากับการระบุ [minValue, maxValue]

ประเภท: อาร์เรย์ของตัวเลข
ค่าเริ่มต้น: Null
colorAxis.colors

สีเพื่อกําหนดให้กับค่าในการแสดงภาพ อาร์เรย์ของสตริง ซึ่งเอลิเมนต์แต่ละรายการเป็นสตริงสี HTML เช่น colorAxis: {colors:['red','#004411']} คุณต้องมีอย่างน้อย 2 ค่า การไล่ระดับสีจะรวมค่าทั้งหมดของคุณ รวมถึงค่ากลางที่คํานวณแล้ว โดยสีแรกเป็นค่าที่เล็กที่สุดและสีสุดท้ายเป็นค่าสูงสุด

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

ออบเจ็กต์ที่ระบุสไตล์ของคําอธิบายสีการไล่ระดับสี

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

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

  • "ด้านบน" - เหนือแผนภูมิ
  • "bottom" - ที่อยู่ใต้แผนภูมิ
  • 'in' - ภายในแผนภูมิที่ด้านบน
  • "none" - จะไม่แสดงคําอธิบาย
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: "ด้านบน"
colorAxis.legend.textStyle

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

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

สตริงรูปแบบสําหรับป้ายกํากับตัวเลข นี่เป็นชุดย่อยของชุดรูปแบบ ICU เช่น {numberFormat:'.##'} จะแสดงค่า "10.66", "10.6" และ "10.0" สําหรับค่า 10.666, 10.6 และ 10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่าง:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
ประเภท: อาร์เรย์ขององค์ประกอบ
ค่าเริ่มต้น: อัตโนมัติ
ชื่อ 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 เป็น "สวย" หรือ "ขยายเต็มหน้าจอ"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • color - สีที่จะใช้สําหรับชุดนี้ ระบุสตริงสี HTML ที่ถูกต้อง
  • visibleInLegend - ค่าบูลีน โดยที่ค่าจริงหมายความว่าชุดควรมีรายการคําอธิบาย และเท็จหมายความว่าไม่ควรระบุ ค่าเริ่มต้นคือจริง
ตัวอย่าง:
series: {'Europe': {color: 'green'}}
ประเภท: ออบเจ็กต์ที่มีออบเจ็กต์ที่ซ้อนกัน
ค่าเริ่มต้น: {}
แกนขนาด

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

 {minValue: 0,  maxSize: 20}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
SizeAxis.maxSize

รัศมีสูงสุดของลูกโป่งที่ใหญ่ที่สุดที่เป็นไปได้ หน่วยเป็นพิกเซล

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

ค่าขนาด (ตามที่ปรากฏในข้อมูลแผนภูมิ) ที่จะจับคู่กับ sizeAxis.maxSize ระบบจะครอบตัดค่าที่มีขนาดใหญ่กว่านี้ให้เป็นค่านี้

ประเภท: ตัวเลข
ค่าเริ่มต้น: ค่าสูงสุดของคอลัมน์ขนาดในข้อมูลแผนภูมิ
SizeAxis.minSize

รัศมีขั้นต่ําของลูกโป่งที่เล็กที่สุดที่เป็นไปได้ หน่วยเป็นพิกเซล

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

ค่าขนาด (ตามที่ปรากฏในข้อมูลแผนภูมิ) ที่จะจับคู่กับ sizeAxis.minSize ระบบจะครอบตัดค่าที่น้อยกว่านี้เพื่อค่านี้

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

หากเป็น "จริง" จัดเรียงบับเบิลตามขนาดเพื่อให้บับเบิลขนาดเล็กปรากฏขึ้นเหนือบับเบิลขนาดใหญ่ หากเป็น "เท็จ" ระบบจะจัดเรียงลูกโป่งตามลําดับในตารางข้อมูล

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

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

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

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
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" - เคล็ดลับเครื่องมือจะแสดงเมื่อผู้ใช้เลือกองค์ประกอบ
ประเภท: สตริง
ค่าเริ่มต้น: "โฟกัส"
VAXIS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่าง:

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

พร็อพเพอร์ตี้ vAxis ที่ระบุชื่อสําหรับแกนตั้ง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เมธอด

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

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

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

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

ประเภทการแสดงผล: ออบเจ็กต์
getBoundingBox(id)

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

var cli = chart.getChartLayoutInterface();

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

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

ประเภทการแสดงผล: ออบเจ็กต์
getChartAreaBoundingBox()

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

var cli = chart.getChartLayoutInterface();

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

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

ประเภทการแสดงผล: ออบเจ็กต์
getChartLayoutInterface()

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

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

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

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

ประเภทการแสดงผล: ออบเจ็กต์
getHAxisValue(xPosition, optional_axis_index)

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

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

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

ประเภทการแสดงผล: จํานวน
getImageURI()

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

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

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

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

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

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

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

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

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

ประเภทการแสดงผล: จํานวน
getXLocation(dataValue, optional_axis_index)

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

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

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

ประเภทการแสดงผล: จํานวน
getYLocation(dataValue, optional_axis_index)

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

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

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

ประเภทการแสดงผล: จํานวน
removeAction(actionID)

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

ประเภทการแสดงผล: none
setAction(action)

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

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

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

ประเภทการแสดงผล: none
setSelection()

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

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

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

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

เหตุการณ์

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

ชื่อ
animationfinish

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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