Hiển thị: Biểu đồ tán xạ

Tổng quan

Biểu đồ tán xạ vẽ điểm trên biểu đồ. Khi người dùng di chuột qua các điểm đó, phần chú thích sẽ hiển thị thêm thông tin.

Biểu đồ tán xạ của Google được hiển thị trong trình duyệt bằng cách sử dụng SVG hoặc VML, tuỳ thuộc vào khả năng của trình duyệt.

Ví dụ

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

Thay đổi và tạo ảnh động cho hình dạng

Theo mặc định, biểu đồ tán xạ biểu thị các phần tử của tập dữ liệu bằng các vòng tròn. Bạn có thể chỉ định các hình dạng khác bằng tuỳ chọn pointShape, được nêu chi tiết trong tài liệu về Tuỳ chỉnh điểm.

Giống như hầu hết các biểu đồ khác trên Google, bạn có thể tạo ảnh động cho chúng bằng cách sử dụng sự kiện. Bạn có thể thêm trình nghe sự kiện cho sự kiện ready đầu tiên và vẽ lại biểu đồ sau khi thực hiện các nội dung sửa đổi mong muốn. Sau sự kiện ready đầu tiên, bạn có thể nghe sự kiện animationfinish để lặp lại quy trình này, nhờ đó tạo ra ảnh động liên tục. Tuỳ chọn animation kiểm soát cách diễn ra vẽ lại: ngay lập tức (không dùng ảnh động) hoặc suôn sẻ và nếu có suôn sẻ thì tốc độ cũng như hành vi vẽ lại là bao nhiêu.

Các thành phần hay
  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 đầy đủ
<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>

Tạo biểu đồ tán xạ Material

Năm 2014, Google công bố các nguyên tắc nhằm hỗ trợ giao diện phổ biến trên các thuộc tính và ứng dụng của Google (chẳng hạn như ứng dụng Android) chạy trên các nền tảng của Google. Chúng tôi gọi nỗ lực này là Material Design. Chúng tôi sẽ cung cấp phiên bản "Material" của tất cả các biểu đồ cốt lõi. Bạn có thể dùng các biểu đồ này nếu muốn.

Việc tạo Biểu đồ tán xạ Material tương tự như việc tạo Biểu đồ tán xạ mà giờ đây chúng ta gọi là "Cổ điển". Bạn tải Google trực quan hoá API (mặc dù với gói 'scatter' thay vì gói 'corechart'), hãy xác định bảng dữ liệu của bạn, sau đó tạo một đối tượng (nhưng không phải là lớp google.charts.Scatter thay vì google.visualization.ScatterChart).

Lưu ý: Biểu đồ Material sẽ không hoạt động trong các phiên bản cũ của Internet Explorer. (Các phiên bản IE8 trở xuống không hỗ trợ SVG là biểu đồ Material đòi hỏi phải có.)

Biểu đồ tán xạ Material có nhiều điểm cải tiến nhỏ so với Biểu đồ tán xạ cổ điển, bao gồm cả độ mờ có thể thay đổi để giúp các điểm chồng chéo dễ đọc hơn, bảng màu được cải thiện, định dạng nhãn rõ ràng hơn, khoảng cách mặc định chặt chẽ hơn, đường lưới và tiêu đề mềm hơn (và thêm phụ đề). 

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

Biểu đồ Material đang trong giai đoạn beta. Hình thức và khả năng tương tác nhìn chung là hoàn chỉnh, nhưng nhiều lựa chọn trong Biểu đồ cổ điển hiện chưa có. Bạn có thể tìm thấy danh sách những lựa chọn chưa được hỗ trợ trong vấn đề này.

Ngoài ra, cách khai báo các tuỳ chọn chưa hoàn tất. Vì vậy, nếu đang sử dụng bất kỳ tuỳ chọn cũ nào, bạn phải chuyển đổi các tuỳ chọn đó thành tuỳ chọn Material bằng cách thay thế dòng này:

chart.draw(data, options);

...bằng cách sau:

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

Biểu đồ kép-Y

Đôi khi, bạn muốn hiển thị hai chuỗi dữ liệu trong một biểu đồ tán xạ, với hai trục y độc lập: một trục trái của một chuỗi dữ liệu và một trục phải của một chuỗi dữ liệu khác:

Xin lưu ý rằng hai trục y của chúng tôi không chỉ được gắn nhãn khác nhau ("Điểm bài kiểm tra cuối kỳ" và "Số giờ nghiên cứu") mà còn có thang đo và đường lưới độc lập riêng. Nếu bạn muốn tuỳ chỉnh hành vi này, hãy sử dụng các tuỳ chọn vAxis.gridlines.

Trong đoạn mã dưới đây, các tuỳ chọn axes và series cùng chỉ định giao diện Y kép của biểu đồ. Tuỳ chọn series chỉ định trục nào cần sử dụng cho mỗi trục ('final grade' và 'hours studied'; chúng không cần có bất kỳ mối liên quan nào đến tên cột trong bảng dữ liệu). Sau đó, tuỳ chọn axes sẽ biến biểu đồ này thành biểu đồ Y kép, đặt trục 'Final Exam Grade' ở bên trái và trục 'Hours Studied' ở bên phải. 

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

Bảng xếp hạng X hàng đầu

Lưu ý: Trục Top-X chỉ áp dụng cho biểu đồ Material (tức là những biểu đồ có gói scatter).

Nếu muốn đặt tiêu đề và nhãn trục X lên đầu thay vì cuối biểu đồ, bạn có thể thực hiện việc đó trong biểu đồ Material bằng tuỳ chọn 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));
      }

Đang tải

Tên gói google.charts.load là "corechart" và tên lớp của hình ảnh trực quan là google.visualization.ScatterChart. 

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

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

Đối với Biểu đồ tán xạ Material, tên gói google.charts.load là "scatter" và tên lớp của hình ảnh trực quan là google.charts.Scatter. 

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

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

Định dạng dữ liệu

Hàng: Mỗi hàng trong bảng đại diện cho một tập hợp các điểm dữ liệu có cùng giá trị trục x.

Cột:

  Cột 0 Cột 1 ... Cột N
Mục đích: Giá trị điểm X Giá trị Y của chuỗi 1 ... Giá trị N của chuỗi sự kiện
Loại dữ liệu: chuỗi, số hoặc ngày/ngày/giờ trong ngày chuỗi, số hoặc ngày/ngày/giờ trong ngày ... chuỗi, số hoặc ngày/ngày/giờ trong ngày
Vai trò: data data ... data
Các vai trò không bắt buộc trong cột:

None (Không có)

 ...

Để chỉ định nhiều chuỗi dữ liệu, hãy chỉ định 2 hoặc nhiều cột trục Y và chỉ định các giá trị Y chỉ trong một cột Y:

Giá trị X Giá trị Y của chuỗi 1 Giá trị Y của chuỗi 2
10 null 75
20 null 18
33 null 22
55 16 null
14 61 null
48 3 null

 

Tuỳ chọn cấu hình

Tên
aggregationTarget
Cách hệ thống tổng hợp nhiều lựa chọn dữ liệu vào chú thích:
  • 'category': Nhóm dữ liệu đã chọn theo giá trị x.
  • 'series': Nhóm dữ liệu được chọn theo chuỗi.
  • 'auto': Nhóm dữ liệu đã chọn theo giá trị x nếu tất cả lựa chọn có cùng giá trị x, nếu không thì theo chuỗi.
  • 'none': Chỉ hiện một chú thích cho mỗi lựa chọn.
aggregationTarget thường được dùng song song với selectionMode và tooltip.trigger, ví dụ: 
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
Loại: chuỗi
Mặc định: "tự động"
animation.duration

Thời lượng của ảnh động, tính bằng mili giây. Để biết thông tin chi tiết, hãy xem tài liệu về ảnh động.

Loại: số
Mặc định: 0
animation.easing

Hàm easing được áp dụng cho ảnh động. Bạn có thể chọn trong các phương án sau đây:

  • "Tuyến tính" – Tốc độ không đổi.
  • 'in' - Giảm dần – Khởi động chậm và tăng tốc.
  • "out" – Giảm nhẹ – Bắt đầu nhanh và chậm lại.
  • "inAndOut" – Tăng và giảm – Khởi động chậm, tăng tốc, sau đó giảm tốc độ.
Loại: chuỗi
Mặc định: "tuyến tính"
animation.startup

Xác định xem biểu đồ có tạo hiệu ứng động trong lần vẽ đầu tiên hay không. Nếu là true, biểu đồ sẽ bắt đầu tại đường cơ sở và tạo hiệu ứng động cho trạng thái cuối cùng.

