การแสดงภาพ: แผนภูมิกระจาย

ภาพรวม

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

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

ตัวอย่าง

 
<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([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

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

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

การเปลี่ยนและทำให้รูปร่างเคลื่อนไหว

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

คุณทำให้แผนภูมิเหล่านั้นเคลื่อนไหวได้โดยใช้เหตุการณ์เช่นเดียวกับแผนภูมิอื่นๆ ส่วนใหญ่ของ Google คุณเพิ่ม Listener เหตุการณ์สำหรับเหตุการณ์ ready แรกและวาดแผนภูมิใหม่หลังจากทำการแก้ไขตามที่ต้องการได้ หลังจากเหตุการณ์ ready แรก คุณจะฟังเหตุการณ์ animationfinish เพื่อทำซ้ำกระบวนการได้ ซึ่งจะทําให้มีภาพเคลื่อนไหวแบบต่อเนื่อง ตัวเลือก animation จะควบคุมวิธีการวาดใหม่ ได้แก่ แบบทันที (ไม่มีภาพเคลื่อนไหว) หรืออย่างราบรื่น และกำหนดว่าเร็วเพียงใดและทำงานได้อย่างราบรื่นเพียงใด

ส่วนที่ดี
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
HTML แบบเต็ม
<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 = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

การสร้างแผนภูมิกระจายของ Material

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

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

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

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

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

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

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

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

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

chart.draw(data, options);


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

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

แผนภูมิ Dual-Y

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

โปรดทราบว่านอกจากแกน Y ทั้ง 2 อันของเราจะมีป้ายกำกับต่างกัน ("คะแนนสอบสุดท้าย" กับ "ชั่วโมงที่ศึกษา") แต่แต่ละแกนมีมาตราส่วนและเส้นตารางที่เป็นอิสระต่อกัน หากต้องการปรับแต่งลักษณะการทำงานนี้ ให้ใช้ตัวเลือก vAxis.gridlines

ในโค้ดด้านล่าง ตัวเลือก axes และ series รวมกันจะระบุลักษณะที่ปรากฏแบบ Y คู่ของแผนภูมิ ตัวเลือก series จะระบุแกนที่จะใช้สำหรับแต่ละแกน ('final grade' และ 'hours studied' โดยไม่จำเป็นต้องมีความสัมพันธ์กับชื่อคอลัมน์ในตารางข้อมูล) จากนั้นตัวเลือก axes จะทำให้แผนภูมินี้เป็นแผนภูมิ Y แบบคู่ โดยวางแกน 'Final Exam Grade' ทางด้านซ้ายและแกน 'Hours Studied' ทางด้านขวา 

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

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Scatter(chartDiv);
          materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ScatterChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };

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

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

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

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

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

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

กำลังโหลด

ชื่อแพ็กเกจ google.charts.load คือ "corechart" และชื่อคลาสของการแสดงข้อมูลผ่านภาพคือ google.visualization.ScatterChart 

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

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

สำหรับแผนภูมิกระจายของวัสดุ ชื่อแพ็กเกจ google.charts.load คือ "scatter" และชื่อคลาสของการแสดงข้อมูลผ่านภาพคือ google.charts.Scatter 

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

  var visualization = new google.charts.Scatter(container);

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

แถว: แต่ละแถวในตารางแสดงชุดจุดข้อมูลที่มีค่าแกน x เหมือนกัน

คอลัมน์:

  คอลัมน์ 0 คอลัมน์ที่ 1 ... คอลัมน์ N
จุดประสงค์ในการใช้: ค่าจุดข้อมูล X ค่า Y ในชุดที่ 1 ... ค่าอนุกรม N Y
ประเภทข้อมูล: string, number หรือ date/datetime/timeofday string, number หรือ date/datetime/timeofday ... string, number หรือ date/datetime/timeofday
บทบาท: ข้อมูล ข้อมูล ... ข้อมูล
บทบาทของคอลัมน์ที่ไม่บังคับมีดังนี้

ไม่มี

 ...

หากต้องการระบุหลายชุด ให้ระบุคอลัมน์แกน Y อย่างน้อย 2 คอลัมน์ และระบุค่า Y ในคอลัมน์ Y เพียงคอลัมน์เดียว ดังนี้

ค่า X ค่า Series 1 Y ค่าซีรีส์ 2 Y
10 null 75
20 null 18
33 null 22
55 16 null
14 61 null
48 3 null

 

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

ชื่อ
aggregationTarget
วิธีรวมข้อมูลหลายรายการไว้ในเคล็ดลับเครื่องมือ
  • 'category': จัดกลุ่มข้อมูลที่เลือกตามค่า x
  • 'series': จัดกลุ่มข้อมูลที่เลือกตามชุด
  • 'auto': จัดกลุ่มข้อมูลที่เลือกตามค่า x-ค่า หากการเลือกทั้งหมดมีค่า x เหมือนกัน และตามชุดข้อมูล
  • 'none': แสดงเคล็ดลับเครื่องมือเพียง 1 รายการต่อการเลือก
aggregationTarget มักใช้ควบคู่กับ selectionMode และ tooltip.trigger เช่น 
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
ประเภท: สตริง
ค่าเริ่มต้น: "auto"
animation.duration

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ไม้กางเขนสำหรับแผนภูมิ

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

สีกากบาทที่แสดงเป็นชื่อสี (เช่น "น้ำเงิน") หรือค่า RGB (เช่น "#adf")

ประเภท: สตริง
ประเภท: ค่าเริ่มต้น
crosshair.focused

ออบเจ็กต์ที่มีพร็อพเพอร์ตี้เส้นไขว้เมื่อโฟกัส
ตัวอย่างเช่น crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

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

ความทึบแสงของเส้นด้ายที่ 0.0 แสดงความโปร่งใสเต็มที่และ 1.0 ทึบแสงเต็มที่

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

การวางแนวของกากบาท ซึ่งอาจเป็น "แนวตั้ง" สำหรับผมในแนวตั้งเท่านั้น, "แนวนอน" สำหรับผมในแนวนอนเท่านั้น หรือ "ทั้ง 2 แบบ" สำหรับเส้นกากบาทแบบดั้งเดิม

ประเภท: สตริง
ค่าเริ่มต้น: "ทั้งสองแบบ"
crosshair.selected

ออบเจ็กต์ที่มีพร็อพเพอร์ตี้เครื่องหมายกากบาทเมื่อเลือก
ตัวอย่าง: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

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

กรณีที่ควรแสดงกากบาท: ใน 'focus', 'selection' หรือ 'both'

ประเภท: สตริง
ค่าเริ่มต้น: "ทั้งสองแบบ"
curveType

ควบคุมเส้นโค้งของเส้นเมื่อความกว้างของเส้นไม่เท่ากับ 0 อาจมีสถานะใดสถานะหนึ่งดังต่อไปนี้

  • "ไม่มี" - เส้นตรงและไม่มีเส้นโค้ง
  • "function" - ปรับมุมของเส้นให้เรียบ
ประเภท: สตริง
ค่าเริ่มต้น: "none"
dataOpacity

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ความกว้างของเส้นเป็นพิกเซล ใช้ศูนย์เพื่อซ่อนเส้นทั้งหมดและแสดงเฉพาะจุด

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

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

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

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

ประเภท: สตริง
ค่าเริ่มต้น: "แวดวง"
pointSize

เส้นผ่านศูนย์กลางของจุดข้อมูล หน่วยเป็นพิกเซล ใช้ศูนย์เพื่อซ่อนจุดทั้งหมด คุณลบล้างค่าของแต่ละชุดได้โดยใช้พร็อพเพอร์ตี้ series หากคุณกำลังใช้เส้นแนวโน้ม ตัวเลือกนี้จะมีผลต่อ pointSize ของจุดที่รวมอยู่ในเส้นด้วย ซึ่งจะเปลี่ยนความกว้างที่เห็นได้ชัดของเส้นแนวโน้ม หากไม่ต้องการให้เป็นเช่นนั้น คุณสามารถลบล้างได้ด้วยตัวเลือก trendlines.n.pointsize

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

กำหนดว่าจะแสดงคะแนนหรือไม่ ตั้งค่าเป็น false เพื่อซ่อนจุดทั้งหมด คุณจะลบล้างค่าของแต่ละชุดได้โดยใช้พร็อพเพอร์ตี้ series หากคุณใช้เส้นแนวโน้ม ตัวเลือก pointsVisible จะมีผลกับการแสดงจุดบนเส้นแนวโน้มทั้งหมด เว้นแต่คุณจะลบล้างด้วยตัวเลือก trendlines.n.pointsVisible

ซึ่งลบล้างได้โดยใช้บทบาทรูปแบบในรูปแบบ "point {visible: true}"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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