หน้านี้ได้รับการแปลโดย Cloud Translation API

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

ภาพรวม

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

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

ตัวอย่าง

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

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

ป้ายกำกับในแผนภูมิด้านบนอ่านยาก และหนึ่งในสาเหตุคือพื้นที่สีขาวรอบๆ วิธีนี้เรียกว่า aura และหากไม่ต้องการให้แผนภูมิแสดงโดยไม่มีค่า คุณสามารถตั้งค่า 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	รหัสชุดหรือค่าที่แทนสีในสเกลการไล่ระดับสี ขึ้นอยู่กับประเภทของคอลัมน์ ดังนี้ string สตริงที่ระบุลูกโป่งในชุดเดียวกัน ใช้ค่าเดียวกันเพื่อระบุฟองอากาศทั้งหมดที่อยู่ในชุดเดียวกัน ฟองอากาศในชุดเดียวกันก็จะได้รับการกำหนดสีเดียวกัน คุณกำหนดค่าชุดหนังสือได้โดยใช้ตัวเลือก `series` ตัวเลข ค่าที่แมปกับสีจริงในสเกลการไล่ระดับสีโดยใช้ตัวเลือก `colorAxis`	ขนาด: ค่าในคอลัมน์นี้จะแมปกับค่าพิกเซลจริงโดยใช้ตัวเลือก `sizeAxis`
ประเภทข้อมูล:	string	ตัวเลข	ตัวเลข	สตริงหรือหมายเลข	ตัวเลข

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