Loại: boolean
Mặc định là false
annotations.boxStyle

Đối với các biểu đồ hỗ trợ chú thích, đối tượng annotations.boxStyle sẽ kiểm soát giao diện của các hộp xung quanh chú giải: 

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

Tùy chọn này hiện được hỗ trợ cho biểu đồ vùng, biểu đồ thanh, cột, kết hợp, biểu đồ dạng đường và biểu đồ tán xạ. Biểu đồ này không hỗ trợ biểu đồ này trong Biểu đồ chú giải.

Loại: đối tượng
Mặc định: rỗng
annotations.datum
Đối với các biểu đồ hỗ trợ chú thích, đối tượng annotations.datum cho phép bạn ghi đè lựa chọn của Google Biểu đồ đối với những chú giải được cung cấp cho từng phần tử dữ liệu (chẳng hạn như các giá trị được hiển thị cùng với mỗi thanh trên biểu đồ thanh). Bạn có thể điều chỉnh màu sắc bằng annotations.datum.stem.color, chiều dài thân bằng annotations.datum.stem.length và kiểu bằng annotations.datum.style.
Loại: đối tượng
Mặc định: màu là "đen"; chiều dài là 12; kiểu là "điểm".
annotations.domain
Đối với các biểu đồ hỗ trợ chú thích, đối tượng annotations.domain cho phép bạn ghi đè lựa chọn của Google Biểu đồ cho các chú thích được cung cấp cho một miền (trục chính của biểu đồ, chẳng hạn như trục X trên biểu đồ dạng đường thông thường). Bạn có thể điều chỉnh màu sắc bằng annotations.domain.stem.color, chiều dài thân bằng annotations.domain.stem.length và kiểu bằng annotations.domain.style.
Loại: đối tượng
Mặc định: màu là "đen"; chiều dài là 5; kiểu là "điểm".
annotations.highContrast
Đối với các biểu đồ hỗ trợ chú thích, boolean annotations.highContrast cho phép bạn ghi đè lựa chọn màu chú thích của Google Biểu đồ. Theo mặc định, annotations.highContrast là giá trị true, khiến Biểu đồ chọn màu chú thích có độ tương phản tốt: màu sáng trên nền tối và màu tối trên nền sáng. Nếu bạn đặt annotations.highContrast thành false và không chỉ định màu chú thích của riêng mình, Google Biểu đồ sẽ sử dụng màu chuỗi mặc định cho chú thích:
Loại: boolean
Mặc định: true
annotations.stem
Đối với các biểu đồ hỗ trợ chú thích, đối tượng annotations.stem cho phép bạn ghi đè lựa chọn của Google Biểu đồ cho kiểu gốc. Bạn có thể điều chỉnh màu sắc bằng annotations.stem.color và độ dài thân bằng annotations.stem.length. Xin lưu ý rằng tuỳ chọn độ dài gốc không ảnh hưởng đến các chú giải có kiểu 'line': đối với chú giải mốc 'line', độ dài gốc luôn bằng văn bản và đối với chú thích miền 'line', gốc sẽ mở rộng trên toàn bộ biểu đồ.
Loại: đối tượng
Mặc định: màu là "đen"; độ dài là 5 đối với chú thích miền và 12 đối với chú thích mốc đo lường.
annotations.style
Đối với các biểu đồ hỗ trợ chú thích, tuỳ chọn annotations.style cho phép bạn ghi đè lựa chọn loại chú thích của Google Biểu đồ. Trạng thái đó có thể là 'line' hoặc 'point'.
Loại: chuỗi
Mặc định: "point"
annotations.textStyle
Đối với các biểu đồ hỗ trợ chú thích, đối tượng annotations.textStyle sẽ kiểm soát hình thức hiển thị văn bản của chú thích đó: 
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
    }
  }
};

Tùy chọn này hiện được hỗ trợ cho biểu đồ vùng, biểu đồ thanh, cột, kết hợp, biểu đồ dạng đường và biểu đồ tán xạ. Biểu đồ chú thích không hỗ trợ biểu đồ này Biểu đồ chú thích .

Loại: đối tượng
Mặc định: rỗng
axisTitlesPosition

Vị trí đặt tiêu đề trục, so với vùng biểu đồ. Các giá trị được hỗ trợ:

  • in – Vẽ tiêu đề trục bên trong vùng biểu đồ.
  • out – Vẽ tiêu đề trục bên ngoài vùng biểu đồ.
  • không có – Bỏ qua tiêu đề trục.
Loại: chuỗi
Mặc định: "out"
backgroundColor

Màu nền cho vùng chính của biểu đồ. Có thể là một chuỗi màu HTML đơn giản, ví dụ: 'red' hoặc '#00cc00' hoặc một đối tượng có các thuộc tính sau.

Loại: chuỗi hoặc đối tượng
Mặc định: "trắng"
backgroundColor.stroke

Màu của đường viền biểu đồ, dưới dạng chuỗi màu HTML.

Loại: chuỗi
Mặc định: "#666"
backgroundColor.strokeWidth

Chiều rộng đường viền, tính bằng pixel.

Loại: số
Mặc định: 0
backgroundColor.fill

Màu nền biểu đồ, dưới dạng chuỗi màu HTML.

Loại: chuỗi
Mặc định: "trắng"
chart.title

Đối với Biểu đồ Material, tuỳ chọn này sẽ chỉ định tiêu đề.

Loại: chuỗi
Mặc định: rỗng
chart.subtitle

Đối với Biểu đồ Material, tuỳ chọn này chỉ định phụ đề. Chỉ có Biểu đồ Material mới hỗ trợ phụ đề.

Loại: chuỗi
Mặc định: rỗng
chartArea

Một đối tượng có các thành phần để định cấu hình vị trí và kích thước của vùng biểu đồ (trong đó biểu đồ được vẽ, ngoại trừ các trục và chú giải). Có hai định dạng được hỗ trợ: số hoặc số theo sau là %. Số đơn giản là giá trị tính bằng pixel; số theo sau là % là tỷ lệ phần trăm. Ví dụ: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Loại: đối tượng
Mặc định: rỗng
chartArea.backgroundColor
Màu nền của vùng biểu đồ. Khi được sử dụng, chuỗi có thể là chuỗi hex (ví dụ: '#fdc') hoặc tên màu tiếng Anh. Khi một đối tượng được sử dụng, bạn có thể cung cấp các thuộc tính sau:
  • stroke: màu, được cung cấp dưới dạng chuỗi hex hoặc tên màu bằng tiếng Anh.
  • strokeWidth: nếu được cung cấp, hãy vẽ một đường viền xung quanh vùng biểu đồ có chiều rộng đã cho (và có màu stroke).
Loại: chuỗi hoặc đối tượng
Mặc định: "trắng"
chartArea.left

Khoảng cách để vẽ biểu đồ từ đường viền trái.

Loại: số hoặc chuỗi
Mặc định: tự động
chartArea.top

Khoảng cách để vẽ biểu đồ từ đường viền trên.

Loại: số hoặc chuỗi
Mặc định: tự động
chartArea.width

Chiều rộng vùng biểu đồ.

Loại: số hoặc chuỗi
Mặc định: tự động
chartArea.height

Chiều cao của vùng biểu đồ.

Loại: số hoặc chuỗi
Mặc định: tự động
màu

Màu sẽ sử dụng cho các thành phần trong biểu đồ. Một mảng chuỗi, trong đó mỗi phần tử là một chuỗi màu HTML, ví dụ: colors:['red','#004411'].

Loại: Mảng chuỗi
Mặc định: màu mặc định
hình chữ thập

Một đối tượng chứa các thuộc tính crosspoint của biểu đồ.

Loại: đối tượng
Mặc định: rỗng
crosshair.color

Màu chữ thập, được biểu thị bằng tên màu (ví dụ: "blue") hoặc giá trị RGB (ví dụ: "#adf").

Loại: chuỗi
Loại: mặc định
crosshair.focused

Một đối tượng chứa các thuộc tính hình chữ thập lấy tiêu điểm.
Ví dụ: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Loại: đối tượng
Mặc định: mặc định
crosshair.opacity

Độ mờ hình chữ thập, với 0.0 hoàn toàn trong suốt và 1.0 hoàn toàn mờ đục.

Loại: số
Mặc định: 1.0
crosshair.orientation

Hướng chữ thập, có thể là "dọc" chỉ đối với tóc dọc, "ngang" chỉ với tóc ngang hoặc "cả hai" đối với kiểu chữ thập truyền thống.

Loại: chuỗi
Mặc định: 'cả hai'
crosshair.selected

Một đối tượng chứa các thuộc tính chữ thập khi chọn.
Ví dụ: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

