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

ภาพรวม

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

แผนภูมิกระจายของ 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 Charts อื่นๆ คุณสามารถสร้างภาพเคลื่อนไหวโดยใช้เหตุการณ์ได้ คุณสามารถเพิ่ม 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>

การสร้างแผนภูมิกระจายวัสดุ

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

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

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

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

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

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

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

chart.draw(data, options);

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

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

แผนภูมิ Y แบบ 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 ยอดนิยม

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

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

ไม่มี

...

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

ค่า X ค่าชุด 1 Y ค่าชุด 2 Y
10 null 75
20 null 18
33 null 22
55 16 null
14 61 null
48 3 null

 

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

ชื่อ
เป้าหมายการรวม
วิธีการรวมข้อมูลประเภทต่างๆ ลงในเคล็ดลับเครื่องมือ
  • 'category': จัดกลุ่มข้อมูลที่เลือกตาม x-value
  • 'series': จัดกลุ่มข้อมูลที่เลือกตามชุดหนังสือ
  • 'auto': จัดกลุ่มข้อมูลที่เลือกตาม x-value หากการเลือกทั้งหมดมีค่า x-value เหมือนกันและตามชุดรายการ
  • 'none': แสดงเคล็ดลับเครื่องมือเพียงรายการเดียวต่อการเลือก
โดยปกติแล้วจะใช้ 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',
};
    
ประเภท: สตริง
ค่าเริ่มต้น: "อัตโนมัติ"
ภาพเคลื่อนไหว.ระยะเวลา

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
ครอสแฮร์สี

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

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

ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ครอสเฮิร์ตเมื่อโฟกัส
เช่น crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

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

ความทึบแสงของ Crosshair โดย 0.0 มีความโปร่งใสโดยสมบูรณ์และ 1.0 ทึบแสงอย่างสมบูรณ์

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

การวางแนวผมแบบแนวนอน สามารถเป็น "แนวตั้ง" สําหรับผมตรงเท่านั้น "แนวนอน" สําหรับผมแนวนอนเท่านั้น หรือ "ทั้ง 2 แบบ" สําหรับผมกากบาทแบบดั้งเดิม

ประเภท: สตริง
ค่าเริ่มต้น: 'ทั้ง'
Crosshair.selected

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

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

เวลาที่ควรจะแสดงเครื่องหมายกากบาท: ใน 'focus', 'selection' หรือ 'both'

ประเภท: สตริง
ค่าเริ่มต้น: 'ทั้ง'
เส้นโค้ง

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

  • "none" - เส้นตรงโดยไม่มีเส้นโค้ง
  • 'function' - มุมของเส้นจะเรียบขึ้น
ประเภท:สตริง
ค่าเริ่มต้น: "ไม่มี"
ความทึบข้อมูล

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ทิศทางที่ค่าในแกนนอนเติบโตขึ้น ระบุ -1 เพื่อกลับลําดับค่า

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

พร็อพเพอร์ตี้ hAxis ที่ทําให้แกนแนวนอนเป็นสเกลลอการิทึม (ต้องมีค่าทั้งหมดเป็นบวก) ตั้งค่าเป็นจริงสําหรับใช่

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่าง:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ประเภท: สตริง
ค่าเริ่มต้น: "วงกลม"
ขนาดจุด

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 7
คะแนนที่มองเห็นได้

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

และยังลบล้างได้โดยใช้บทบาทสไตล์ในรูปแบบ "point {visible: true}"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การโต้ตอบของผู้ใช้ที่ทําให้เคล็ดลับเครื่องมือแสดง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่าง:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เมธอด

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

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

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

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

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

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

var cli = chart.getChartLayoutInterface();

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

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

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

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

var cli = chart.getChartLayoutInterface();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เหตุการณ์

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

ชื่อ
animationfinish

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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