ชื่อ
animation.duration	ระยะเวลาของภาพเคลื่อนไหวเป็นมิลลิวินาที โปรดดูรายละเอียดในเอกสารประกอบเกี่ยวกับภาพเคลื่อนไหว ประเภท: ตัวเลข ค่าเริ่มต้น: 0
animation.easing	ฟังก์ชันการค่อยๆ เปลี่ยนที่ใช้กับภาพเคลื่อนไหว โดยมีตัวเลือกดังต่อไปนี้ "เชิงเส้น" - ความเร็วคงที่ "เข้า" - ค่อยๆ เริ่ม - เริ่มต้นช้าๆ แล้วเร่งความเร็ว "out" - ค่อยๆ ออก - เริ่มต้นอย่างรวดเร็วและช้าลง 'inAndOut' - ค่อยๆ เข้าและออก - เริ่มช้าๆ เร่งความเร็ว แล้วลดความเร็ว ประเภท: สตริง ค่าเริ่มต้น: "เชิงเส้น"
animation.startup	กำหนดว่าแผนภูมิจะเคลื่อนไหวเมื่อวาดครั้งแรกหรือไม่ หากเป็น `true` แผนภูมิจะเริ่มต้นที่เกณฑ์พื้นฐานและเคลื่อนไหวเป็นสถานะสุดท้าย ประเภท: บูลีน ค่าเริ่มต้น false
axisTitlesPosition	ตำแหน่งที่จะวางชื่อแกนเมื่อเทียบกับพื้นที่แผนภูมิ ค่าที่รองรับ in - วาดชื่อแกนภายในพื้นที่แผนภูมิ out - วาดชื่อแกนนอกพื้นที่แผนภูมิ ไม่มี - ไม่ใส่ชื่อแกน ประเภท: สตริง ค่าเริ่มต้น: "out"
backgroundColor	สีพื้นหลังสำหรับพื้นที่หลักของแผนภูมิ อาจเป็นสตริงสี HTML แบบง่าย เช่น `'red'` หรือ `'#00cc00'` หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้ ประเภท: สตริงหรือออบเจ็กต์ ค่าเริ่มต้น: "white"
backgroundColor.stroke	สีเส้นขอบของแผนภูมิ เป็นสตริงสี HTML ประเภท: สตริง ค่าเริ่มต้น: "#666"
backgroundColor.strokeWidth	ความกว้างของขอบเป็นพิกเซล ประเภท: ตัวเลข ค่าเริ่มต้น: 0
backgroundColor.fill	สีเติมแผนภูมิ เป็นสตริงสี HTML ประเภท: สตริง ค่าเริ่มต้น: "white"
ลูกโป่ง	ออบเจ็กต์ที่มีสมาชิกสำหรับกำหนดค่าคุณสมบัติการมองเห็นของลูกโป่ง ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
bubble.opacity	ความทึบแสงของลูกโป่ง โดย 0 หมายถึงโปร่งแสงเต็มที่ และ 1 หมายถึงทึบแสงเต็มที่ ประเภท: ตัวเลขระหว่าง 0.0 ถึง 1.0 ค่าเริ่มต้น: 0.8
bubble.stroke	สีของเส้นของลูกโป่ง ประเภท: สตริง ค่าเริ่มต้น: '#ccc'
bubble.textStyle	วัตถุที่ระบุรูปแบบข้อความลูกโป่ง ออบเจ็กต์มีรูปแบบดังนี้ {color: <string>, fontName: <string>, fontSize: <number>} `color` อาจเป็นสตริงสี HTML ใดก็ได้ เช่น `'red'` หรือ `'#00cc00'` ดู `fontName` และ `fontSize` ด้วย ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
chartArea	ออบเจ็กต์ที่มีสมาชิกเพื่อกำหนดค่าตำแหน่งและขนาดของพื้นที่แผนภูมิ (บริเวณที่มีการวาดแผนภูมิ ยกเว้นแกนและคำอธิบาย) ระบบรองรับ 2 รูปแบบคือ ตัวเลขหรือตัวเลขตามด้วย % ตัวเลขง่ายๆ คือค่าที่มีหน่วยเป็นพิกเซล ตัวเลขตามด้วย % คือเปอร์เซ็นต์ เช่น `chartArea:{left:20,top:0,width:'50%',height:'75%'}` ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
chartArea.backgroundColor	สีพื้นหลังของพื้นที่แผนภูมิ เมื่อใช้สตริง อาจเป็นสตริงเลขฐาน 16 (เช่น "#fdc') หรือชื่อสีภาษาอังกฤษ เมื่อมีการใช้ออบเจ็กต์ จะมีพร็อพเพอร์ตี้ต่อไปนี้ให้ใช้งาน `stroke`: สีที่ระบุเป็นสตริงเลขฐานสิบหกหรือชื่อสีภาษาอังกฤษ `strokeWidth`: หากระบุ จะวาดเส้นขอบรอบพื้นที่แผนภูมิตามความกว้างที่ระบุ (และมีสีของ `stroke`) ประเภท: สตริงหรือออบเจ็กต์ ค่าเริ่มต้น: "white"
chartArea.left	ระยะห่างในการวาดแผนภูมิจากเส้นขอบด้านซ้าย ประเภท: ตัวเลขหรือสตริง ค่าเริ่มต้น: อัตโนมัติ
chartArea.top	ระยะห่างในการวาดแผนภูมิจากเส้นขอบด้านบน ประเภท: ตัวเลขหรือสตริง ค่าเริ่มต้น: อัตโนมัติ
chartArea.width	ความกว้างพื้นที่แผนภูมิ ประเภท: ตัวเลขหรือสตริง ค่าเริ่มต้น: อัตโนมัติ
chartArea.height	ความสูงพื้นที่แผนภูมิ ประเภท: ตัวเลขหรือสตริง ค่าเริ่มต้น: อัตโนมัติ
สี	สีที่ใช้สำหรับองค์ประกอบของแผนภูมิ อาร์เรย์ของสตริง โดยที่องค์ประกอบแต่ละรายการเป็นสตริงสี HTML เช่น `colors:['red','#004411']` ประเภท: อาร์เรย์ของสตริง ค่าเริ่มต้น: สีเริ่มต้น
colorAxis	ออบเจ็กต์ที่ระบุการแมประหว่างค่าคอลัมน์สีกับสีหรือสเกลการไล่ระดับสี หากต้องการระบุคุณสมบัติของออบเจ็กต์นี้ คุณสามารถใช้รูปแบบลิเทอรัลของออบเจ็กต์ดังที่แสดงไว้ที่นี่ {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	ตำแหน่งของคำอธิบาย อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้ "top" - เหนือแผนภูมิ "bottom" - ใต้แผนภูมิ "in" - ภายในแผนภูมิที่ด้านบน "none" - ไม่แสดงคำอธิบาย ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: "top"
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 ประเภท: สตริง ค่าเริ่มต้น: อัตโนมัติ
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
fontSize	ขนาดแบบอักษรเริ่มต้นเป็นพิกเซลของข้อความทั้งหมดในแผนภูมิ คุณลบล้างค่านี้ได้โดยใช้พร็อพเพอร์ตี้สำหรับเอลิเมนต์ของแผนภูมิที่เฉพาะเจาะจง ประเภท: ตัวเลข ค่าเริ่มต้น: อัตโนมัติ
fontName	แบบอักษรเริ่มต้นสำหรับข้อความทั้งหมดในแผนภูมิ คุณลบล้างค่านี้ได้โดยใช้พร็อพเพอร์ตี้สำหรับเอลิเมนต์ของแผนภูมิที่เฉพาะเจาะจง ประเภท: สตริง ค่าเริ่มต้น: 'สวัสดิการ'
forceIFrame	วาดแผนภูมิภายในเฟรมแบบอินไลน์ (โปรดทราบว่าใน IE8 ตัวเลือกนี้จะถูกละเว้น และแผนภูมิ IE8 ทั้งหมดวาดใน i-frame) ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
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.textPosition	ตำแหน่งของข้อความแกนแนวนอนที่สัมพันธ์กับพื้นที่แผนภูมิ ค่าที่รองรับ: "out", "in", "none" ประเภท: สตริง ค่าเริ่มต้น: "out"
hAxis.textStyle	วัตถุที่ระบุรูปแบบข้อความของแกนแนวนอน ออบเจ็กต์มีรูปแบบดังนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` อาจเป็นสตริงสี HTML ใดก็ได้ เช่น `'red'` หรือ `'#00cc00'` ดู `fontName` และ `fontSize` ด้วย ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
hAxis.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" ประเภท: ตัวเลข ค่าเริ่มต้น: อัตโนมัติ
ส่วนสูง	ความสูงของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มีอยู่
คำอธิบาย	ออบเจ็กต์ที่มีสมาชิกสำหรับกำหนดค่าแง่มุมต่างๆ ของคำอธิบาย หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบลิเทอรัลของออบเจ็กต์ได้ดังที่แสดงที่นี่ {position: 'top', textStyle: {color: 'blue', fontSize: 16}} ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
legend.alignment	การปรับแนวคำอธิบาย อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้ "start" - สอดคล้องกับจุดเริ่มต้นของพื้นที่ที่จัดสรรให้กับคำอธิบาย "center" - อยู่กึ่งกลางในพื้นที่ที่จัดสรรไว้สำหรับคำอธิบาย "end" - ปรับแนวไปยังจุดสิ้นสุดของพื้นที่ที่จัดสรรให้กับคำอธิบาย จุดเริ่มต้น ตรงกลาง และสิ้นสุดจะสัมพันธ์กับรูปแบบในคำอธิบายแนวตั้งหรือแนวนอน เช่น ในคำอธิบาย "ขวา" "เริ่มต้น" และ "สิ้นสุด" จะอยู่ที่ด้านบนและด้านล่างตามลำดับ สำหรับคำอธิบาย "ด้านบน" "เริ่มต้น" และ "สิ้นสุด" จะอยู่ทางด้านซ้ายและขวาของพื้นที่ตามลำดับ ค่าเริ่มต้นจะขึ้นอยู่กับตำแหน่งของคำอธิบาย สำหรับคำอธิบาย "ด้านล่าง" ค่าเริ่มต้นคือ "center" ส่วนคำอธิบายอื่นๆ จะมีค่าเริ่มต้นเป็น "start" ประเภท: สตริง ค่าเริ่มต้น: อัตโนมัติ
legend.maxLines	จำนวนบรรทัดสูงสุดในคำอธิบาย ตั้งค่านี้ให้มากกว่า 1 เพื่อเพิ่มบรรทัดในคำอธิบาย หมายเหตุ: ตรรกะแบบตรงที่ใช้ในการกำหนดจำนวนจริงของบรรทัดที่แสดงผลนั้นยังคงอยู่ในรูปแบบ Flux ปัจจุบันตัวเลือกนี้จะทำงานเมื่อ Legend.position เป็น "ด้านบน" เท่านั้น ประเภท: ตัวเลข ค่าเริ่มต้น: 1
legend.pageIndex	เลือกดัชนีหน้าฐาน 0 ของคำอธิบายที่เลือกในตอนแรก ประเภท: ตัวเลข ค่าเริ่มต้น: 0
legend.position	ตำแหน่งของคำอธิบาย อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้ "bottom" - ใต้แผนภูมิ "ซ้าย" - ทางด้านซ้ายของแผนภูมิ ในกรณีที่แกนด้านซ้ายไม่มีชุดที่เชื่อมโยงกับแผนภูมิ ถ้าต้องการให้คำอธิบายอยู่ทางซ้าย ให้ใช้ตัวเลือก `targetAxisIndex: 1` "ใน" - ภายในแผนภูมิตามมุมซ้ายบน "none" - ไม่แสดงคำอธิบาย "ขวา" - ทางด้านขวาของแผนภูมิ ไม่สามารถใช้ร่วมกับตัวเลือก `vAxes` "top" - เหนือแผนภูมิ ประเภท: สตริง ค่าเริ่มต้น: "ขวา"
legend.textStyle	ออบเจ็กต์ที่ระบุรูปแบบข้อความคำอธิบาย ออบเจ็กต์มีรูปแบบดังนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` อาจเป็นสตริงสี HTML ใดก็ได้ เช่น `'red'` หรือ `'#00cc00'` ดู `fontName` และ `fontSize` ด้วย ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
selectionMode	เมื่อ `selectionMode` คือ `'multiple'` ผู้ใช้อาจเลือกจุดข้อมูลหลายจุด ประเภท: สตริง ค่าเริ่มต้น: "single"
ซีรีส์	ออบเจ็กต์ของออบเจ็กต์ โดยที่คีย์เป็นชื่อชุด (ค่าในคอลัมน์สี) และออบเจ็กต์แต่ละรายการที่อธิบายรูปแบบของชุดข้อมูลที่เกี่ยวข้องในแผนภูมิ หากไม่ได้ระบุชุดหรือค่า ระบบจะใช้ค่าส่วนกลาง ออบเจ็กต์แต่ละรายการรองรับพร็อพเพอร์ตี้ต่อไปนี้ `color` - สีที่ใช้สำหรับชุดนี้ ระบุสตริงสี HTML ที่ถูกต้อง `visibleInLegend` - ค่าบูลีน โดยที่ "จริง" หมายความว่าชุดหนังสือควรมีรายการคำอธิบาย และ "เท็จ" หมายความว่าไม่ควรใส่ ค่าเริ่มต้นเป็น True เช่น series: {'Europe': {color: 'green'}} ประเภท: ออบเจ็กต์ที่มีออบเจ็กต์ที่ซ้อนกัน ค่าเริ่มต้น: {}
sizeAxis	ออบเจ็กต์ที่มีสมาชิกเพื่อกำหนดค่าวิธีเชื่อมโยงค่ากับขนาดลูกโป่ง หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบลิเทอรัลของออบเจ็กต์ได้ดังที่แสดงที่นี่ {minValue: 0, maxSize: 20} ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
sizeAxis.maxSize	รัศมีสูงสุดของลูกโป่งที่ใหญ่ที่สุดที่เป็นไปได้ หน่วยเป็นพิกเซล ประเภท: ตัวเลข ค่าเริ่มต้น: 30
sizeAxis.maxValue	ค่าขนาด (ตามที่แสดงในข้อมูลแผนภูมิ) ที่จะแมปกับ `sizeAxis.maxSize` ระบบจะครอบตัดค่าที่มากกว่านี้เป็นค่านี้ ประเภท: ตัวเลข ค่าเริ่มต้น: ค่าสูงสุดของคอลัมน์ขนาดในข้อมูลแผนภูมิ
sizeAxis.minSize	รัศมีต่ำสุดของลูกโป่งที่เล็กที่สุดในหน่วยพิกเซล ประเภท: ตัวเลข ค่าเริ่มต้น: 5
sizeAxis.minValue	ค่าขนาด (ตามที่แสดงในข้อมูลแผนภูมิ) ที่จะแมปกับ `sizeAxis.minSize` ระบบจะครอบตัดค่าที่น้อยกว่านี้เป็นค่านี้ ประเภท: ตัวเลข ค่าเริ่มต้น: ค่าต่ำสุดของคอลัมน์ขนาดในข้อมูลแผนภูมิ
sortBubblesBySize	หากเป็น "จริง" จะจัดเรียงลูกโป่งตามขนาดเพื่อให้ลูกโป่งขนาดเล็กปรากฏเหนือลูกโป่งที่ใหญ่กว่า หากเป็น "เท็จ" ลูกโป่งจะจัดเรียงตามลำดับในตาราง DataTable ประเภท: บูลีน ค่าเริ่มต้น: true
ธีม [theme]	ธีมคือชุดของค่าตัวเลือกที่กำหนดไว้ล่วงหน้า ซึ่งจะทำงานร่วมกันเพื่อให้ได้ลักษณะการทำงานของแผนภูมิหรือเอฟเฟกต์ภาพที่เฉพาะเจาะจง ปัจจุบันมีธีมที่ใช้ได้เพียง 1 ธีมเท่านั้น "ขยายใหญ่สุด" - ขยายพื้นที่ในแผนภูมิให้ใหญ่สุด ดึงคำอธิบายและป้ายกำกับทั้งหมดภายในพื้นที่แผนภูมิ ตั้งค่าตัวเลือกต่อไปนี้ chartArea: {width: '100%', height: '100%'}, legend: {position: 'in'}, titlePosition: 'in', axisTitlesPosition: 'in', hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'} ประเภท: สตริง ค่าเริ่มต้น: null
title	ข้อความที่จะแสดงเหนือแผนภูมิ ประเภท: สตริง ค่าเริ่มต้น: ไม่มีชื่อ
titlePosition	ตำแหน่งที่จะวางชื่อแผนภูมิเมื่อเทียบกับพื้นที่แผนภูมิ ค่าที่รองรับ in - วาดชื่อไว้ภายในบริเวณแผนภูมิ out - วาดชื่อไว้นอกแผนภูมิ ไม่มี - ไม่ระบุชื่อ ประเภท: สตริง ค่าเริ่มต้น: "out"
titleTextStyle	วัตถุที่ระบุรูปแบบข้อความชื่อ ออบเจ็กต์มีรูปแบบดังนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` อาจเป็นสตริงสี HTML ใดก็ได้ เช่น `'red'` หรือ `'#00cc00'` ดู `fontName` และ `fontSize` ด้วย ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
เคล็ดลับเครื่องมือ	ออบเจ็กต์ที่มีสมาชิกเพื่อกำหนดค่าองค์ประกอบเคล็ดลับเครื่องมือที่หลากหลาย หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบลิเทอรัลของออบเจ็กต์ได้ดังที่แสดงที่นี่ {textStyle: {color: '#FF0000'}, showColorCode: true} ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
tooltip.isHtml	หากตั้งค่าเป็น "จริง" ให้ใช้เคล็ดลับเครื่องมือที่แสดงผล HTML (แทนการแสดงผล SVG) ดูรายละเอียดเพิ่มเติมได้ที่การปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ หมายเหตุ: การแสดงข้อมูลผ่านภาพแผนภูมิลูกโป่งไม่รองรับการปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ HTML ผ่านบทบาทข้อมูลในคอลัมน์เคล็ดลับเครื่องมือ ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
tooltip.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" - เคล็ดลับเครื่องมือจะปรากฏขึ้นเมื่อผู้ใช้เลือกองค์ประกอบ ประเภท: สตริง ค่าเริ่มต้น: "โฟกัส"
vAxis	วัตถุที่มีสมาชิกเพื่อกำหนดค่าองค์ประกอบของแกนแนวตั้งที่หลากหลาย หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบลิเทอรัลของออบเจ็กต์ได้ดังที่แสดงที่นี่ {title: 'Hello', titleTextStyle: {color: '#FF0000'}} ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
vAxis.baseline	พร็อพเพอร์ตี้ `vAxis` ที่ระบุเส้นฐานสำหรับแกนแนวตั้ง หากเส้นฐานใหญ่กว่าเส้นตารางกริดสูงสุดหรือเล็กกว่าเส้นตารางกริดต่ำสุด ระบบจะปัดเศษเส้นตารางให้ใกล้กับเส้นตารางมากที่สุด ประเภท: ตัวเลข ค่าเริ่มต้น: อัตโนมัติ
vAxis.baselineColor	ระบุสีของเกณฑ์พื้นฐานสำหรับแกนแนวตั้ง เป็นสตริงสี HTML ใดก็ได้ เช่น `'red'` หรือ `'#00cc00'` ประเภท: ตัวเลข ค่าเริ่มต้น: "black"
vAxis.direction	ทิศทางที่ค่าตามแกนแนวตั้งขยายตัว โดยค่าเริ่มต้น ระบบจะแสดงค่าที่ต่ำที่ด้านล่างของแผนภูมิ ระบุ `-1` เพื่อกลับลำดับของค่า ประเภท: 1 หรือ -1 ค่าเริ่มต้น: 1
vAxis.format	สตริงรูปแบบสำหรับป้ายกำกับแกนตัวเลข นี่คือชุดย่อยของ ชุดรูปแบบ ICU เช่น `{format:'#,###%'}` จะแสดงค่า "1,000%", "750%" และ "50%" สำหรับค่า 10, 7.5 และ 0.5 นอกจากนี้ คุณยังระบุข้อมูลดังต่อไปนี้ได้ด้วย `{format: 'none'}`: แสดงตัวเลขที่ไม่มีการจัดรูปแบบ (เช่น 8000000) `{format: 'decimal'}`: แสดงตัวเลขที่มีตัวคั่นหลักพัน (เช่น 8,000,000) `{format: 'scientific'}`: แสดงตัวเลขในรูปแบบสัญกรณ์วิทยาศาสตร์ (เช่น 8E6) `{format: 'currency'}`: แสดงหมายเลขในสกุลเงินท้องถิ่น (เช่น 240,000,000.00 บาท) `{format: 'percent'}`: แสดงตัวเลขเป็นเปอร์เซ็นต์ (เช่น 800,000,000%) `{format: 'short'}`: แสดงตัวเลขแบบย่อ (เช่น 8 ล้าน) `{format: 'long'}`: แสดงตัวเลขเป็นคำที่สมบูรณ์ (เช่น 8 ล้าน) การจัดรูปแบบจริงที่ใช้กับป้ายกำกับมาจากภาษาที่โหลด API ไว้ ดูรายละเอียดเพิ่มเติมได้ที่ การโหลดแผนภูมิที่มีภาษาเฉพาะ ในการคำนวณค่าเครื่องหมายถูกและเส้นตาราง เราจะพิจารณาชุดค่าผสมทางเลือกต่างๆ ของตัวเลือกเส้นตารางที่เกี่ยวข้องทั้งหมด และจะปฏิเสธทางเลือกอื่นหากป้ายกำกับเครื่องหมายถูกที่จัดรูปแบบซ้ำหรือทับซ้อนกัน คุณจึงระบุ `format:"#"` ได้หากต้องการแสดงเฉพาะค่าขีดจำนวนเต็ม แต่โปรดทราบว่าหากไม่มีตัวเลือกอื่นที่ตรงกับเกณฑ์นี้ ระบบจะไม่แสดงเส้นตารางหรือเครื่องหมายถูก ประเภท: สตริง ค่าเริ่มต้น: อัตโนมัติ
vAxis.gridlines	ออบเจ็กต์ที่มีสมาชิกสำหรับกำหนดค่าเส้นตารางบนแกนแนวตั้ง โปรดทราบว่าเส้นตารางของแกนแนวตั้งจะวาดในแนวนอน หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบลิเทอรัลของออบเจ็กต์ได้ดังที่แสดงที่นี่ {color: '#333', minSpacing: 20} ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
vAxis.gridlines.color	สีของเส้นตารางแนวตั้งภายในพื้นที่แผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง ประเภท: สตริง ค่าเริ่มต้น: "#CCC"
vAxis.gridlines.count	จำนวนเส้นตารางแนวนอนโดยประมาณภายในพื้นที่แผนภูมิ หากคุณระบุจำนวนบวกสำหรับ `gridlines.count` ระบบจะใช้จำนวนดังกล่าวเพื่อคำนวณ `minSpacing` ระหว่างเส้นตาราง คุณระบุค่า `1` เพื่อวาดเส้นตารางเพียง 1 เส้น หรือ `0` เพื่อวาดเส้นตารางก็ได้ ป้อน -1 ซึ่งเป็นค่าเริ่มต้นเพื่อคำนวณจำนวนเส้นตารางโดยอัตโนมัติตามตัวเลือกอื่นๆ ประเภท: ตัวเลข ค่าเริ่มต้น: -1
vAxis.gridlines.units	ลบล้างรูปแบบเริ่มต้นสำหรับข้อมูลประเภทวันที่/วันที่และเวลา/เวลาของวันในลักษณะต่างๆ เมื่อใช้กับเส้นตารางที่คำนวณในแผนภูมิ อนุญาตการจัดรูปแบบสำหรับปี เดือน วัน ชั่วโมง นาที วินาที และมิลลิวินาที รูปแบบทั่วไปคือ gridlines: { units: { years: {format: [/format strings here/]}, months: {format: [/format strings here/]}, days: {format: [/format strings here/]}, hours: {format: [/format strings here/]}, minutes: {format: [/format strings here/]}, seconds: {format: [/format strings here/]}, milliseconds: {format: [/format strings here/]} } } ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
vAxis.minorGridlines	ออบเจ็กต์ที่มีสมาชิกสำหรับกำหนดค่าเส้นตารางย่อยบนแกนแนวตั้ง ซึ่งคล้ายกับตัวเลือก vAxis.gridlines ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
vAxis.minorGridlines.color	สีของเส้นตารางย่อยแนวตั้งภายในพื้นที่แผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง ประเภท: สตริง ค่าเริ่มต้น: การผสมผสานของสีของเส้นตารางและสีพื้นหลัง
vAxis.minorGridlines.count	เลิกใช้งานตัวเลือก minGridlines.count ส่วนใหญ่แล้ว ยกเว้นการปิดใช้เส้นตารางกริดย่อยโดยการตั้งค่าจำนวนเป็น 0 จำนวนเส้นตารางย่อยจะขึ้นอยู่กับช่วงเวลาระหว่างเส้นตารางหลัก (ดู vAxis.gridlines.interval) และพื้นที่ขั้นต่ำที่ต้องการ (ดูที่ vAxis.minorGridlines.minSpacing) ประเภท: ตัวเลข ค่าเริ่มต้น: 1
vAxis.minorGridlines.units	ลบล้างรูปแบบเริ่มต้นสำหรับประเภทข้อมูลวันที่/วันที่และเวลา/ช่วงเวลาของวันในลักษณะต่างๆ เมื่อใช้กับเส้นตารางย่อยที่คำนวณในแผนภูมิ อนุญาตการจัดรูปแบบสำหรับปี เดือน วัน ชั่วโมง นาที วินาที และมิลลิวินาที รูปแบบทั่วไปคือ gridlines: { units: { years: {format: [/format strings here/]}, months: {format: [/format strings here/]}, days: {format: [/format strings here/]} hours: {format: [/format strings here/]} minutes: {format: [/format strings here/]} seconds: {format: [/format strings here/]}, milliseconds: {format: [/format strings here/]}, } } ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
vAxis.logScale	หากจริง จะทำให้แกนแนวตั้งเป็นสเกลลอการิทึม หมายเหตุ: ค่าทั้งหมดต้องเป็นค่าบวก ประเภท: บูลีน ค่าเริ่มต้น: เท็จ
vAxis.scaleType	พร็อพเพอร์ตี้ `vAxis` ที่ทำให้แกนแนวตั้งเป็นสเกลลอการิทึม อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้ null - ไม่มีการปรับขนาดลอการิทึม 'log' - การปรับขนาดลอการิทึม ระบบจะไม่พล็อตค่าลบและค่าศูนย์ ตัวเลือกนี้เหมือนกับการตั้งค่า `vAxis: { logscale: true }` "mirrorLog" - การปรับขนาดลอการิทึมที่มีการพล็อตค่าลบและค่าศูนย์ ค่าที่พล็อตของจำนวนลบเป็นค่าลบของบันทึกข้อมูลของค่าสัมบูรณ์ ระบบจะพล็อตค่าที่ใกล้เคียงกับ 0 ในสเกลเชิงเส้น ประเภท: สตริง ค่าเริ่มต้น: null
vAxis.textPosition	ตำแหน่งของข้อความแกนแนวตั้งที่สัมพันธ์กับพื้นที่แผนภูมิ ค่าที่รองรับ: "out", "in", "none" ประเภท: สตริง ค่าเริ่มต้น: "out"
vAxis.textStyle	วัตถุที่ระบุรูปแบบข้อความของแกนแนวตั้ง ออบเจ็กต์มีรูปแบบดังนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` อาจเป็นสตริงสี HTML ใดก็ได้ เช่น `'red'` หรือ `'#00cc00'` ดู `fontName` และ `fontSize` ด้วย ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
vAxis.ticks	แทนที่เครื่องหมายแสดงตำแหน่งบนแกน Y ที่สร้างขึ้นโดยอัตโนมัติด้วยอาร์เรย์ที่ระบุ องค์ประกอบแต่ละรายการของอาร์เรย์ควรเป็นค่าเครื่องหมายถูกที่ถูกต้อง (เช่น ตัวเลข วันที่ วันที่และเวลา หรือเวลาของวัน) หรือออบเจ็กต์ หากเป็นออบเจ็กต์ ควรมีพร็อพเพอร์ตี้ `v` สำหรับค่าเครื่องหมายถูก และพร็อพเพอร์ตี้ `f` (ไม่บังคับ) ซึ่งมีสตริงตามตัวอักษรที่จะแสดงเป็นป้ายกำกับ ViewWindow จะขยายโดยอัตโนมัติเพื่อรวมจุดต่ำสุดและสูงสุด เว้นแต่คุณจะระบุ `viewWindow.min` หรือ `viewWindow.max` เพื่อลบล้าง ตัวอย่าง `vAxis: { ticks: [5,10,15,20] }` `vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }` `vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }` `vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }` ประเภท: อาร์เรย์ขององค์ประกอบ ค่าเริ่มต้น: อัตโนมัติ
vAxis.title	พร็อพเพอร์ตี้ `vAxis` ที่ระบุชื่อสำหรับแกนแนวตั้ง ประเภท: สตริง ค่าเริ่มต้น: ไม่มีชื่อ
vAxis.titleTextStyle	วัตถุที่ระบุรูปแบบข้อความสำหรับชื่อแกนแนวตั้ง ออบเจ็กต์มีรูปแบบดังนี้ { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` อาจเป็นสตริงสี HTML ใดก็ได้ เช่น `'red'` หรือ `'#00cc00'` ดู `fontName` และ `fontSize` ด้วย ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
vAxis.maxValue	ย้ายค่าสูงสุดของแกนแนวตั้งเป็นค่าที่ระบุ ซึ่งจะอยู่ด้านบนในแผนภูมิส่วนใหญ่ ไม่สนใจหากตั้งค่านี้เป็นค่าที่น้อยกว่าค่า y สูงสุดของข้อมูล `vAxis.viewWindow.max` จะลบล้างพร็อพเพอร์ตี้นี้ ประเภท: ตัวเลข ค่าเริ่มต้น: อัตโนมัติ
vAxis.minValue	ย้ายค่าขั้นต่ำของแกนแนวตั้งไปยังค่าที่ระบุ ซึ่งจะเลื่อนลงไปด้านล่างในแผนภูมิส่วนใหญ่ จะไม่สนใจหากตั้งค่านี้เป็นค่าที่มากกว่าค่า y ต่ำสุดของข้อมูล `vAxis.viewWindow.min` จะลบล้างพร็อพเพอร์ตี้นี้ ประเภท: ตัวเลข ค่าเริ่มต้น: null
vAxis.viewWindowMode	ระบุวิธีปรับขนาดแกนแนวตั้งเพื่อแสดงค่าภายในพื้นที่แผนภูมิ ระบบรองรับค่าสตริงต่อไปนี้ "pretty" - ปรับขนาดค่าแนวตั้งเพื่อให้แสดงผลค่าสูงสุดและต่ำสุดที่ด้านด้านล่างและด้านบนของแผนภูมิเล็กน้อย ViewWindow จะขยายไปยังเส้นตารางหลักที่ใกล้ที่สุดสำหรับตัวเลข หรือเส้นตารางรองที่ใกล้ที่สุดสำหรับวันที่และเวลา "ขยายใหญ่สุด" - ปรับขนาดค่าแนวตั้งเพื่อให้ค่าสูงสุดและต่ำสุดแตะ ด้านบนและด้านล่างของพื้นที่แผนภูมิ ซึ่งจะทำให้ระบบละเว้น `vaxis.viewWindow.min` และ `vaxis.viewWindow.max` "Explicit" - ตัวเลือกที่เลิกใช้งานสำหรับการระบุค่าสเกลด้านบนและด้านล่างของพื้นที่แผนภูมิ (เลิกใช้งานแล้วเนื่องจากซ้ำซ้อนกับ `vaxis.viewWindow.min` และ `vaxis.viewWindow.max` ระบบจะครอบตัดค่าข้อมูลที่อยู่นอกค่าเหล่านี้ คุณต้องระบุออบเจ็กต์ `vAxis.viewWindow` ที่อธิบายค่าสูงสุดและค่าต่ำสุดที่จะแสดง ประเภท: สตริง ค่าเริ่มต้น: เทียบเท่ากับ "pretty" แต่ `vaxis.viewWindow.min` และ `vaxis.viewWindow.max` จะมีความสำคัญเหนือกว่าหากมีการใช้งาน
vAxis.viewWindow	ระบุช่วงการครอบตัดของแกนแนวตั้ง ประเภท: ออบเจ็กต์ ค่าเริ่มต้น: null
vAxis.viewWindow.max	ค่าข้อมูลประเภทธุรกิจสูงสุดที่จะแสดง ไม่สนใจเมื่อ `vAxis.viewWindowMode` เป็น "pretty" หรือ "maximized" ประเภท: ตัวเลข ค่าเริ่มต้น: อัตโนมัติ
vAxis.viewWindow.min	ค่าข้อมูลแนวตั้งขั้นต่ำที่จะแสดง ไม่สนใจเมื่อ `vAxis.viewWindowMode` เป็น "pretty" หรือ "maximized" ประเภท: ตัวเลข ค่าเริ่มต้น: อัตโนมัติ
ความกว้าง	ความกว้างของแผนภูมิเป็นพิกเซล ประเภท: ตัวเลข ค่าเริ่มต้น: ความกว้างขององค์ประกอบที่มีอยู่

วิธีการ

วิธีการ
`draw(data, options)`	วาดแผนภูมิ แผนภูมิยอมรับการเรียกใช้เมธอดเพิ่มเติมหลังจากที่เหตุการณ์ `ready` เริ่มทํางานแล้วเท่านั้น `Extended description`. ประเภทการคืนสินค้า: ไม่มี
`getAction(actionID)`	แสดงออบเจ็กต์การดำเนินการของเคล็ดลับเครื่องมือที่มี `actionID` ที่ขอ ประเภทผลลัพธ์: ออบเจ็กต์
`getBoundingBox(id)`	แสดงผลออบเจ็กต์ที่มีด้านซ้าย ด้านบน ความกว้าง และความสูงขององค์ประกอบแผนภูมิ `id` ยังไม่มีการบันทึกรูปแบบสำหรับ `id` (เป็นค่าที่แสดงผลของเครื่องจัดการเหตุการณ์) แต่มีตัวอย่างบางส่วนดังนี้ `var cli = chart.getChartLayoutInterface();` ความสูงของพื้นที่แผนภูมิ `cli.getBoundingBox('chartarea').height` ความกว้างของแท่งที่ 3 ในแผนภูมิแท่งหรือแผนภูมิคอลัมน์ชุดแรก `cli.getBoundingBox('bar#0#2').width` กล่องล้อมรอบของลิ่มที่ 5 ของแผนภูมิวงกลม `cli.getBoundingBox('slice#4')` ช่องขอบเขตของข้อมูลแผนภูมิของแผนภูมิแนวตั้ง (เช่น คอลัมน์) `cli.getBoundingBox('vAxis#0#gridline')` กล่องขอบเขตของข้อมูลแผนภูมิของแผนภูมิแนวนอน (เช่น แท่ง) `cli.getBoundingBox('hAxis#0#gridline')` ค่าจะสัมพันธ์กับคอนเทนเนอร์ของแผนภูมิ เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทผลลัพธ์: ออบเจ็กต์
`getChartAreaBoundingBox()`	แสดงผลออบเจ็กต์ที่มีข้อมูลด้านซ้าย ด้านบน ความกว้าง และความสูงของเนื้อหาแผนภูมิ (นั่นคือ ไม่รวมป้ายกำกับและคำอธิบาย) ดังนี้ `var cli = chart.getChartLayoutInterface();` `cli.getChartAreaBoundingBox().left` `cli.getChartAreaBoundingBox().top` `cli.getChartAreaBoundingBox().height` `cli.getChartAreaBoundingBox().width` ค่าจะสัมพันธ์กับคอนเทนเนอร์ของแผนภูมิ เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทผลลัพธ์: ออบเจ็กต์
`getChartLayoutInterface()`	แสดงผลออบเจ็กต์ที่มีข้อมูลเกี่ยวกับตำแหน่งบนหน้าจอของแผนภูมิและองค์ประกอบ เมธอดต่อไปนี้สามารถเรียกใช้ในออบเจ็กต์ที่แสดงผล `getBoundingBox` `getChartAreaBoundingBox` `getHAxisValue` `getVAxisValue` `getXLocation` `getYLocation` เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทผลลัพธ์: ออบเจ็กต์
`getHAxisValue(xPosition, optional_axis_index)`	แสดงผลค่าข้อมูลแนวนอนที่ `xPosition` ซึ่งเป็นออฟเซ็ตพิกเซลจากขอบด้านซ้ายของคอนเทนเนอร์แผนภูมิ อาจเป็นเชิงลบได้ ตัวอย่าง: `chart.getChartLayoutInterface().getHAxisValue(400)` เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการคืนสินค้า: ตัวเลข
`getImageURI()`	แสดงผลแผนภูมิที่เรียงลำดับเป็น URI รูปภาพ เรียกใช้หลังจากที่มีการวาดแผนภูมิ ดูการพิมพ์แผนภูมิ PNG ประเภทการแสดงผล: สตริง
`getSelection()`	แสดงผลอาร์เรย์ของเอนทิตีแผนภูมิที่เลือก เอนทิตีที่เลือกได้คือลูกโป่ง สำหรับแผนภูมินี้ คุณสามารถเลือกเอนทิตีได้เพียง 1 รายการในช่วงเวลาหนึ่งๆ `Extended description` ประเภทผลลัพธ์: อาร์เรย์ขององค์ประกอบการเลือก
`getVAxisValue(yPosition, optional_axis_index)`	แสดงผลค่าข้อมูลแนวตั้งที่ `yPosition` ซึ่งเป็นออฟเซ็ตพิกเซลจากขอบด้านบนของคอนเทนเนอร์แผนภูมิ อาจเป็นเชิงลบได้ ตัวอย่าง: `chart.getChartLayoutInterface().getVAxisValue(300)` เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการคืนสินค้า: ตัวเลข
`getXLocation(dataValue, optional_axis_index)`	แสดงผลพิกัด x ของพิกเซลของ `dataValue` ที่สัมพัทธ์กับขอบด้านซ้ายของคอนเทนเนอร์ของแผนภูมิ ตัวอย่าง: `chart.getChartLayoutInterface().getXLocation(400)` เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการคืนสินค้า: ตัวเลข
`getYLocation(dataValue, optional_axis_index)`	แสดงผลพิกัด y ของพิกเซลของ `dataValue` ที่สัมพันธ์กับขอบด้านบนของคอนเทนเนอร์ของแผนภูมิ ตัวอย่าง: `chart.getChartLayoutInterface().getYLocation(300)` เรียกใช้หลังจากที่มีการวาดแผนภูมิ ประเภทการคืนสินค้า: ตัวเลข
`removeAction(actionID)`	นำการดำเนินการเคล็ดลับเครื่องมือที่มี `actionID` ที่ขอออกจากแผนภูมิ ประเภทการคืนสินค้า: `none`
`setAction(action)`	ตั้งค่าการดำเนินการเคล็ดลับเครื่องมือที่จะทำงานเมื่อผู้ใช้คลิกที่ข้อความการดำเนินการ เมธอด `setAction` จะนำออบเจ็กต์เป็นพารามิเตอร์การดำเนินการ ออบเจ็กต์นี้ควรระบุพร็อพเพอร์ตี้ 3 รายการ ได้แก่ `id` ได้แก่ รหัสของการดำเนินการที่กำลังตั้ง `text` ข้อความที่ควรปรากฏในเคล็ดลับเครื่องมือสำหรับการทำงาน และ `action` คือฟังก์ชันที่ควรเรียกใช้เมื่อผู้ใช้คลิกที่ข้อความการดำเนินการ คุณควรตั้งค่าการดำเนินการเคล็ดลับเครื่องมือทั้งหมดก่อนที่จะเรียกใช้เมธอด `draw()` ของแผนภูมิ คำอธิบายเพิ่มเติม ประเภทการคืนสินค้า: `none`
`setSelection()`	เลือกเอนทิตีแผนภูมิที่ระบุ ยกเลิกรายการที่เลือกก่อนหน้า เอนทิตีที่เลือกได้คือลูกโป่ง สำหรับแผนภูมินี้ คุณสามารถเลือกเอนทิตีได้ครั้งละ 1 รายการเท่านั้น `Extended description` ประเภทการคืนสินค้า: ไม่มี
`clearChart()`	ล้างแผนภูมิ และปล่อยทรัพยากรที่จัดสรรทั้งหมด ประเภทการคืนสินค้า: ไม่มี

กิจกรรม

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

ชื่อ
`animationfinish`	เริ่มทำงานเมื่อภาพเคลื่อนไหวการเปลี่ยนเสร็จสมบูรณ์ พร็อพเพอร์ตี้: ไม่มี
`click`	เริ่มทำงานเมื่อผู้ใช้คลิกภายในแผนภูมิ ใช้เพื่อระบุว่ามีการคลิกชื่อ องค์ประกอบข้อมูล รายการคำอธิบาย แกน เส้นตาราง หรือป้ายกำกับเมื่อใด พร็อพเพอร์ตี้: targetID
`error`	เริ่มทำงานเมื่อเกิดข้อผิดพลาดขณะพยายามแสดงผลแผนภูมิ พร็อพเพอร์ตี้: รหัส ข้อความ
`legendpagination`	เริ่มทำงานเมื่อผู้ใช้คลิกลูกศรใส่เลขหน้าคำอธิบาย ส่งกลับดัชนีหน้าที่มีฐาน 0 ในคำอธิบายปัจจุบันและจำนวนหน้าทั้งหมด พร็อพเพอร์ตี้:currentPageIndex, totalPages
`onmouseover`	เริ่มทำงานเมื่อผู้ใช้วางเมาส์เหนือเอนทิตีที่มีภาพ ส่งกลับดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง ลูกโป่งสัมพันธ์กับแถวในตารางข้อมูล (ดัชนีคอลัมน์เป็นค่าว่าง) พร็อพเพอร์ตี้: แถว คอลัมน์
`onmouseout`	เริ่มทำงานเมื่อผู้ใช้เลื่อนเมาส์ออกห่างจากองค์ประกอบภาพ ส่งกลับดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง ลูกโป่งสัมพันธ์กับแถวในตารางข้อมูล (ดัชนีคอลัมน์เป็นค่าว่าง) พร็อพเพอร์ตี้: แถว คอลัมน์
`ready`	แผนภูมิพร้อมสำหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีเรียกใช้หลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สำหรับเหตุการณ์นี้ก่อนเรียกใช้เมธอด `draw` และเรียกใช้หลังจากที่เหตุการณ์เริ่มทำงานแล้วเท่านั้น พร็อพเพอร์ตี้: ไม่มี
`select`	เริ่มทำงานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูสิ่งที่เลือก โปรดโทรหา `getSelection()` พร็อพเพอร์ตี้: ไม่มี

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

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