Loại: đối tượng
Mặc định: mặc định
crosshair.trigger

Thời điểm hiển thị hình chữ thập: trên 'focus', 'selection' hoặc 'both'.

Loại: chuỗi
Mặc định: 'cả hai'
curveType

Kiểm soát đường cong của các đường khi độ rộng của đường khác 0. Có thể là một trong những trạng thái sau đây:

  • "none" – Các đường thẳng không có đường cong.
  • "hàm" - Các góc của đường thẳng sẽ được làm nhẵn.
Loại:chuỗi
Mặc định: "không có"
dataOpacity

Độ trong suốt của các điểm dữ liệu, với 1.0 là hoàn toàn mờ đục và 0.0 hoàn toàn trong suốt. Trong biểu đồ tán xạ, biểu đồ, biểu đồ thanh và biểu đồ cột, dữ liệu này bao gồm dữ liệu hiển thị: các dấu chấm trong biểu đồ tán xạ và hình chữ nhật trong những biểu đồ khác. Trong các biểu đồ nơi việc chọn dữ liệu tạo ra một dấu chấm, chẳng hạn như biểu đồ đường và biểu đồ vùng, đó là các vòng tròn xuất hiện khi di chuột hoặc chọn. Biểu đồ kết hợp thể hiện cả hai hành vi và tuỳ chọn này không ảnh hưởng đến các biểu đồ khác. (Để thay đổi độ mờ của một đường xu hướng, hãy xem độ mờ của đường xu hướng .)

Loại: số
Mặc định: 1.0
enableInteractivity

Liệu biểu đồ có gửi các sự kiện dựa trên người dùng hay phản ứng với hoạt động tương tác của người dùng hay không. Nếu đặt là false, biểu đồ sẽ không gửi "select" (đã chọn) hoặc các sự kiện dựa trên hoạt động tương tác khác (nhưng sẽ gửi các sự kiện lỗi sẵn sàng hoặc lỗi) và sẽ không hiển thị văn bản di chuột hay thay đổi tuỳ thuộc vào hoạt động đầu vào của người dùng.

Loại: boolean
Mặc định: true
trình khám phá

Tùy chọn explorer cho phép người dùng xoay và thu phóng các biểu đồ của Google. explorer: {} cung cấp hành vi của trình khám phá mặc định, cho phép người dùng kéo theo chiều ngang và chiều dọc bằng cách kéo, cũng như phóng to và thu nhỏ bằng cách cuộn.

Tính năng này đang ở giai đoạn thử nghiệm và có thể thay đổi trong các bản phát hành sau này.

Lưu ý: Trình khám phá chỉ làm việc với các trục liên tục (chẳng hạn như số hoặc ngày).

Loại: đối tượng
Mặc định: rỗng
explorer.actions

Trình khám phá Google Biểu đồ hỗ trợ ba thao tác:

  • dragToPan: Kéo để xoay xung quanh biểu đồ theo chiều ngang và chiều dọc. Để chỉ xoay dọc theo trục ngang, hãy sử dụng explorer: { axis: 'horizontal' }. Tương tự đối với trục tung.
  • dragToZoom: Hành vi mặc định của trình khám phá là phóng to và thu nhỏ khi người dùng cuộn. Nếu bạn sử dụng explorer: { actions: ['dragToZoom', 'rightClickToReset'] }, việc kéo qua một vùng hình chữ nhật sẽ phóng to vùng đó. Bạn nên sử dụng rightClickToReset bất cứ khi nào dùng dragToZoom. Hãy xem explorer.maxZoomIn, explorer.maxZoomOut và explorer.zoomDelta để biết cách tuỳ chỉnh tính năng thu phóng.
  • rightClickToReset: Thao tác nhấp chuột phải vào biểu đồ sẽ đưa biểu đồ về mức độ kéo và thu phóng ban đầu.
Loại: Mảng chuỗi
Mặc định: ['dragToPan', 'rightClickToReset']
explorer.axis

Theo mặc định, người dùng có thể xoay cả chiều ngang và chiều dọc khi sử dụng tuỳ chọn explorer. Nếu bạn muốn người dùng chỉ xoay ngang, hãy sử dụng explorer: { axis: 'horizontal' }. Tương tự, explorer: { axis: 'vertical' } cho phép kéo chỉ theo chiều dọc.

Loại: chuỗi
Mặc định: cả chế độ kéo theo chiều ngang và chiều dọc
explorer.keepInBounds

Theo mặc định, người dùng có thể xoay xung quanh, bất kể dữ liệu ở đâu. Để đảm bảo rằng người dùng không di chuyển ra ngoài biểu đồ ban đầu, hãy sử dụng explorer: { keepInBounds: true }.

Loại: boolean
Mặc định: false
explorer.maxZoomIn

Mức tối đa mà trình khám phá có thể phóng to. Theo mặc định, người dùng sẽ có thể phóng to đủ để chỉ thấy 25% so với chế độ xem gốc. Việc đặt explorer: { maxZoomIn: .5 } sẽ cho phép người dùng chỉ phóng to đủ để nhìn thấy một nửa khung hiển thị gốc.

Loại: số
Mặc định: 0,25
explorer.maxZoomOut

Mức tối đa mà trình khám phá có thể thu nhỏ. Theo mặc định, người dùng sẽ có thể thu nhỏ đủ xa để biểu đồ chỉ chiếm 1/4 không gian có sẵn. Việc thiết lập explorer: { maxZoomOut: 8 } sẽ cho phép người dùng thu nhỏ đủ tốt để biểu đồ chỉ chiếm 1/8 không gian có sẵn.

Loại: số
Mặc định: 4
explorer.zoomDelta

Khi người dùng phóng to hoặc thu nhỏ, explorer.zoomDelta sẽ xác định mức độ họ phóng to. Số càng nhỏ, việc thu phóng càng mượt và chậm.

Loại: số
Mặc định: 1.5
fontSize

Cỡ chữ mặc định, tính bằng pixel, của tất cả văn bản trong biểu đồ. Bạn có thể ghi đè thuộc tính này bằng cách sử dụng thuộc tính cho các phần tử cụ thể trong biểu đồ.

Loại: số
Mặc định: tự động
fontName

Phông chữ mặc định cho tất cả văn bản trong biểu đồ. Bạn có thể ghi đè thuộc tính này bằng cách sử dụng thuộc tính cho các phần tử cụ thể trong biểu đồ.

Loại: chuỗi
Mặc định: "vi"
forceIFrame

Vẽ biểu đồ bên trong một khung cùng dòng. (Lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ của IE8 đều được vẽ trong các khung i.)

Loại: boolean
Mặc định: false
hAxis

Đối tượng có các thành phần để định cấu hình nhiều phần tử trục hoành. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: 

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
Loại: đối tượng
Mặc định: rỗng
hAxis.baseline

Đường cơ sở cho trục hoành.

Loại: số
Mặc định: tự động
hAxis.baselineColor

Màu của đường cơ sở cho trục hoành. Có thể là chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'.

Loại: số
Mặc định: "đen"
hAxis.direction

Hướng mà theo đó các giá trị dọc theo trục hoành sẽ phát triển. Hãy chỉ định -1 để đảo ngược thứ tự của các giá trị.

Loại: 1 hoặc -1
Mặc định: 1
hAxis.format

Chuỗi định dạng cho các nhãn trục số. Đây là tập con của bộ mẫu ICU . Ví dụ: {format:'#,###%'} sẽ hiển thị các giá trị "1.000%", "750%" và "50%" cho các giá trị 10, 7,5 và 0,5. Bạn cũng có thể cung cấp bất kỳ thông tin nào sau đây:

  • {format: 'none'}: cho thấy số không có định dạng (ví dụ: 8000000)
  • {format: 'decimal'}: hiển thị các số với dấu phân cách hàng nghìn (ví dụ: 8.000.000)
  • {format: 'scientific'}: hiển thị số dưới dạng ký hiệu khoa học (ví dụ: 8e6)
  • {format: 'currency'}: hiển thị những số bằng nội tệ (ví dụ: $8.000.000)
  • {format: 'percent'}: hiển thị số dưới dạng tỷ lệ phần trăm (ví dụ: 800.000.000%)
  • {format: 'short'}: hiển thị các số được viết tắt (ví dụ: 8 triệu)
  • {format: 'long'}: hiển thị số ở dạng từ đầy đủ (ví dụ: 8 triệu)

Định dạng thực tế áp dụng cho nhãn được lấy từ ngôn ngữ mà API được tải. Để biết thêm thông tin chi tiết, hãy xem cách tải biểu đồ bằng một ngôn ngữ cụ thể .

