Hình ảnh trực quan: Biểu đồ vùng

Tổng quan

Một biểu đồ vùng kết xuất trong trình duyệt bằng SVG hoặc VML. Hiển thị các mẹo khi di chuột qua các điểm.

Ví dụ đơn giản

 
<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([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

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

Vùng xếp chồng

Theo mặc định, biểu đồ vùng sẽ vẽ chuỗi này chồng lên nhau. Bạn có thể xếp chồng các giá trị này lên trên một giá trị khác để tổng hợp các giá trị dữ liệu tại mỗi giá trị x. Trong biểu đồ vùng, giá trị của từng chuỗi sẽ luôn được xếp chồng so với giá trị của chuỗi trước đó. Việc kết hợp kết hợp các giá trị âm và dương sẽ khiến các khu vực trùng lặp. Điều quan trọng cần lưu ý là tùy chọn interpolateNulls không hoạt động với các biểu đồ vùng xếp chồng.

Ở bên trái, isStacked được đặt thành false (mặc định) và ở bên phải được đặt thành true:

Lưu ý rằng thứ tự của các mục nhập chú giải là khác nhau. Trong biểu đồ xếp chồng thứ hai, thứ tự đảo ngược, đặt chuỗi 0 ở dưới cùng, tương ứng tốt hơn với việc xếp chồng các phần tử chuỗi, giúp chú giải tương ứng với dữ liệu.

Biểu đồ vùng xếp chồng cũng hỗ trợ ngăn xếp 100%, trong đó ngăn xếp các phần tử ở mỗi giá trị miền được điều chỉnh theo tỷ lệ để tổng cộng lên đến 100%. Các tuỳ chọn này là isStacked: 'percent', định dạng mỗi giá trị theo tỷ lệ phần trăm 100% và isStacked: 'relative' để định dạng từng giá trị dưới dạng phân số của 1. Ngoài ra còn có một tuỳ chọn isStacked: 'absolute' có chức năng tương đương với isStacked: true.

Lưu ý trong biểu đồ xếp chồng 100% ở bên phải, các giá trị đánh dấu nhịp độ khung hình dựa trên thang điểm tương đối 0-1 dưới dạng phân số 1.

Bị xếp chồng
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
Theo thứ tự xếp chồng 100%
        var options_fullStacked = {
          isStacked: 'relative',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

Giả sử một trong các chuỗi của bạn không có dữ liệu cho một số giá trị x. Ví dụ: trong các biểu đồ ở trên, giả sử rằng máy bay không người lái không có sẵn cho đến năm 2015 và Segway không có sẵn vào năm 2014. Lưu ý là chúng tôi sử dụng các giá trị rỗng khi dữ liệu bị thiếu, vì vậy biểu đồ sẽ có dạng như sau:

Nếu những gián đoạn đó không hấp dẫn, bạn có thể thay thế các số 0 cho giá trị rỗng và/hoặc đặt tuỳ chọn interpolateNulls thành true:

Đang tải

Tên gói google.charts.load là "corechart".

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

Tên lớp của hình ảnh trực quan là google.visualization.AreaChart. 

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

Định dạng dữ liệu

Hàng: Mỗi hàng trong bảng trình bày một tập hợp các điểm dữ liệu có cùng vị trí trục x.

Cột:

  Cột 0 Cột 1 ... Cột N
Mục đích: Giá trị dòng 1 ... Giá trị dòng N
Loại dữ liệu: number ... number
Vai trò: miền data ... data
Các vai trò cột không bắt buộc: ...

 

Các lựa chọn về cấu hình

Tên
Tổng hợp mục tiêu
Cách cuộn nhiều lựa chọn dữ liệu thành chú giải công cụ:
  • 'category': Nhóm dữ liệu đã chọn theo giá trị x.
  • 'series': Nhóm dữ liệu đã chọn theo chuỗi.
  • 'auto': Nhóm dữ liệu đã chọn theo giá trị x nếu tất cả các lựa chọn đều có cùng giá trị x và theo chuỗi khác.
  • 'none': Chỉ hiển thị một chú giải công cụ 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"
animate.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
hoạt ảnh.

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

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

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

Loại: Boolean
sai mặc định
Annotation.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 các chú thích: 

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

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

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

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

Loại: đối tượng
Mặc định: rỗng
độ mờ của diện tích

Độ mờ mặc định của vùng màu trong một chuỗi biểu đồ vùng, trong đó 0.0 là hoàn toàn trong suốt và 1.0 là hoàn toàn không trong suốt. Để chỉ định độ mờ cho một chuỗi riêng lẻ, hãy đặt giá trị AreaOpacity trong thuộc tính series.

Loại: số 0,0–1,0
Mặc định: 0.3
TrụcTitlesPosition

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

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

Màu nền của vùng chính trên 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

Biểu đồ tô màu dưới dạng chuỗi màu HTML.

Loại: chuỗi
Mặc định: "trắng"
Khu vực

Một đối tượng có thành viên để định cấu hình vị trí và kích thước của khu vực biểu đồ (chính là biểu đồ sẽ được vẽ, ngoại trừ 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à 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 khu vực biểu đồ. Khi sử dụng chuỗi, chuỗi đó có thể là một chuỗi hex (ví dụ: "#fdc") hoặc tên màu tiếng Anh. Khi sử dụng đối tượng, bạn có thể cung cấp các thuộc tính sau:
  • stroke: màu sắc, được cung cấp dưới dạng chuỗi hex hoặc tên màu tiếng Anh.
  • strokeWidth: nếu được cung cấp, hãy vẽ đường viền xung quanh khu vực biểu đồ có chiều rộng nhất định (và có màu của 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
vấn đề

Chiều rộng khu vực trên biểu đồ.

Loại: số hoặc chuỗi
Mặc định: tự động
vấn đề

Chiều cao khu vực trên biểu đồ.

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

Màu sắc sử dụng cho các phần tử 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
chữ thập

Một đối tượng chứa các thuộc tính crosshair (Biểu đồ chữ thập) cho biểu đồ.

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

Màu chữ thập, được biểu thị dưới dạ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
đặt trọng tâm crosshair.

Một đối tượng chứa các thuộc tính chữ thập trên 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ờ chữ thập, với 0.0 hoàn toàn trong suốt và 1.0 mờ hoàn toàn.

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

Hướng cắt ngang, có thể là 'dọc' chỉ cho các kiểu tóc dọc, 'ngang' cho các kiểu tóc ngang hoặc 'cả hai' cho 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
trình kích hoạt crosshair.trigger

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

Loại: chuỗi
Mặc định: "cả hai"
dữ liệu độ mờ

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

Loại: số
Mặc định: 1.0
bật sự tương tác

Biểu đồ có gửi sự kiện dựa trên người dùng hay phản ứng với tương tác của người dùng không. Nếu giá trị là sai, biểu đồ sẽ không gửi "sự kiện" hoặc các sự kiện dựa trên lượt tương tác khác (nhưng sẽ gửi sự kiện sẵn sàng hoặc sự kiện 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á

Tuỳ 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 xoay ngang và 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 trong 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ỉ hoạt động 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
actions.actions

Trình khám phá biểu đồ của Google hỗ trợ ba hành động:

  • dragToPan: Kéo để xoay xung quanh biểu đồ theo chiều ngang và chiều dọc. Để chỉ di chuyển theo trục ngang, hãy sử dụng explorer: { axis: 'horizontal' }. Tương tự như vậy, trục dọc.
  • 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'] }, hãy kéo qua một khu vực hình chữ nhật để phóng to khu vực đó. Bạn nên sử dụng rightClickToReset bất cứ khi nào sử dụng dragToZoom. Hãy xem explorer.maxZoomIn, explorer.maxZoomOut và explorer.zoomDelta để biết cách tuỳ chỉnh thu phóng.
  • rightClickToReset: Khi bạn nhấp chuột phải vào biểu đồ, biểu đồ sẽ trở về mức ban đầu và mức thu phóng.
Loại: Mảng chuỗi
Mặc định: ['dragToPan', 'rightClickToReset']
phám phá.

Theo mặc định, người dùng có thể kéo cả chiều ngang và chiều dọc khi sử dụng tùy 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' } bật tính năng di chuyển chỉ theo chiều dọc.

Loại: chuỗi
Mặc định: xoay ngang và dọc
explorer.keepInBounds

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

Loại: Boolean
Mặc định: sai
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% chế độ xem ban đầu. Việc đặt explorer: { maxZoomIn: .5 } sẽ cho phép người dùng phóng to chỉ đủ để xem một nửa chế độ xem 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ỏ đến mức đồ thị chỉ chiếm 1/4 không gian có sẵn. Việc đặt explorer: { maxZoomOut: 8 } sẽ cho phép người dùng thu nhỏ đến mức biểu đồ chỉ chiếm 1/8 không gian có sẵn.

Loại: số
Mặc định: 4
khám phá.DeltaDelta

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

Loại: số
Mặc định: 1.5
mục tiêu tập trung

Loại thực thể nhận được tiêu điểm khi di chuột. Đồng thời, ảnh hưởng đến thực thể nào được chọn bằng thao tác nhấp chuột và phần tử bảng dữ liệu nào được liên kết với các sự kiện. Có thể là một trong những trạng thái sau đây:

  • "datum" – Tập trung vào một điểm dữ liệu duy nhất. Tương quan với một ô trong bảng dữ liệu.
  • "category" - Tập trung vào việc nhóm tất cả các điểm dữ liệu dọc theo trục chính. Tương ứng với một hàng trong bảng dữ liệu.

Trong focusTarget 'category', chú giải công cụ sẽ cho thấy tất cả giá trị của danh mục. Điều này có thể hữu ích khi so sánh giá trị của các chuỗi khác nhau.

Loại: chuỗi
Mặc định: "dum"
Kích thước phông chữ

Kích thước phông 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 đè giá trị này bằng cách sử dụng các thuộc tính cho các phần tử biểu đồ cụ thể.

Loại: số
Mặc định: tự động
phông chữ

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

Loại: chuỗi
Mặc định: 'Arial'
forceIFrame

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

Loại: Boolean
Mặc định: sai
trục

Một đối tượng có thành viên để định cấu hình các 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.

Tuỳ chọn này chỉ được hỗ trợ cho trục continuous.

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

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

Tuỳ chọn này chỉ được hỗ trợ cho trục continuous.

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

Hướng mà các giá trị dọc theo trục hoành tăng lê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 nhãn trục số hoặc trục ngày.

Đối với nhãn trục số, đây là tập hợp con của định dạng thập phân Tập hợp 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ỳ nội dung nào sau đây:

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

Đối với nhãn trục ngày, đây là một tập hợp con của định dạng ngày nhóm mẫu ICU . Ví dụ: {format:'MMM d, y'} sẽ hiển thị giá trị "ngày 1 tháng 7 năm 2011" cho ngày tháng 7 năm 2011.

Đị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, hãy xem phần tải biểu đồ bằng một ngôn ngữ cụ thể.

Trong các giá trị đánh dấu nhịp độ khung hình và đường lưới, một số tổ hợp thay thế cho tất cả các tùy chọn đường lưới liên quan sẽ được xem xét và các lựa chọn thay thế sẽ bị từ chối nếu các nhãn đánh dấu đã định dạng sẽ 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 thị giá trị đánh dấu số nguyên, nhưng xin lưu ý rằng nếu không có tiêu chí thay thế nào đáp ứng điều kiện này, thì sẽ không có đường cơ sở hoặc kim đánh dấu nhịp độ khung hình nào xuất hiện.

Tùy chọn này chỉ được hỗ trợ cho trục continuous.

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

Một đố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 được vẽ theo chiều dọc. Để chỉ định 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}

Tùy chọn này chỉ được hỗ trợ cho trục continuous.

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

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

Một loạt các kích thước (dưới dạng giá trị dữ liệu, không phải pixel) giữa các đường lưới liền kề. Hiện tại, tuỳ chọn này chỉ dành cho các trục số, nhưng tương tự như các tuỳ chọn gridlines.units.<unit>.interval chỉ dùng cho ngày và giờ. Đối với tỷ lệ tuyến tính, giá trị mặc định là [1, 2, 2.5, 5], nghĩa là các giá trị đường lưới có thể rơi vào mọi đơn vị (1), trên các đơn vị chẵn (2) hoặc trên bội số của 2.5 hoặc 5. Bất kỳ sức mạnh nào gấp 10 lần các giá trị này cũng được xem xét (ví dụ: [10, 20, 25, 50] và [.1, .2, .25, .5]). Đối với tỷ lệ nhật ký, giá trị mặc định là [1, 2, 5].

Loại: số từ 1 đến 10, không bao gồm 10.
Mặc định: đã tính toán
hAxis.gridlines.minDistance

Không gian màn hình tối thiểu, tính bằng pixel, giữa các đường lưới chính hAxis. Giá trị mặc định cho đường lưới chính là 40 cho tỷ lệ tuyến tính và 20 cho tỷ lệ nhật ký. Nếu bạn chỉ định count chứ không phải minSpacing, thì minInterval được tính từ số lượng. Và ngược lại, nếu bạn chỉ định minSpacing chứ không phải count, thì số lượng sẽ được tính từ minInterval. Nếu bạn chỉ định cả hai, minSpacing sẽ ghi đè.

Loại: số
Mặc định: đã tính toán
hAxis.gridlines.multi

Tất cả các giá trị đường lưới và kim đánh dấu phải là bội số của giá trị của tùy chọn này. Xin lưu ý rằng, không giống như khoảng thời gian, số luỹ thừa gấp 10 lần bội số của chúng ta không được xem xét. Vì vậy, bạn có thể buộc các kim đánh dấu nhịp độ khung hình là số nguyên bằng cách chỉ định gridlines.multiple = 1 hoặc buộc các kim đánh dấu phải là bội số của 1.000 bằng cách chỉ định gridlines.multiple = 1000.

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 các loại dữ liệu ngày/ngày/giờ trong ngày khi dùng chung với các đường lưới được tính toán trên biểu đồ. Cho phép định dạng theo 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ể tìm 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ó thành viên để định cấu hình các đường lưới phụ trên trục hoành, tương tự như tùy chọn hAxis.gridlines.

Tùy chọn này chỉ được hỗ trợ cho trục continuous.

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

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

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

Tuỳ chọn minorGridlines.count hầu như không được dùng nữa, ngoại trừ việc vô hiệu hoá 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 bắt buộc tối thiểu (xem hAxis.minorGridlines.minSpacing).

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

Tuỳ chọn smallestGridlines.interval giống như tuỳ chọn khoảng thời gian lưới chính, nhưng khoảng thời gian được chọn sẽ luôn là số chia đều của khoảng thời gian lưới lớn. Khoảng thời gian mặc định cho tỷ lệ tuyến tính là [1, 1.5, 2, 2.5, 5] và tỷ lệ nhật ký là [1, 2, 5].

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

Khoảng trống tối thiểu bắt buộc, tính bằng pixel, giữa đường lưới nhỏ liền kề và giữa đường lưới nhỏ và đường lưới chính. Giá trị mặc định là 1/2 minDistance của đường lưới chính cho tỷ lệ tuyến tính và 1/5 minDistance cho tỷ lệ nhật ký.

Loại: số
Mặc định: được tính toán
hAxis.minorGridlines.multi

Tương tự như đối với gridlines.multiple chính.

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 các loại dữ liệu ngày/ngày/giờ trong ngày khi sử dụng với biểu đồ lưới lưới được tính toán theo biểu đồ. Cho phép định dạng theo 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ể tìm 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 lôgarit (yêu cầu tất cả giá trị đều dương). Đặt thành đúng cho có.

Tuỳ chọn này chỉ được hỗ trợ cho trục continuous.

Loại: Boolean
Mặc định: sai
hAxis.scaleType

Thuộc tính hAxis giúp trục hoành trở thành thang đo lôgarit. Có thể là một trong những trạng thái sau:

  • rỗng – Không thực hiện tỷ lệ lôgarit.
  • 'log' - Thang đo lôgarit. Biểu đồ âm và giá trị 0 không được đánh dấu. Tùy chọn này giống với việc đặt hAxis: { logscale: true }.
  • 'MirrorLog' - Tỷ lệ lôgarit trong đó giá trị âm và 0 được vẽ nên. Giá trị biểu đồ của số âm là số âm của nhật ký về giá trị tuyệt đối. Các giá trị gần bằng 0 được sắp xếp theo tỷ lệ tuyến tính.

Tuỳ chọn này chỉ được hỗ trợ cho trục continuous.

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

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

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

Một đố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à chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem 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 dấu kiểm 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 ngày trong giờ) hoặc một đối tượng. Nếu là đối tượng thì đó phải là thuộc tính v cho giá trị kim đánh dấu, và thuộc tính f không bắt buộc chứa chuỗi ký tự hiển thị dưới dạng nhãn.

ViewWindow sẽ tự động mở rộng để bao gồm các dấu kiểm tối thiểu và tối đa, trừ khi 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] }

Tùy chọn này chỉ được hỗ trợ cho trục continuous.

Loại: Mảng phần tử
Mặc định: tự động
Tiêu đề hAxis.

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

Một đố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à chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem fontName và fontSize.

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

Nếu giá trị là sai, sẽ ẩn các nhãn ở ngoài cùng thay vì cho phép vùng chứa biểu đồ cắt ảnh. Nếu đúng, sẽ cho phép cắt nhãn.

Tuỳ chọn này chỉ được hỗ trợ cho trục discrete.

Loại: Boolean
Mặc định: sai
hAxis.slantedText

Nếu đúng, hãy vẽ văn bản trên trục hoành ở một góc, để giúp vừa với nhiều văn bản hơn dọc theo trục; nếu sai, hãy vẽ văn bản trục ngang thẳng đứng. Hành vi mặc định là văn bản nghiêng nếu không thể vừa với văn bản khi được vẽ thẳng. Xin lưu ý rằng tùy chọn này chỉ dùng được khi hAxis.textPosition được đặt thành "out" (mặc định). Giá trị mặc định là false cho ngày và giờ.

Loại: Boolean
Mặc định: tự động
hAxis.slantedTextAngle

Góc của văn bản trục hoành, nếu văn bản bị vẽ nghiêng. Bỏ qua nếu hAxis.slantedText là false hoặc đang ở chế độ tự động và biểu đồ đã quyết định vẽ văn bản theo chiều ngang. Nếu góc dương thì xoay theo chiều ngược chiều kim đồng hồ, và nếu âm thì theo chiều kim đồng hồ.

Loại: số, -90—90
Mặc định: 30
hAxis.maxAlternation

Số cấp tối đa của văn bản trục hoành. Nếu nhãn văn bản trên trục quá lớn, máy chủ có thể dịch chuyển các nhãn lân cận lên hoặc xuống để khớp các nhãn với nhau gần nhau hơn. Giá trị này chỉ định số lượng cấp độ cần sử dụng nhiều nhất; máy chủ có thể sử dụng ít cấp độ hơn nếu các nhãn có thể nằm vừa vặn mà không chồng chéo nhau. Đối với ngày và giờ, giá trị mặc định là 1.

Loại: số
Mặc định: 2
hAxis.maxTextLines

Số dòng tối đa được phép đối với các nhãn văn bản. Nhãn có thể kéo dài nhiều dòng nếu quá dài, và theo mặc định, số dòng bị giới hạn theo chiều cao của không gian hiện có.

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

Khoảng cách ngang tối thiểu, tính bằng pixel, được phép giữa 2 nhãn văn bản liền kề. Nếu nhãn bị giãn cách quá dày hoặc quá dài, thì khoảng cách có thể giảm xuống dưới ngưỡng này và trong trường hợp này, một trong các biện pháp xóa nhãn sẽ được áp dụng (ví dụ: cắt bớt nhãn hoặc bỏ một số nhãn).

Loại: số
Mặc định: Giá trị của hAxis.textStyle.fontSize
hAxis.showTextMọi

Số lượng trục hoành để hiển thị, trong đó 1 có nghĩa là hiển thị mọi nhãn, 2 có nghĩa là hiển thị mọi nhãn khác, v.v. Chế độ mặc định là cố gắng hiển thị nhiều nhãn nhất có thể mà không trùng lặp.

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

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

Tùy chọn này chỉ được hỗ trợ cho trục continuous.

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 sang giá trị được chỉ định; thao tác này sẽ xoay sang trái trong hầu hết các biểu đồ. Bỏ qua nếu giá trị này được đặt thành 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.

Tùy chọn này chỉ được hỗ trợ cho trục continuous.

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 khu vực biểu đồ. Các giá trị chuỗi sau được hỗ trợ:

  • "Pretty" - Điều chỉnh theo tỷ lệ các giá trị ngang để giá trị dữ liệu tối đa và tối thiểu được hiển thị một chút ở bên trái và bên phải khu vực biểu đồ. ViewWindow được mở rộng thành đường lưới chính gần nhất cho số hoặc đường lưới nhỏ gần nhất cho ngày và giờ.
  • "Phóng to" - Điều chỉnh giá trị theo tỷ lệ theo tỷ lệ sao cho các 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 của khu vực biểu đồ. Điều này sẽ khiến haxis.viewWindow.min và haxis.viewWindow.max bị bỏ qua.
  • "explicit" – (Không rõ) – Một tuỳ chọn không dùng nữa để chỉ định giá trị tỷ lệ bên trái và bên phải của khu vực biểu đồ. (Không dùng nữa vì dư thừa haxis.viewWindow.min và haxis.viewWindow.max.) 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 hAxis.viewWindow mô tả các giá trị tối đa và tối thiểu sẽ hiển thị.

Tùy chọn này chỉ được hỗ trợ cho trục continuous.

Loại: chuỗi
Mặc định: Tương đương với "xinh đẹp", nhưng haxis.viewWindow.min và haxis.viewWindow.max sẽ được ưu tiên nếu sử dụng.
hAxis.viewWindow

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

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

  • Đối với trục continuous:

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

  • Đối với trục discrete:

    Chỉ mục hàng dựa trên 0, nơi kết thúc cửa sổ cắt. Các điểm dữ liệu ở chỉ mục này trở lên sẽ bị cắt. Khi kết hợp với vAxis.viewWindowMode.min, thuộc tính này sẽ xác định một phạm vi mở một nửa [phút, tối đa) biểu thị các chỉ mục phần tử sẽ hiển thị. Nói cách khác, mọi chỉ mục sao cho min <= index < max sẽ xuất hiện.

Bỏ qua khi hAxis.viewWindowMode là "xinh mối" hoặc "tối đa hoá".

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

  • Đối với trục continuous:

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

  • Đối với trục discrete:

    Chỉ mục hàng dựa trên 0, nơi bắt đầu cắt. Các điểm dữ liệu tại các chỉ mục thấp hơn chỉ số này sẽ bị cắt bớt. Khi kết hợp với vAxis.viewWindowMode.max, thuộc tính này sẽ xác định một phạm vi mở một nửa [phút, tối đa) biểu thị các chỉ mục phần tử sẽ hiển thị. Nói cách khác, mọi chỉ mục sao cho min <= index < max sẽ xuất hiện.

Bỏ qua khi hAxis.viewWindowMode là "xinh mối" hoặc "tối đa hoá".

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
interpolateNull

Liệu có đoán được giá trị của các điểm bị thiếu hay không. Nếu đúng, trình này sẽ đoán giá trị của mọi dữ liệu bị thiếu dựa trên các điểm lân cận. Nếu giá trị là sai thì thao tác này sẽ rời khỏi dòng tại điểm không xác định.

Biểu đồ này không được khu vực hỗ trợ với tuỳ chọn isStacked: true/'percent'/'relative'/'absolute'.

Loại: Boolean
Mặc định: sai
xếp chồng

Nếu bạn đặt thành đúng, thì hệ thống sẽ xếp chồng các phần tử cho tất cả chuỗi ở mỗi giá trị miền. Lưu ý: Trong các biểu đồ Cột, Khu vực và SteppedArea, Biểu đồ của Google đảo ngược thứ tự của các mục chú giải để tương ứng hơn với việc xếp chồng các phần tử trong chuỗi (ví dụ: chuỗi 0 sẽ là mục huyền thoại ở dưới cùng). Điều này không áp dụng cho Biểu đồ thanh.

Tùy chọn isStacked cũng hỗ trợ xếp chồng 100%, trong đó ngăn xếp các phần tử ở mỗi giá trị miền được điều chỉnh theo tỷ lệ để thêm tối đa 100%.

Các tùy chọn cho isStacked là:

  • false – các phần tử sẽ không xếp chồng. Đây là tùy chọn mặc định.
  • true – xếp chồng các phần tử cho tất cả chuỗi ở mỗi giá trị miền.
  • 'percent' – xếp chồng các phần tử cho tất cả chuỗi ở mỗi giá trị miền và điều chỉnh tỷ lệ các phần tử đó để cộng lại thành 100%, với giá trị của mỗi phần tử được tính toán theo tỷ lệ phần trăm là 100%.
  • 'relative' – xếp chồng các phần tử cho tất cả chuỗi ở mỗi giá trị miền và điều chỉnh tỷ lệ các phần tử đó để cộng lại thành 1, với giá trị của mỗi phần tử được tính là phân số của 1.
  • 'absolute' – có chức năng giống như isStacked: true.

Để xếp chồng 100%, giá trị đã tính toán cho mỗi phần tử sẽ xuất hiện trong chú giải công cụ sau giá trị thực tế.

Trục mục tiêu sẽ mặc định chọn giá trị đánh dấu nhịp độ khung hình dựa trên thang điểm 0-1 tương đối dưới dạng phân số của 1 cho 'relative', và 0-100% cho 'percent' (Lưu ý: khi sử dụng tuỳ chọn 'percent', giá trị trục/đánh dấu được hiển thị dưới dạng phần trăm, tuy nhiên giá trị thực tế là giá trị tỷ lệ tương đối 0-1. Điều này là do các phần trăm trục trục là kết quả của việc áp dụng định dạng "#.##%" cho các giá trị tỷ lệ tương đối 0-1. Khi sử dụng isStacked: 'percent', hãy nhớ chỉ định kim đánh dấu/đường lưới bằng cách sử dụng giá trị tỷ lệ tương đối 0-1). Bạn có thể tuỳ chỉnh giá trị định dạng đường lưới/đánh dấu và định dạng bằng các tùy chọn hAxis/vAxis thích hợp.

Việc xếp chồng 100% chỉ hỗ trợ các giá trị dữ liệu thuộc loại number và phải có đường cơ sở bằng 0.

Loại: boolean/chuỗi
Mặc định: sai
chú giải

Một đối tượng có các thành viên để định cấu hình các khía cạnh khác nhau của chú giải. Để chỉ định 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: 

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

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

  • "start" - Căn chỉnh theo điểm bắt đầu của khu vực được phân bổ cho chú giải.
  • "center" - Tập trung vào khu vực được phân bổ cho chú giải.
  • "end" - Căn chỉnh vào cuối khu vực được phân bổ cho chú giải.

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

Giá trị mặc định này tùy thuộc vào vị trí của chú giải. Đối với chú giải "bottom" (dưới), giá trị mặc định là "center" (trung tâm); các chú giải khác mặc định là "start".

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

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

Tùy chọn này hiện chỉ hoạt động khi Legends.position là 'hàng đầu'.

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

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

Loại: số
Mặc định: 0
Thêm chú thích.

Vị trí chú giải. Có thể là một trong những trạng thái sau:

  • 'bottom' - Dưới biểu đồ.
  • 'trái' - Ở bên trái của biểu đồ, miễn là trục trái không có chuỗi nào 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.
  • 'in' - Bên trong biểu đồ, theo góc trên cùng bên trái.
  • "none" – Không có chú giải nào xuất hiện.
  • 'right' - Ở bên phải biểu đồ. Không tương thích với tuỳ chọn vAxes.
  • 'top' - Phía trên biểu đồ.
Loại: chuỗi
Mặc định: "phải"
Style.textStyle

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

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

color có thể là chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Kiểu đường viền

Mẫu bật và tắt cho các đường nét đứt. Ví dụ: [4, 4] sẽ lặp lại các dấu gạch ngang dài 4, theo sau là các khoảng trống 4 độ, và [5, 1, 3] sẽ lặp lại một dấu gạch ngang 5 độ dài, một dấu gạch ngang 1 độ dài, một dấu gạch ngang 3 độ dài, một khoảng cách 5 độ dài, một dấu gạch ngang 1 độ dài và 3 khoảng cách dài. Vui lòng xem phần Dòng đã dừng để biết thêm thông tin.

Loại: Mảng số
Mặc định: rỗng
chiều rộng dòng

Chiều rộng đường dữ liệu tính bằng pixel. Sử dụng số 0 để ẩn tất cả các dòng và chỉ cho thấy các điểm. Bạn có thể ghi đè các giá trị cho từng chuỗi bằng cách sử dụng thuộc tính series.

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

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

Loại: chuỗi
Mặc định: "ngang"
Hình dạng điểm

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", "kim cương", "sao" hoặc "đa giác". Hãy tham khảo tài liệu về điểm để biết ví dụ.

Loại: chuỗi
Mặc định: 'vòng tròn'
kích thước điểm

Đường kính của điểm hiển thị tính bằng pixel. Sử dụng số không để ẩn tất cả các điểm. Bạn có thể ghi đè các giá trị cho từng chuỗi 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, thì tùy chọn pointSize sẽ ảnh hưởng đến chiều rộng của đường xu hướng, trừ khi bạn ghi đè tùy chọn đó bằng tùy chọn trendlines.n.pointsize.

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

Xác định xem có hiển thị điểm hay không. Đặt thành false để ẩn tất cả các điểm. Bạn có thể ghi đè các giá trị cho từng chuỗi 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, thì tùy chọn pointsVisible sẽ ảnh hưởng đến khả năng hiển thị của các điểm trên tất cả các đường xu hướng, trừ khi bạn ghi đè tùy chọn đó bằng tùy chọn trendlines.n.pointsVisible.

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

Loại: Boolean
Mặc định: true
đảo loại

Nếu đặt là đúng, sẽ vẽ chuỗi từ phải sang trái. Tùy chọn mặc định là vẽ từ trái sang phải.

Tuỳ chọn này chỉ được hỗ trợ cho trục discrete major.

Loại: Boolean
Mặc định: sai
chế độ lựa chọn

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: "single"
loạt phim

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

  • annotations – Một đối tượng sẽ áp dụng cho chú giải trong chuỗi này. Bạn có thể sử dụng thuộc tính này để kiểm soát textStyle, chẳng hạn như cho chuỗi: 

    series: {
  0: {
    annotations: {
      textStyle: {fontSize: 12, color: 'red' }
    }
  }
}

    Hãy xem các tuỳ chọn annotations khác nhau để có danh sách đầy đủ hơn về những nội dung có thể tuỳ chỉnh.

  • areaOpacity – Ghi đè areaOpacity toàn cục cho chuỗi này.
  • color – Màu sắc cần sử dụng cho chuỗi này. Chỉ định một chuỗi màu HTML hợp lệ.
  • labelInLegend – Phần mô tả về chuỗi sách xuất hiện trong chú giải biểu đồ.
  • lineDashStyle – Ghi đè giá trị lineDashStyle toàn cục cho chuỗi này.
  • lineWidth – Ghi đè giá trị lineWidth chung cho chuỗi này.
  • pointShape – Ghi đè giá trị pointShape toàn cục cho chuỗi này.
  • pointSize – Ghi đè giá trị pointSize chung cho chuỗi này.
  • pointsVisible – Ghi đè giá trị pointsVisible toàn cục cho chuỗi này.
  • targetAxisIndex – Trục nào cần gán chuỗi này, trong đó 0 là trục mặc định và 1 là trục đối diện. Giá trị mặc định là 0; được đặt thành 1 để xác định một biểu đồ trong đó các chuỗi khác nhau được hiển thị trên các trục khác nhau. Ít nhất một chuỗi dữ liệu được phân bổ nhiều cho trục mặc định. Bạn có thể xác định một thang tỷ lệ khác cho các trục khác nhau.
  • visibleInLegend – Một giá trị boolean, trong đó true có nghĩa là chuỗi phải có một mục nhập chú giải và false có nghĩa là không nên. Mặc định là đúng.

Bạn có thể chỉ định một mảng đối tượng, mỗi mảng áp dụng cho chuỗi theo thứ tự nhất định hoặc bạn có thể chỉ định một đối tượng, trong đó mỗi phần tử con có một khoá số cho biết chuỗi áp dụng đối tượng đó. Ví dụ: hai nội dung khai báo sau đây giống hệt nhau và khai báo chuỗi đầu tiên là màu đen và không có trong chú giải, còn nội dung thứ tư là màu đỏ và không có trong 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ột mảng các đố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ị tùy chọn được xác định trước, phối hợp với nhau để đạt được hành vi hoặc hiệu ứng hình ảnh cụ thể trên biểu đồ. Hiện chỉ có một giao diện:

  • " phóng to" - Tăng tối đa khu vực của biểu đồ, đồng thời vẽ chú giải và tất cả các nhãn bên trong khu vực biểu đồ. Đặt 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
tiêu đề

Văn bản sẽ 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 biểu đồ. Giá trị được hỗ trợ:

  • trong - Vẽ tiêu đề bên trong vùng biểu đồ.
  • ngoài - Vẽ tiêu đề bên ngoài vùng biểu đồ.
  • no - Bỏ qua tiêu đề.
Loại: chuỗi
Mặc định: 'out'
Kiểu văn bản tiêu đề

Đố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à chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem fontName và fontSize.

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

Một đối tượng có thành viên để định cấu hình các thành phần trong chú giải công 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 cố định đối tượng, như minh hoạ dưới đây: 

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

Nếu được đặt thành true, cho phép vẽ cửa sổ chú giải công cụ nằm ngoài giới hạn của biểu đồ ở tất cả các bên.

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

Loại: Boolean
Mặc định: sai
chú giải công cụ.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ụ (hiển thị) HTML (thay vì hiển thị SVG). Hãy xem phần Tuỳ chỉnh nội dung cho chú giải công cụ để biết thêm thông tin.

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

Loại: Boolean
Mặc định: sai
chú giải công cụ.showColorCode

Nếu đúng, hãy hiển thị các hình vuông màu bên cạnh thông tin về chuỗi trong chú giải công cụ. Giá trị mặc định là true khi focusTarget được đặt thành "category", nếu không thì giá trị mặc định sẽ là false.

Loại: Boolean
Mặc định: tự động
Chú giải công cụ.textStyle

Đối tượng chỉ định kiểu văn bản của 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à chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
chú giải công cụ trong trình kích hoạt

Tương tác của người dùng khiến chú giải công cụ được hiển thị:

  • "tiêu điểm" – Chú giải công cụ 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 hiển thị.
  • 'selection' – Chú giải công cụ sẽ hiển thị khi người dùng chọn phần tử.
Loại: chuỗi
Mặc định: "tiêu điểm"
trục

Chỉ định các thuộc tính cho từng trục dọc nếu biểu đồ có nhiều trục dọc. Mỗi đối tượng con là một đối tượng vAxis và có thể chứa tất cả các thuộc tính mà vAxis hỗ trợ. Các giá trị thuộc tính này sẽ ghi đè mọi chế độ cài đặt chung cho cùng một thuộc tính.

Để chỉ định một biểu đồ có nhiều trục dọc, trước tiên hãy xác định một trục mới bằng cách sử dụng series.targetAxisIndex, sau đó định cấu hình trục đó bằng vAxes. Ví dụ sau đây sẽ chỉ định chuỗi 2 cho trục bên phải và chỉ định tiêu đề và kiểu văn bản tuỳ chỉnh cho chuỗi đó: 

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}

Thuộc tính này có thể là một đối tượng hoặc một mảng: đối tượng là một tập hợp các đối tượng, mỗi đối tượng có một nhãn số chỉ định trục mà đối tượng xác định – đây là định dạng được hiển thị ở trên; mảng là một mảng đối tượng, mỗi đối tượng trên một trục. Ví dụ: ký hiệu kiểu mảng sau đây giống hệt với đối tượng vAxis hiển thị ở trên: 

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
Loại: Mảng đối tượng hoặc đối tượng có các đối tượng con
Mặc định: rỗng
trục

Một đối tượng có thành viên để định cấu hình nhiều thành phần trục tung. Để chỉ định 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
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: "màu đen"
vAxis.direction

Hướng mà các giá trị dọc theo trục dọc tăng lên. Theo mặc định, các giá trị thấp 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 hợ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ỳ nội dung nào sau đây:

  • {format: 'none'}: hiển thị các số không có định dạng (ví dụ: 8000000)
  • {format: 'decimal'}: hiển thị các số có hàng nghìn dấu phân cách (ví dụ: 8.000.000)
  • {format: 'scientific'}: hiển thị các số trong ký hiệu khoa học (ví dụ: 8e6)
  • {format: 'currency'}: hiển thị các số bằng nội tệ (ví dụ: 8.000.000 USD
  • {format: 'percent'}: hiển thị các con số dưới dạng tỷ lệ phần trăm (ví dụ: 800.000.000%)
  • {format: 'short'}: hiển thị các số viết tắt (ví dụ: 8 TRIỆU)
  • {format: 'long'}: hiển thị các số dưới 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, hãy xem phần tải biểu đồ bằng một ngôn ngữ cụ thể.

Trong các giá trị đánh dấu nhịp độ khung hình và đường lưới, một số tổ hợp thay thế cho tất cả các tùy chọn đường lưới liên quan sẽ được xem xét và các lựa chọn thay thế sẽ bị từ chối nếu các nhãn đánh dấu đã định dạng sẽ 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 thị giá trị đánh dấu số nguyên, nhưng xin lưu ý rằng nếu không có tiêu chí thay thế nào đáp ứng điều kiện này, thì sẽ không có đường cơ sở 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

Một đối tượng có thành viê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 đồ. Chỉ định một chuỗi màu HTML hợp lệ.

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

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

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

Một loạt các kích thước (dưới dạng giá trị dữ liệu, không phải pixel) giữa các đường lưới liền kề. Hiện tại, tuỳ chọn này chỉ dành cho các trục số, nhưng tương tự như các tuỳ chọn gridlines.units.<unit>.interval chỉ dùng cho ngày và giờ. Đối với tỷ lệ tuyến tính, giá trị mặc định là [1, 2, 2.5, 5], nghĩa là các giá trị đường lưới có thể rơi vào mọi đơn vị (1), trên các đơn vị chẵn (2) hoặc trên bội số của 2.5 hoặc 5. Bất kỳ sức mạnh nào gấp 10 lần các giá trị này cũng được xem xét (ví dụ: [10, 20, 25, 50] và [.1, .2, .25, .5]). Đối với tỷ lệ nhật ký, giá trị mặc định là [1, 2, 5].

Loại: số từ 1 đến 10, không bao gồm 10.
Mặc định: đã tính toán
vAxis.gridlines.minDistance

Không gian màn hình tối thiểu, tính bằng pixel, giữa các đường lưới chính hAxis. Giá trị mặc định cho đường lưới chính là 40 cho tỷ lệ tuyến tính và 20 cho tỷ lệ nhật ký. Nếu bạn chỉ định count chứ không phải minSpacing, thì minInterval được tính từ số lượng. Và ngược lại, nếu bạn chỉ định minSpacing chứ không phải count, thì số lượng sẽ được tính từ minInterval. Nếu bạn chỉ định cả hai, minSpacing sẽ ghi đè.

Loại: số
Mặc định: đã tính toán
vAxis.gridlines.multi

Tất cả các giá trị đường lưới và kim đánh dấu phải là bội số của giá trị của tùy chọn này. Xin lưu ý rằng, không giống như khoảng thời gian, số luỹ thừa gấp 10 lần bội số của chúng ta không được xem xét. Vì vậy, bạn có thể buộc các kim đánh dấu nhịp độ khung hình là số nguyên bằng cách chỉ định gridlines.multiple = 1 hoặc buộc các kim đánh dấu phải là bội số của 1.000 bằng cách chỉ định gridlines.multiple = 1000.

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 các loại dữ liệu ngày/ngày/giờ trong ngày khi dùng chung với các đường lưới được tính toán trên biểu đồ. Cho phép định dạng theo 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ể tìm 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ó thành viên để định cấu hình các đường lưới phụ trên trục dọc, tương tự như tùy chọn vAxis.gridlines.

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

Màu của đường lưới nhỏ theo chiều 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: Sự kết hợp giữa đường lưới và màu nền
vAxis.minorGridlines.interval

Tuỳ chọn smallestGridlines.interval giống như tuỳ chọn khoảng thời gian lưới chính, nhưng khoảng thời gian được chọn sẽ luôn là số chia đều của khoảng thời gian lưới lớn. Khoảng thời gian mặc định cho tỷ lệ tuyến tính là [1, 1.5, 2, 2.5, 5] và tỷ lệ nhật ký là [1, 2, 5].

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

Khoảng trống tối thiểu bắt buộc, tính bằng pixel, giữa đường lưới nhỏ liền kề và giữa đường lưới nhỏ và đường lưới chính. Giá trị mặc định là 1/2 minDistance của đường lưới chính cho tỷ lệ tuyến tính và 1/5 minDistance cho tỷ lệ nhật ký.

Loại: số
Mặc định: được tính toán
vAxis.minorGridlines.multi

Tương tự như đối với gridlines.multiple chính.

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

Tuỳ chọn subGridlines.count chủ yếu 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ỏ 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 tối thiểu bắt buộc (xem vAxis.minorGridlines.minDistance).

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 các loại dữ liệu ngày/ngày/giờ trong ngày khi sử dụng với biểu đồ lưới lưới được tính toán theo biểu đồ. Cho phép định dạng theo 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ể tìm 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 làm cho trục dọc trở thành thang đo lôgarit. Lưu ý: Tất cả giá trị đều phải là số dương.

Loại: Boolean
Mặc định: sai
vAxis.scaleType

Thuộc tính vAxis giúp trục tung trở thành thang đo lôgarit. Có thể là một trong những trạng thái sau:

  • rỗng – Không thực hiện tỷ lệ lôgarit.
  • 'log' - Thang đo lôgarit. Biểu đồ âm và giá trị 0 không được đánh dấu. Tùy chọn này giống với việc đặt vAxis: { logscale: true }.
  • 'MirrorLog' - Tỷ lệ lôgarit trong đó giá trị âm và 0 được vẽ nên. Giá trị biểu đồ của số âm là số âm của nhật ký về giá trị tuyệt đối. Các giá trị gần bằng 0 được sắp xếp theo tỷ lệ tuyến tính.

Tuỳ chọn này chỉ được hỗ trợ cho trục continuous.

Loại: chuỗi
Mặc định: rỗng
vAxis.textPosition

Vị trí của văn bản trên trục dọc, tương ứng với khu vực biểu đồ. Các giá trị được hỗ trợ: "out", "in", "none".

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

Một đố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à chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem 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 dấu kiểm 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 ngày trong giờ) hoặc một đối tượng. Nếu là đối tượng thì đó phải là thuộc tính v cho giá trị kim đánh dấu nhịp độ khung hình, và thuộc tính f không bắt buộc chứa chuỗi ký tự hiển thị dưới dạng nhãn.

ViewWindow sẽ tự động mở rộng để bao gồm các dấu kiểm tối thiểu và tối đa, trừ khi 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 phần tử
Mặc định: tự động
Tiêu đề vAxis.

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

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

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

color có thể là chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem 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 dọc sang giá trị được chỉ định; giá trị này sẽ tăng lên trong hầu hết các biểu đồ. Bỏ qua nếu bạn đặt giá trị này 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 dọc sang giá trị được chỉ định; giá trị này sẽ giảm xuống trong hầu hết các biểu đồ. Bỏ qua nếu giá trị này được đặt thành 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 khu vực biểu đồ. Các giá trị chuỗi sau được hỗ trợ:

  • "Pretty" - Điều chỉnh theo tỷ lệ các giá trị dọc để các giá trị dữ liệu tối đa và tối thiểu được hiển thị một chút bên trong phần dưới cùng và trên cùng của khu vực biểu đồ. ViewWindow được mở rộng thành đường lưới chính gần nhất cho số hoặc đường lưới nhỏ gần nhất cho ngày và giờ.
  • "đã phóng to" - Điều chỉnh các giá trị dọc theo tỷ lệ sao cho các giá trị dữ liệu tối đa và tối thiểu chạm vào phần đầu và cuối của vùng biểu đồ. Điều này sẽ khiến vaxis.viewWindow.min và vaxis.viewWindow.max bị bỏ qua.
  • "explicit" - Tuỳ chọn không dùng nữa để chỉ định giá trị tỷ lệ trên cùng và dưới cùng của khu vực biểu đồ. (Không dùng nữa vì mã này dư thừa với vaxis.viewWindow.min và vaxis.viewWindow.max. Những 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 sẽ hiển thị.
Loại: chuỗi
Mặc định: Tương đương với "xinh đẹp", nhưng vaxis.viewWindow.min và vaxis.viewWindow.max sẽ được ưu tiên nếu sử dụng.
vAxis.viewWindow

Chỉ định phạm vi cắt của trục dọc.

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 để hiển thị.

Bỏ qua khi vAxis.viewWindowMode là "xinh mối" hoặc "tối đa hoá".

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

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

Bỏ qua khi vAxis.viewWindowMode là "xinh mối" hoặc "tối đa hoá".

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 đồ chỉ chấp nhận các lệnh gọi phương thức khác sau khi sự kiện ready được kích hoạt. Extended description

Loại dữ liệu trả về: không có
getAction(actionID)

Trả về đối tượng hành động trên chú giải công cụ có 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 thành phần 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 cho id chưa được ghi lại (đây là giá trị trả về của trình xử lý sự kiện) nhưng dưới đây là một số ví dụ:

var cli = chart.getChartLayoutInterface();

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

Giá trị tương ứng với vùng chứa của biểu đồ. Gọi hàm 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 nội dung 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

Giá trị tương ứng với vùng chứa của biểu đồ. Gọi hàm 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 hàm 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, là một giá trị bù trừ pixel từ cạnh bên của vùng chứa biểu đồ. Có thể âm.

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

Gọi hàm 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 một URI hình ảnh.

Gọi hàm này sau khi biểu đồ được vẽ.

Xem phần In biểu đồ PNG.

Loại trả về: chuỗi
getSelection()

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

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

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

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

Gọi hàm này sau khi biểu đồ được vẽ.

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

Trả về toạ độ x của pixel theo dataValue so với cạnh trái của vùng chứa của biểu đồ.

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

Gọi hàm này sau khi biểu đồ được vẽ.

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

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

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

Gọi hàm này sau khi biểu đồ được vẽ.

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

Xoá thao tác chú giải công cụ với actionID được yêu cầu khỏi biểu đồ.

Loại dữ liệu trả về: none
setAction(action)

Đặt hành động trong chú giải công cụ sẽ được 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 cho thao tác được đặt, text – văn bản sẽ xuất hiện trong chú giải công cụ cho thao tác và action – hàm sẽ chạy khi người dùng nhấp vào văn bản thao tác.

Bạn phải thiết lập tất cả hành động trong chú giải 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 dữ liệu trả về: none
setSelection()

Chọn các thực thể biểu đồ đã chỉ định. Hủy mọi lựa chọn trước đó. Các thực thể có thể chọn là điểm, chú thích, mục nhập chú giải và danh mục. Một điểm hoặc chú thích tương ứng với một ô trong bảng dữ liệu, một mục chú giải cho một cột (chỉ mục hàng là rỗng) và một danh mục cho một hàng (chỉ mục cột 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 dữ liệu trả về: không có
clearChart()

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

Loại dữ liệu trả về: 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 Hoạt động 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 đồ. Có thể được dùng để xác định thời điểm người dùng nhấp vào tiêu đề, các phần tử dữ liệu, mục nhập chú giải, trục, đường lưới, hoặc nhãn.

Thuộc tính: 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 chú giải. Trả về chỉ mục trang dựa trên 0 chú giải hiện tại và tổng số trang.

Thuộc tính: 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. Truyền lại các chỉ mục hàng và cột của phần tử bảng dữ liệu tương ứng.

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

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

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

Biểu đồ đã 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 bạn 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 bạn đã chọn, hãy gọi getSelection().

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

Chính sách dữ liệu

Toàn bộ mã và dữ liệu đều được xử lý và kết xuất trong trình duyệt. Dữ liệu không được gửi đến bất kỳ máy chủ nào.