Trong tính toán giá trị đánh dấu nhịp độ khung hình và đường lưới, một số tổ hợp thay thế của tất cả các lựa chọn đường lưới có liên quan sẽ được xem xét và các lựa chọn thay thế sẽ bị từ chối nếu nhãn đánh dấu nhịp độ khung hình được định dạng bị trùng lặp hoặc chồng chéo. Vì vậy, bạn có thể chỉ định format:"#" nếu chỉ muốn hiện giá trị đánh dấu nhịp độ khung hình số nguyên, nhưng hãy lưu ý rằng nếu không có phương án thay thế nào đáp ứng điều kiện này, thì sẽ không có đường lưới hoặc kim đánh dấu nhịp độ khung hình nào xuất hiện.

Loại: chuỗi
Mặc định: tự động
hAxis.gridlines

Đối tượng có các thuộc tính để định cấu hình đường lưới trên trục hoành. Xin lưu ý rằng đường lưới trục hoành sẽ được vẽ theo chiều dọc. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu bằng chữ của đối tượng, như minh hoạ dưới đây: 

{color: '#333', minSpacing: 20}
Loại: đối tượng
Mặc định: rỗng
hAxis.gridlines.color

Màu của đường lưới ngang bên trong vùng biểu đồ. Hãy chỉ định một chuỗi màu HTML hợp lệ.

Loại: chuỗi
Mặc định: "#CCC"
hAxis.gridlines.count

Số lượng đường lưới ngang gần đúng trong khu vực biểu đồ. Nếu bạn chỉ định một số dương cho gridlines.count, thì số này sẽ được dùng để tính minSpacing giữa các đường lưới. Bạn có thể chỉ định giá trị 1 để chỉ vẽ một đường lưới hoặc 0 để không vẽ đường lưới. Chỉ định -1 (giá trị mặc định) để tự động tính toán số lượng đường lưới dựa trên các tuỳ chọn khác.

Loại: số
Mặc định: -1
hAxis.gridlines.units

Ghi đè định dạng mặc định cho nhiều khía cạnh của loại dữ liệu ngày/ngày/giờ trong ngày khi được sử dụng cùng với đường lưới được tính toán trong biểu đồ. Cho phép định dạng năm, tháng, ngày, giờ, phút, giây và mili giây.

Định dạng chung là:

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*/]},
  }
}

Bạn có thể xem thêm thông tin trong Ngày và giờ.

Loại: đối tượng
Mặc định: rỗng
hAxis.minorGridlines

Một đối tượng có các thành phần để định cấu hình các đường lưới nhỏ trên trục ngang, tương tự như tuỳ chọn hAxis.gridlines.

Loại: đối tượng
Mặc định: rỗng
hAxis.minorGridlines.color

Màu của các đường lưới nhỏ nằm ngang bên trong vùng biểu đồ. Hãy chỉ định một chuỗi màu HTML hợp lệ.

Loại: chuỗi
Mặc định: Kết hợp màu đường lưới và màu nền
hAxis.minorGridlines.count

Hầu hết, tuỳ chọn minorGridlines.count không được dùng nữa, ngoại trừ việc tắt các đường lưới nhỏ bằng cách đặt số lượng thành 0. Số lượng đường lưới nhỏ hiện phụ thuộc hoàn toàn vào khoảng thời gian giữa các đường lưới chính (xem hAxis.gridlines.interval) và không gian tối thiểu cần thiết (xem hAxis.minorGridlines.minSpacing).

Loại: số
Mặc định:1
hAxis.minorGridlines.units

Ghi đè định dạng mặc định cho nhiều khía cạnh của loại dữ liệu ngày/ngày/giờ trong ngày khi được sử dụng cùng với subGridlines được tính toán trên biểu đồ. Cho phép định dạng năm, tháng, ngày, giờ, phút, giây và mili giây.

Định dạng chung là:

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*/]},
  }
}

Bạn có thể xem thêm thông tin trong Ngày và giờ.

Loại: đối tượng
Mặc định: rỗng
hAxis.logScale

Thuộc tính hAxis làm cho trục hoành trở thành thang đo logarit (yêu cầu tất cả các giá trị đều phải là số dương). Đặt thành true nếu có.

Loại: boolean
Mặc định: false
hAxis.scaleType

Thuộc tính hAxis khiến trục hoành trở thành thang đo logarit. Có thể là một trong những trạng thái sau đây:

  • rỗng – Không thực hiện tỷ lệ logarit.
  • "log" – Chia tỷ lệ lôgarit. Các giá trị âm và 0 không được vẽ biểu đồ. Tuỳ chọn này giống với việc thiết lập hAxis: { logscale: true }.
  • "mirrorLog" – Tỷ lệ lôgarit trong đó các giá trị âm và 0 được vẽ biểu đồ. Giá trị được vẽ biểu đồ của một số âm là số âm của nhật ký của giá trị tuyệt đối. Các giá trị gần bằng 0 được vẽ trên thang đo tuyến tính.
Loại: chuỗi
Mặc định: rỗng
hAxis.textPosition

Vị trí của văn bản trên trục hoành, so với vùng biểu đồ. Các giá trị được hỗ trợ: "out", "in", "none".

Loại: chuỗi
Mặc định: "out"
hAxis.textStyle

Đối tượng chỉ định kiểu văn bản trục hoành. Đối tượng có định dạng sau:

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

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

Thay thế các kim đánh dấu nhịp độ khung hình trên trục X được tạo tự động bằng mảng được chỉ định. Mỗi phần tử của mảng phải là một giá trị đánh dấu nhịp độ khung hình hợp lệ (chẳng hạn như số, ngày, ngày giờ hoặc thời gian trong ngày) hoặc một đối tượng. Nếu đó là một đối tượng, đối tượng đó phải có thuộc tính v cho giá trị đánh dấu nhịp độ khung hình và thuộc tính f không bắt buộc chứa chuỗi giá trị cố định được hiển thị dưới dạng nhãn.

ViewWindow sẽ được tự động mở rộng để bao gồm các kim đánh dấu nhịp độ khung hình tối thiểu và tối đa trừ phi bạn chỉ định viewWindow.min hoặc viewWindow.max để ghi đè.

Ví dụ:

  • 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] }
Loại: Mảng gồm các phần tử
Mặc định: tự động
hAxis.title

Thuộc tính hAxis chỉ định tiêu đề của trục hoành.

Loại: chuỗi
Mặc định: rỗng
hAxis.titleTextStyle

Đối tượng chỉ định kiểu văn bản tiêu đề trục hoành. Đối tượng có định dạng sau: 

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

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.maxValue

Di chuyển giá trị tối đa của trục hoành đến giá trị được chỉ định; giá trị này sẽ sang phải trong hầu hết các biểu đồ. Sẽ bỏ qua nếu giá trị này được đặt thành một giá trị nhỏ hơn giá trị x tối đa của dữ liệu. hAxis.viewWindow.max ghi đè thuộc tính này.

Loại: số
Mặc định: tự động
hAxis.minValue

Di chuyển giá trị tối thiểu của trục hoành đến giá trị được chỉ định; giá trị này sẽ được di chuyển sang trái trong hầu hết các biểu đồ. Sẽ bỏ qua nếu bạn đặt giá trị này thành một giá trị lớn hơn giá trị x tối thiểu của dữ liệu. hAxis.viewWindow.min ghi đè thuộc tính này.

Loại: số
Mặc định: tự động
hAxis.viewWindowMode

Chỉ định cách điều chỉnh tỷ lệ trục hoành để hiển thị các giá trị trong vùng biểu đồ. Các giá trị chuỗi sau được hỗ trợ:

  • "pretty" – Điều chỉnh tỷ lệ các giá trị theo chiều ngang để giá trị dữ liệu tối đa và tối thiểu hiển thị một chút bên trong bên trái và bên phải của vùng biểu đồ. ViewWindow được mở rộng thành đường lưới chính gần nhất đối với các số hoặc đường lưới nhỏ gần nhất đối với ngày và giờ.
  • "đã phóng to" – Điều chỉnh tỷ lệ các giá trị theo chiều ngang sao cho giá trị dữ liệu tối đa và tối thiểu chạm vào bên trái và bên phải vùng biểu đồ. Thao tác này sẽ khiến haxis.viewWindow.min và haxis.viewWindow.max bị bỏ qua.
  • "explicit" – Một tuỳ chọn không còn được dùng để chỉ định các giá trị tỷ lệ trái và phải của vùng biểu đồ. (Không dùng nữa vì phương thức này không cần thiết cho haxis.viewWindow.min và haxis.viewWindow.max.) Các giá trị dữ liệu bên ngoài các giá trị này sẽ bị cắt. Bạn phải chỉ định một đối tượng hAxis.viewWindow mô tả các giá trị tối đa và tối thiểu cần hiển thị.
Loại: chuỗi
Mặc định: Tương đương với "pretty", nhưng haxis.viewWindow.min và haxis.viewWindow.max sẽ được ưu tiên nếu được sử dụng.
hAxis.viewWindow

Chỉ định phạm vi cắt theo trục hoành.

Loại: đối tượng
Mặc định: rỗng
hAxis.viewWindow.max

Giá trị dữ liệu chiều ngang tối đa cần hiển thị.

Bỏ qua khi hAxis.viewWindowMode có giá trị "đẹp" hoặc "đã phóng to".

Loại: số
Mặc định: tự động
hAxis.viewWindow.min

Giá trị dữ liệu ngang tối thiểu để hiển thị.

Bỏ qua khi hAxis.viewWindowMode có giá trị "đẹp" hoặc "đã phóng to".

Loại: số
Mặc định: tự động
độ cao

Chiều cao của biểu đồ, tính bằng pixel.

Loại: số
Mặc định: chiều cao của phần tử chứa
chú thích

Một đối tượng có các thành phần để định cấu hình nhiều khía cạnh của chú giải. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu bằng chữ của đối tượng, như minh hoạ dưới đây: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Loại: đối tượng
Mặc định: rỗng
legend.alignment

Căn chỉnh chú thích. Có thể là một trong những trạng thái sau đây:

  • "start" ("bắt đầu") – Được căn chỉnh với đầu khu vực được phân bổ cho chú giải.
  • "center" – Căn giữa trong khu vực được phân bổ cho chú giải.
  • 'end' – Được căn chỉnh với cuối vùng được phân bổ cho chú giải.

Bắt đầu, giữa và kết thúc tương ứng với kiểu (dọc hoặc ngang) của chú thích. Ví dụ: trong chú giải 'bên phải', 'bắt đầu' và 'kết thúc' lần lượt nằm ở trên cùng và dưới cùng; đối với chú giải 'trên cùng', 'bắt đầu' và 'kết thúc' sẽ lần lượt ở bên trái và bên phải của khu vực.

Giá trị mặc định tuỳ thuộc vào vị trí của chú giải. Đối với chú giải 'dưới cùng', giá trị mặc định là "trung tâm"; các chú giải khác được đặt mặc định là "bắt đầu".

Loại: chuỗi
Mặc định: tự động
legend.maxLines

Số dòng tối đa trong chú giải. Đặt thuộc tính này thành một số lớn hơn 1 để thêm các dòng vào chú thích. Lưu ý: Logic chính xác dùng để xác định số dòng thực tế đã kết xuất vẫn ở thông lượng.

Lựa chọn này hiện chỉ hoạt động khi theo dõi.

Loại: số
Mặc định: 1
legend.pageIndex

Chỉ mục trang ban đầu được chọn dựa trên số 0 của chú giải.

Loại: số
Mặc định: 0
legend.position

Vị trí của chú thích. Có thể là một trong những trạng thái sau đây:

  • "dưới cùng" – Bên dưới biểu đồ.
  • "trái" – Ở bên trái biểu đồ, miễn là trục trái không có chuỗi dữ liệu nào được liên kết. Vì vậy, nếu bạn muốn chú giải ở bên trái, hãy sử dụng tuỳ chọn targetAxisIndex: 1.
  • "trong" – Bên trong biểu đồ, ở góc trên cùng bên trái.
  • "none" – Không có chú giải nào được hiển thị.
  • "phải" – Ở bên phải biểu đồ. Không tương thích với tuỳ chọn vAxes.
  • "trên cùng" - Phía trên biểu đồ.
Loại: chuỗi
Mặc định: "phải"
legend.textStyle

Đối tượng chỉ định kiểu văn bản chú thích. Đối tượng có định dạng sau:

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

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
lineWidth

Độ rộng của đường tính bằng pixel. Sử dụng số 0 để ẩn tất cả các dòng và chỉ hiển thị các điểm.

Loại: số
Mặc định: 0
hướng

Hướng của biểu đồ. Khi bạn đặt thành 'vertical', hãy xoay các trục của biểu đồ để (ví dụ) biểu đồ cột trở thành biểu đồ thanh và biểu đồ vùng tăng lên sang phải thay vì hướng lên:

Loại: chuỗi
Mặc định: "ngang"
pointShape

Hình dạng của các phần tử dữ liệu riêng lẻ: "vòng tròn", "hình tam giác", "hình vuông", "hình thoi", "ngôi sao" hoặc "đa giác". Hãy xem tài liệu về điểm để biết ví dụ.

Loại: chuỗi
Mặc định: 'vòng tròn'
pointSize

Đường kính của điểm dữ liệu, tính bằng pixel. Hãy sử dụng số 0 để ẩn tất cả các điểm. Bạn có thể ghi đè các giá trị cho từng bộ sách bằng cách sử dụng thuộc tính series. Nếu bạn đang sử dụng một đường xu hướng, lựa chọn này cũng sẽ ảnh hưởng đến pointSize của các điểm chứa đường xu hướng đó. Điều này sẽ làm thay đổi độ rộng biểu kiến của đường xu hướng. Để tránh trường hợp này, bạn có thể ghi đè bằng tuỳ chọn trendlines.n.pointsize.

Loại: số
Mặc định: 7
pointsVisible

Xác định xem các điểm có được hiển thị hay không. Đặt thành false để ẩn tất cả các điểm. Bạn có thể ghi đè các giá trị của từng chuỗi văn bản bằng cách sử dụng thuộc tính series. Nếu bạn đang sử dụng một đường xu hướng, tuỳ chọn pointsVisible sẽ ảnh hưởng đến mức độ hiển thị của các điểm trên tất cả các đường xu hướng trừ phi bạn ghi đè đường xu hướng đó bằng tuỳ chọn trendlines.n.pointsVisible.

Bạn cũng có thể ghi đè thuộc tính này bằng cách sử dụng vai trò kiểu ở dạng "point {visible: true}".

Loại: boolean
Mặc định: true
selectionMode

Khi selectionMode là 'multiple', người dùng có thể chọn nhiều điểm dữ liệu.

Loại: chuỗi
Mặc định: "đơn"
loạt phim

Một mảng gồm các đối tượng, mỗi đối tượng mô tả định dạng của các chuỗi đối tượng tương ứng trong biểu đồ. Để sử dụng các giá trị mặc định cho một chuỗi dữ liệu, hãy chỉ định một đối tượng trống {}. Nếu bạn không chỉ định một chuỗi hoặc một giá trị, thì giá trị chung sẽ được sử dụng. Mỗi đối tượng hỗ trợ các thuộc tính sau:

  • color – Màu dùng cho chuỗi dữ liệu này. Hãy chỉ định chuỗi màu HTML hợp lệ.
  • labelInLegend – Nội dung mô tả về bộ sách xuất hiện trong phần chú thích trên biểu đồ.
  • lineWidth – Ghi đè giá trị lineWidth chung cho chuỗi chủ đề này.
  • pointShape – Ghi đè giá trị pointShape chung cho chuỗi chủ đề này.
  • pointSize – Ghi đè giá trị pointSize chung cho chuỗi chủ đề này.
  • pointsVisible – Ghi đè giá trị pointsVisible chung cho chuỗi chủ đề này.
  • visibleInLegend – Một giá trị boolean, trong đó true có nghĩa là bộ sách phải có mục nhập chú giải và false có nghĩa là không nên có mục nhập này. Mặc định là đúng.

Bạn có thể chỉ định một mảng đối tượng, mỗi mảng đối tượng áp dụng cho chuỗi theo thứ tự đã cho, hoặc bạn có thể chỉ định một đối tượng mà trong đó mỗi phần tử con có một khoá số để cho biết chuỗi đối tượng đó được áp dụng cho chuỗi nào. Ví dụ: hai nội dung khai báo sau đây giống hệt nhau và khai báo bộ sách đầu tiên có màu đen và không có chú giải, còn bộ sách thứ tư có màu đỏ và không có chú giải: 

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
Loại: Mảng đối tượng hoặc đối tượng có các đối tượng lồng nhau
Mặc định: {}
chủ đề

Giao diện là một tập hợp các giá trị tuỳ chọn được xác định trước, kết hợp với nhau để đạt được một hành vi cụ thể trên biểu đồ hoặc hiệu ứng hình ảnh. Hiện chỉ có một giao diện:

  • "đã phóng to" – Phóng to vùng biểu đồ và vẽ phần chú thích cũng như tất cả các nhãn bên trong vùng biểu đồ đó. Thiết lập các tuỳ chọn sau: 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
Loại: chuỗi
Mặc định: rỗng
title

Văn bản để hiển thị phía trên biểu đồ.

Loại: chuỗi
Mặc định: không có tiêu đề
titlePosition

Vị trí đặt tiêu đề biểu đồ so với khu vực trên biểu đồ. Các giá trị được hỗ trợ:

  • vào – Vẽ tiêu đề bên trong vùng biểu đồ.
  • out – Vẽ tiêu đề bên ngoài vùng biểu đồ.
  • không có – Bỏ qua tiêu đề.
Loại: chuỗi
Mặc định: "out"
titleTextStyle

Đối tượng chỉ định kiểu văn bản tiêu đề. Đối tượng có định dạng sau:

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

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
chú thích

Một đối tượng có các thành viên để định cấu hình nhiều phần tử chú thích. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu bằng chữ đối tượng, như minh hoạ dưới đây: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Loại: đối tượng
Mặc định: rỗng
tooltip.ignoreBounds

Nếu bạn đặt thành true, bản vẽ chú thích sẽ hiển thị bên ngoài ranh giới của biểu đồ ở tất cả các phía.

Lưu ý: Cách này chỉ áp dụng cho chú thích HTML. Nếu bạn bật tính năng này bằng chú thích SVG, thì mọi phần tràn bên ngoài giới hạn của biểu đồ sẽ bị cắt. Hãy xem bài viết Tuỳ chỉnh nội dung chú thích để biết thêm chi tiết.

Loại: boolean
Mặc định: false
tooltip.isHtml

Nếu bạn đặt chính sách này thành true, hãy sử dụng chú giải công cụ được kết xuất HTML (thay vì kết xuất SVG). Hãy xem bài viết Tuỳ chỉnh nội dung chú thích để biết thêm chi tiết.

Lưu ý: Tính năng tuỳ chỉnh nội dung chú thích HTML thông qua vai trò dữ liệu của cột chú giải công cụ không được hỗ trợ trong hình ảnh Biểu đồ bong bóng.

Loại: boolean
Mặc định: false
tooltip.showColorCode

Nếu đúng, hãy hiển thị các hình vuông được tô màu bên cạnh thông tin về bộ sách trong chú thích.

Loại: boolean
Mặc định: false
tooltip.textStyle

Đối tượng chỉ định kiểu văn bản cho chú giải công cụ. Đối tượng có định dạng sau:

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

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

Hoạt động tương tác của người dùng khiến chú thích xuất hiện:

  • "focus" – Chú thích sẽ hiển thị khi người dùng di chuột qua phần tử.
  • "none" – Chú giải công cụ sẽ không được hiển thị.
  • 'lựa chọn' - Chú giải công cụ sẽ được hiển thị khi người dùng chọn phần tử.
Loại: chuỗi
Mặc định: "lấy nét"
đường xu hướng

Hiển thị đường xu hướng trên biểu đồ hỗ trợ chúng. Theo mặc định, các đường xu hướng tuyến tính được sử dụng, nhưng bạn có thể tuỳ chỉnh đường xu hướng này bằng tuỳ chọn trendlines.n.type.

Đường xu hướng được chỉ định theo từng chuỗi, vì vậy, các lựa chọn của bạn sẽ luôn có dạng như sau: 

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
Loại: đối tượng
Mặc định: rỗng
trendlines.n.color

Màu của đường xu hướng , được biểu thị bằng tên màu bằng tiếng Anh hoặc chuỗi hex.

Loại: chuỗi
Mặc định: màu mặc định của chuỗi
trendlines.n.degree

Đối với đường xu hướng của type: 'polynomial', bậc của đa thức (2 cho bậc hai, 3 cho bậc ba, v.v.). (Cấp độ mặc định có thể thay đổi từ 3 thành 2 trong bản phát hành sắp tới của Google Biểu đồ.)

Loại: số
Mặc định: 3
trendlines.n.labelInLegend

Nếu được đặt, đường xu hướng sẽ xuất hiện trong phần chú thích dưới dạng chuỗi này.

Loại: chuỗi
Mặc định: rỗng
trendlines.n.lineWidth

Chiều rộng đường của đường xu hướng , tính bằng pixel.

Loại: số
Mặc định: 2
trendlines.n.opacity

Độ trong suốt của đường xu hướng , từ 0 (trong suốt) đến 1 (không rõ ràng).

Loại: số
Mặc định: 1.0
trendlines.n.pointSize

Đường xu hướng được tạo bằng cách đánh dấu một loạt dấu chấm trên biểu đồ; lựa chọn hiếm khi cần thiết này cho phép bạn tuỳ chỉnh kích thước của các dấu chấm. Lựa chọn lineWidth của đường xu hướng thường được ưu tiên hơn. Tuy nhiên, bạn sẽ cần tuỳ chọn này nếu đang sử dụng tuỳ chọn pointSize chung và muốn có kích thước điểm khác cho các đường xu hướng của mình.

Loại: số
Mặc định: 1
trendlines.n.pointsVisible

Đường xu hướng được tạo bằng cách đánh dấu một loạt dấu chấm trên biểu đồ. Tuỳ chọn pointsVisible của đường xu hướng sẽ xác định xem các điểm của một đường xu hướng cụ thể có hiển thị hay không.

Loại: boolean
Mặc định: true
trendlines.n.showR2

Hiển thị hệ số xác định trong phần chú thích hay chú thích về đường xu hướng.

Loại: boolean
Mặc định: false
trendlines.n.type

Liệu đường xu hướng là 'linear' (mặc định), 'exponential' hay 'polynomial'.

Loại: chuỗi
Mặc định: tuyến tính
trendlines.n.visibleInLegend

Liệu đường xu hướng có xuất hiện trong phần chú thích hay không. (Giá trị này sẽ xuất hiện trong chú giải công cụ về đường xu hướng.)

Loại: boolean
Mặc định: false
vAxis

Đối tượng có các thành phần để định cấu hình nhiều phần tử trục tung. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu bằng chữ của đối tượng, như minh hoạ dưới đây: 

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Loại: đối tượng
Mặc định: rỗng
vAxis.baseline

Thuộc tính vAxis chỉ định đường cơ sở cho trục tung. Nếu đường cơ sở lớn hơn đường lưới cao nhất hoặc nhỏ hơn đường lưới thấp nhất, thì đường cơ sở sẽ được làm tròn thành đường lưới gần nhất.

Loại: số
Mặc định: tự động
vAxis.baselineColor

Chỉ định màu của đường cơ sở cho trục tung. Có thể là chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'.

Loại: số
Mặc định: "đen"
vAxis.direction

Hướng mà các giá trị dọc theo trục tung phát triển. Theo mặc định, các giá trị thấp sẽ nằm ở cuối biểu đồ. Hãy chỉ định -1 để đảo ngược thứ tự của các giá trị.

Loại: 1 hoặc -1
Mặc định: 1
vAxis.format

Chuỗi định dạng cho các nhãn trục số. Đây là tập con của bộ mẫu ICU . Ví dụ: {format:'#,###%'} sẽ hiển thị các giá trị "1.000%", "750%" và "50%" cho các giá trị 10, 7,5 và 0,5. Bạn cũng có thể cung cấp bất kỳ thông tin nào sau đây:

  • {format: 'none'}: cho thấy số không có định dạng (ví dụ: 8000000)
  • {format: 'decimal'}: hiển thị các số với dấu phân cách hàng nghìn (ví dụ: 8.000.000)
  • {format: 'scientific'}: hiển thị số dưới dạng ký hiệu khoa học (ví dụ: 8e6)
  • {format: 'currency'}: hiển thị những số bằng nội tệ (ví dụ: $8.000.000)
  • {format: 'percent'}: hiển thị số dưới dạng tỷ lệ phần trăm (ví dụ: 800.000.000%)
  • {format: 'short'}: hiển thị các số được viết tắt (ví dụ: 8 triệu)
  • {format: 'long'}: hiển thị số ở dạng từ đầy đủ (ví dụ: 8 triệu)

Định dạng thực tế áp dụng cho nhãn được lấy từ ngôn ngữ mà API được tải. Để biết thêm thông tin chi tiết, hãy xem cách tải biểu đồ bằng một ngôn ngữ cụ thể .

Trong tính toán giá trị đánh dấu nhịp độ khung hình và đường lưới, một số tổ hợp thay thế của tất cả các lựa chọn đường lưới có liên quan sẽ được xem xét và các lựa chọn thay thế sẽ bị từ chối nếu nhãn đánh dấu nhịp độ khung hình được định dạng bị trùng lặp hoặc chồng chéo. Vì vậy, bạn có thể chỉ định format:"#" nếu chỉ muốn hiện giá trị đánh dấu nhịp độ khung hình số nguyên, nhưng hãy lưu ý rằng nếu không có phương án thay thế nào đáp ứng điều kiện này, thì sẽ không có đường lưới hoặc kim đánh dấu nhịp độ khung hình nào xuất hiện.

Loại: chuỗi
Mặc định: tự động
vAxis.gridlines

Đối tượng có các thành phần để định cấu hình đường lưới trên trục tung. Xin lưu ý rằng đường lưới trục tung được vẽ theo chiều ngang. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: 

{color: '#333', minSpacing: 20}
Loại: đối tượng
Mặc định: rỗng
vAxis.gridlines.color

Màu của đường lưới dọc bên trong vùng biểu đồ. Hãy chỉ định chuỗi màu HTML hợp lệ.

Loại: chuỗi
Mặc định: "#CCC"
vAxis.gridlines.count

Số lượng đường lưới ngang gần đúng trong khu vực biểu đồ. Nếu bạn chỉ định một số dương cho gridlines.count, thì số này sẽ được dùng để tính minSpacing giữa các đường lưới. Bạn có thể chỉ định giá trị 1 để chỉ vẽ một đường lưới hoặc 0 để không vẽ đường lưới. Chỉ định -1 (giá trị mặc định) để tự động tính toán số lượng đường lưới dựa trên các tuỳ chọn khác.

Loại: số
Mặc định: -1
vAxis.gridlines.units

Ghi đè định dạng mặc định cho nhiều khía cạnh của loại dữ liệu ngày/ngày/giờ trong ngày khi được sử dụng cùng với đường lưới được tính toán trong biểu đồ. Cho phép định dạng năm, tháng, ngày, giờ, phút, giây và mili giây.

Định dạng chung là:

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*/]}
  }
}

Bạn có thể xem thêm thông tin trong Ngày và giờ.

Loại: đối tượng
Mặc định: rỗng
vAxis.minorGridlines

Một đối tượng có các thành phần để định cấu hình các đường lưới nhỏ trên trục tung, tương tự như tuỳ chọn vAxis.gridlines.

Loại: đối tượng
Mặc định: rỗng
vAxis.minorGridlines.color

Màu của các đường lưới nhỏ dọc bên trong vùng biểu đồ. Hãy chỉ định một chuỗi màu HTML hợp lệ.

Loại: chuỗi
Mặc định: Kết hợp màu đường lưới và màu nền
vAxis.minorGridlines.count

Hầu hết, chúng tôi không còn sử dụng tuỳ chọn extraGridlines.count, ngoại trừ việc tắt các đường lưới nhỏ bằng cách đặt số lượng thành 0. Số lượng đường lưới nhỏ phụ thuộc vào khoảng thời gian giữa các đường lưới chính (xem vAxis.gridlines.interval) và không gian cần thiết tối thiểu (xem vAxis.minorGridlines.minSpacing).

Loại: số
Mặc định: 1
vAxis.minorGridlines.units

Ghi đè định dạng mặc định cho nhiều khía cạnh của loại dữ liệu ngày/ngày/giờ trong ngày khi được sử dụng cùng với subGridlines được tính toán trên biểu đồ. Cho phép định dạng năm, tháng, ngày, giờ, phút, giây và mili giây.

Định dạng chung là:

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*/]},
  }
}

Bạn có thể xem thêm thông tin trong Ngày và giờ.

Loại: đối tượng
Mặc định: rỗng
vAxis.logScale

Nếu đúng, hãy đặt trục tung trở thành thang đo logarit. Lưu ý: Tất cả các giá trị đều phải là số dương.

Loại: boolean
Mặc định: false
vAxis.scaleType

Thuộc tính vAxis khiến trục tung trở thành thang đo logarit. Có thể là một trong những trạng thái sau đây:

  • rỗng – Không thực hiện tỷ lệ logarit.
  • "log" – Chia tỷ lệ lôgarit. Các giá trị âm và 0 không được vẽ biểu đồ. Tuỳ chọn này giống với việc thiết lập vAxis: { logscale: true }.
  • "mirrorLog" – Tỷ lệ lôgarit trong đó các giá trị âm và 0 được vẽ biểu đồ. Giá trị được vẽ biểu đồ của một số âm là số âm của nhật ký của giá trị tuyệt đối. Các giá trị gần bằng 0 được vẽ trên thang đo tuyến tính.
Loại: chuỗi
Mặc định: rỗng
vAxis.textPosition

Vị trí của văn bản trên trục tung, so với vùng biểu đồ. Các giá trị được hỗ trợ: "out", "in", "none".

Loại: chuỗi
Mặc định: "out"
vAxis.textStyle

Đối tượng chỉ định kiểu văn bản trục tung. Đối tượng có định dạng sau:

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

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

Thay thế các kim đánh dấu nhịp độ khung hình trên trục Y được tạo tự động bằng mảng được chỉ định. Mỗi phần tử của mảng phải là một giá trị đánh dấu nhịp độ khung hình hợp lệ (chẳng hạn như số, ngày, ngày giờ hoặc thời gian trong ngày) hoặc một đối tượng. Nếu đó là một đối tượng, đối tượng đó phải có thuộc tính v cho giá trị đánh dấu nhịp độ khung hình và thuộc tính f không bắt buộc chứa chuỗi giá trị cố định được hiển thị dưới dạng nhãn.

ViewWindow sẽ được tự động mở rộng để bao gồm các kim đánh dấu nhịp độ khung hình tối thiểu và tối đa trừ phi bạn chỉ định viewWindow.min hoặc viewWindow.max để ghi đè.

Ví dụ:

  • 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] }
Loại: Mảng gồm các phần tử
Mặc định: tự động
vAxis.title

Thuộc tính vAxis chỉ định tiêu đề cho trục tung.

Loại: chuỗi
Mặc định: không có tiêu đề
vAxis.titleTextStyle

Đối tượng chỉ định kiểu văn bản tiêu đề trục tung. Đối tượng có định dạng sau:

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

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

Di chuyển giá trị tối đa của trục tung đến giá trị được chỉ định; giá trị này sẽ tăng lên trong hầu hết biểu đồ. Sẽ bỏ qua nếu giá trị này được đặt thành một giá trị nhỏ hơn giá trị y tối đa của dữ liệu. vAxis.viewWindow.max ghi đè thuộc tính này.

Loại: số
Mặc định: tự động
vAxis.minValue

Di chuyển giá trị tối thiểu của trục tung đến giá trị được chỉ định; giá trị này sẽ đi xuống trong hầu hết các biểu đồ. Sẽ bỏ qua nếu giá trị này được đặt thành một giá trị lớn hơn giá trị y tối thiểu của dữ liệu. vAxis.viewWindow.min ghi đè thuộc tính này.

Loại: số
Mặc định: rỗng
vAxis.viewWindowMode

Chỉ định cách điều chỉnh tỷ lệ trục tung để hiển thị các giá trị trong vùng biểu đồ. Các giá trị chuỗi sau được hỗ trợ:

  • "pretty" – Điều chỉnh tỷ lệ các giá trị ngành dọc để giá trị dữ liệu tối đa và tối thiểu hiển thị một chút bên trong phần dưới cùng và đầu của vùng biểu đồ. ViewWindow được mở rộng thành đường lưới chính gần nhất đối với các số hoặc đường lưới nhỏ gần nhất đối với ngày và giờ.
  • "đã phóng to" – Điều chỉnh tỷ lệ các giá trị theo chiều dọc để giá trị dữ liệu tối đa và tối thiểu chạm vào đầu và cuối vùng biểu đồ. Thao tác này sẽ khiến vaxis.viewWindow.min và vaxis.viewWindow.max bị bỏ qua.
  • "explicit" – Một tuỳ chọn không dùng nữa để chỉ định các giá trị tỷ lệ trên cùng và dưới cùng của vùng biểu đồ. (Không dùng nữa vì phương thức này không còn cần thiết cho vaxis.viewWindow.min và vaxis.viewWindow.max. Các giá trị dữ liệu nằm ngoài các giá trị này sẽ bị cắt. Bạn phải chỉ định một đối tượng vAxis.viewWindow mô tả các giá trị tối đa và tối thiểu cần hiển thị.
Loại: chuỗi
Mặc định: Tương đương với "pretty", nhưng vaxis.viewWindow.min và vaxis.viewWindow.max sẽ được ưu tiên nếu được sử dụng.
vAxis.viewWindow

Chỉ định phạm vi cắt theo trục tung.

Loại: đối tượng
Mặc định: rỗng
vAxis.viewWindow.max

Giá trị dữ liệu ngành dọc tối đa cần hiển thị.

Bỏ qua khi vAxis.viewWindowMode có giá trị "đẹp" hoặc "đã phóng to".

Loại: số
Mặc định: tự động
vAxis.viewWindow.min

Giá trị dữ liệu ngành dọc tối thiểu cần hiển thị.

Bỏ qua khi vAxis.viewWindowMode có giá trị "đẹp" hoặc "đã phóng to".

Loại: số
Mặc định: tự động
chiều rộng

Chiều rộng của biểu đồ, tính bằng pixel.

Loại: số
Mặc định: chiều rộng của phần tử chứa

Phương thức

Phương thức
draw(data, options)

Vẽ biểu đồ. Biểu đồ này chỉ chấp nhận các lệnh gọi phương thức khác sau khi kích hoạt sự kiện ready. Extended description.

Loại trả lại: không có
getAction(actionID)

Trả về đối tượng hành động trong chú giải công cụ với actionID được yêu cầu.

Loại dữ liệu trả về: đối tượng
getBoundingBox(id)

Trả về một đối tượng chứa bên trái, trên cùng, chiều rộng và chiều cao của phần tử biểu đồ id. Định dạng của id chưa được ghi nhận (chúng là các giá trị trả về của trình xử lý sự kiện), nhưng sau đây là một số ví dụ:

var cli = chart.getChartLayoutInterface();

Chiều cao của vùng biểu đồ
cli.getBoundingBox('chartarea').height
Chiều rộng của thanh thứ ba trong chuỗi đầu tiên của biểu đồ thanh hoặc biểu đồ cột
cli.getBoundingBox('bar#0#2').width
Hộp giới hạn của hình chêm thứ năm của biểu đồ hình tròn
cli.getBoundingBox('slice#4')
Hộp giới hạn cho dữ liệu biểu đồ của một biểu đồ dọc (ví dụ: cột):
cli.getBoundingBox('vAxis#0#gridline')
Hộp giới hạn cho dữ liệu biểu đồ của biểu đồ ngang (ví dụ: biểu đồ thanh):
cli.getBoundingBox('hAxis#0#gridline')

Các giá trị liên quan đến vùng chứa của biểu đồ. Gọi lệnh này sau khi biểu đồ được vẽ.

Loại dữ liệu trả về: đối tượng
getChartAreaBoundingBox()

Trả về một đối tượng chứa bên trái, trên cùng, chiều rộng và chiều cao của nội dung biểu đồ (tức là không bao gồm nhãn và chú giải):

var cli = chart.getChartLayoutInterface();

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

Các giá trị liên quan đến vùng chứa của biểu đồ. Gọi lệnh này sau khi biểu đồ được vẽ.

Loại dữ liệu trả về: đối tượng
getChartLayoutInterface()

Trả về một đối tượng chứa thông tin về vị trí trên màn hình của biểu đồ và các phần tử của biểu đồ đó.

Bạn có thể gọi các phương thức sau trên đối tượng được trả về:

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

Gọi lệnh này sau khi biểu đồ được vẽ.

Loại dữ liệu trả về: đối tượng
getHAxisValue(xPosition, optional_axis_index)

Trả về giá trị dữ liệu theo chiều ngang tại xPosition. Giá trị này là một giá trị bù trừ pixel tính từ cạnh trái của vùng chứa biểu đồ. Có thể là giá trị âm.

Ví dụ: chart.getChartLayoutInterface().getHAxisValue(400)

Gọi lệnh này sau khi biểu đồ được vẽ.

Loại trả về: số
getImageURI()

Trả về biểu đồ được chuyển đổi tuần tự dưới dạng URI hình ảnh.

Gọi lệnh này sau khi biểu đồ được vẽ.

Xem In biểu đồ PNG.

Loại dữ liệu trả về: chuỗi
getSelection()

Trả về một mảng gồm các thực thể biểu đồ đã chọn. Thực thể có thể chọn là các mục nhập điểm và chú giải. Một điểm tương ứng với một ô trong bảng dữ liệu và một mục chú giải cho một cột (chỉ mục hàng rỗng). Đối với biểu đồ này, bạn chỉ có thể chọn một thực thể tại một thời điểm bất kỳ. Extended description .

Loại dữ liệu trả về: Mảng gồm các phần tử lựa chọn
getVAxisValue(yPosition, optional_axis_index)

Trả về giá trị dữ liệu ngành dọc tại yPosition. Giá trị này là một giá trị bù trừ pixel xuống từ cạnh trên của vùng chứa biểu đồ. Có thể là giá trị âm.

Ví dụ: chart.getChartLayoutInterface().getVAxisValue(300)

Gọi lệnh này sau khi biểu đồ được vẽ.

Loại trả về: số
getXLocation(dataValue, optional_axis_index)

Trả về toạ độ x của điểm ảnh dataValue tương ứng với cạnh trái của vùng chứa biểu đồ.

Ví dụ: chart.getChartLayoutInterface().getXLocation(400)

Gọi lệnh này sau khi biểu đồ được vẽ.

Loại trả về: số
getYLocation(dataValue, optional_axis_index)

Trả về toạ độ pixel y của dataValue tương ứng với cạnh trên cùng của vùng chứa biểu đồ.

Ví dụ: chart.getChartLayoutInterface().getYLocation(300)

Gọi lệnh này sau khi biểu đồ được vẽ.

Loại trả về: số
removeAction(actionID)

Xoá hành động trong chú giải công cụ với actionID được yêu cầu khỏi biểu đồ.

Loại trả lại hàng: none
setAction(action)

Đặt một hành động trong chú giải công cụ cần thực thi khi người dùng nhấp vào văn bản hành động.

Phương thức setAction lấy một đối tượng làm tham số hành động. Đối tượng này phải chỉ định 3 thuộc tính: id – mã nhận dạng của hành động đang được đặt, text – văn bản sẽ xuất hiện trong phần chú thích cho hành động và action – hàm sẽ được chạy khi người dùng nhấp vào văn bản hành động.

Bạn phải đặt mọi thao tác trong chú thích công cụ trước khi gọi phương thức draw() của biểu đồ. Nội dung mô tả mở rộng.

Loại trả lại hàng: none
setSelection()

Chọn các thực thể biểu đồ đã chỉ định. Huỷ mọi lựa chọn trước đó. Thực thể có thể chọn là các mục nhập điểm và chú giải. Một điểm tương ứng với một ô trong bảng dữ liệu và một mục chú giải cho một cột (chỉ mục hàng rỗng). Đối với biểu đồ này, mỗi lần bạn chỉ có thể chọn một thực thể. Extended description .

Loại trả lại: không có
clearChart()

Xoá biểu đồ và giải phóng tất cả tài nguyên đã phân bổ của biểu đồ đó.

Loại trả lại: không có

Sự kiện

Để biết thêm thông tin về cách sử dụng những sự kiện này, hãy xem bài viết Tương tác cơ bản, Xử lý sự kiện và Sự kiện kích hoạt.

Tên
animationfinish

Được kích hoạt khi ảnh động chuyển đổi hoàn tất.

Thuộc tính: không có
click

Được kích hoạt khi người dùng nhấp vào bên trong biểu đồ. Thông tin này có thể được dùng để xác định thời điểm người dùng nhấp vào tiêu đề, phần tử dữ liệu, mục chú giải, trục, đường lưới hoặc nhãn.

Tài sản: targetID
error

Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ.

Thuộc tính: mã nhận dạng, thông báo
legendpagination

Được kích hoạt khi người dùng nhấp vào mũi tên phân trang của chú giải. Trả về chỉ mục trang hiện tại từ 0 của chú giải và tổng số trang.

Tài sản: currentPageIndex, totalPages
onmouseover

Được kích hoạt khi người dùng di chuột qua một thực thể hình ảnh. Trả về các chỉ mục hàng và cột của phần tử tương ứng trong bảng dữ liệu.

Tài sản: hàng, cột
onmouseout

Được kích hoạt khi người dùng di chuột ra khỏi một thực thể trực quan. Trả về các chỉ mục hàng và cột của phần tử tương ứng trong bảng dữ liệu.

Tài sản: hàng, cột
ready

Biểu đồ này đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức draw và chỉ gọi các phương thức này sau khi sự kiện được kích hoạt.

Thuộc tính: không có
select

Được kích hoạt khi người dùng nhấp vào một thực thể hình ảnh. Để tìm hiểu những mục đã được chọn, hãy gọi hàm getSelection().

Thuộc tính: không có

Chính sách dữ liệu

Tất cả mã và dữ liệu đều được xử lý và hiển thị trong trình duyệt. Không có dữ liệu nào được gửi đến bất kỳ máy chủ nào.