Biểu đồ

Tổng quan

Biểu đồ là biểu đồ nhóm dữ liệu số vào các thùng, hiển thị các thùng đó dưới dạng các cột được phân đoạn. Các giá trị này dùng để mô tả sự phân phối của một tập dữ liệu: tần suất các giá trị nằm trong phạm vi.

Google Biểu đồ sẽ tự động chọn số lượng thùng cho bạn. Tất cả các thùng đều có chiều rộng bằng nhau và chiều cao tỷ lệ với số điểm dữ liệu trong thùng. Trong những khía cạnh khác, biểu đồ tương tự như biểu đồ cột.

Ví dụ

Dưới đây là biểu đồ về chiều dài của khủng long:

Biểu đồ cho chúng ta biết rằng thùng rác phổ biến nhất là < 10 mét và chỉ có một con khủng long cao hơn 40 mét. Chúng ta có thể di chuột qua thanh để biết đó chính là Seismosaurus (có thể chỉ là một Diplodocus rất lớn; các nhà cổ sinh vật học không chắc chắn).

Mã để tạo biểu đồ này được hiển thị bên dưới. Sau khi xác định dữ liệu (tại đây, bằng google.visualization.arrayToDataTable), biểu đồ được xác định bằng một lệnh gọi đến google.visualization.Histogram và được vẽ bằng phương thức draw.

<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([
          ['Dinosaur', 'Length'],
          ['Acrocanthosaurus (top-spined lizard)', 12.2],
          ['Albertosaurus (Alberta lizard)', 9.1],
          ['Allosaurus (other lizard)', 12.2],
          ['Apatosaurus (deceptive lizard)', 22.9],
          ['Archaeopteryx (ancient wing)', 0.9],
          ['Argentinosaurus (Argentina lizard)', 36.6],
          ['Baryonyx (heavy claws)', 9.1],
          ['Brachiosaurus (arm lizard)', 30.5],
          ['Ceratosaurus (horned lizard)', 6.1],
          ['Coelophysis (hollow form)', 2.7],
          ['Compsognathus (elegant jaw)', 0.9],
          ['Deinonychus (terrible claw)', 2.7],
          ['Diplodocus (double beam)', 27.1],
          ['Dromicelomimus (emu mimic)', 3.4],
          ['Gallimimus (fowl mimic)', 5.5],
          ['Mamenchisaurus (Mamenchi lizard)', 21.0],
          ['Megalosaurus (big lizard)', 7.9],
          ['Microvenator (small hunter)', 1.2],
          ['Ornithomimus (bird mimic)', 4.6],
          ['Oviraptor (egg robber)', 1.5],
          ['Plateosaurus (flat lizard)', 7.9],
          ['Sauronithoides (narrow-clawed lizard)', 2.0],
          ['Seismosaurus (tremor lizard)', 45.7],
          ['Spinosaurus (spiny lizard)', 12.2],
          ['Supersaurus (super lizard)', 30.5],
          ['Tyrannosaurus (tyrant lizard)', 15.2],
          ['Ultrasaurus (ultra lizard)', 30.5],
          ['Velociraptor (swift robber)', 1.8]]);

        var options = {
          title: 'Lengths of dinosaurs, in meters',
          legend: { position: 'none' },
        };

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

Bạn có thể bỏ qua nhãn (ở đây, tên khủng long). Trong trường hợp đó, phần chú thích sẽ chỉ hiển thị giá trị số.

Kiểm soát màu

Dưới đây là biểu đồ về dân số theo quốc gia:

Có hơn 200 quốc gia có dân số dưới 100 triệu người và sau đó biến mất nghiêm trọng.

Biểu đồ này sử dụng tuỳ chọn colors để vẽ dữ liệu màu xanh lục:

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['green'],
  };

Giống như tất cả các Biểu đồ của Google, màu có thể được chỉ định dưới dạng tên tiếng Anh hoặc giá trị hex.

Bộ chứa kiểm soát

Theo mặc định, Google Biểu đồ sẽ tự động chọn kích thước nhóm bằng một thuật toán phổ biến dành cho biểu đồ. Tuy nhiên, đôi khi, bạn sẽ muốn ghi đè lên và biểu đồ ở trên là một ví dụ. Khi có quá nhiều quốc gia ở bộ chứa đầu tiên, thật khó để đánh giá các quốc gia đó ở những quốc gia khác.

Đối với các trường hợp như vậy, Biểu đồ biểu đồ cung cấp 2 tuỳ chọn: histogram.bucketSize, ghi đè thuật toán và mã hoá cứng kích thước bộ chứa; và histogram.lastBucketPercentile. Lựa chọn thứ hai cần giải thích thêm: lựa chọn này thay đổi cách tính kích thước bộ chứa để bỏ qua các giá trị cao hơn hoặc thấp hơn các giá trị còn lại theo tỷ lệ phần trăm mà bạn chỉ định. Các giá trị vẫn được đưa vào biểu đồ, nhưng không ảnh hưởng đến cách phân giỏ các giá trị đó. Điều này hữu ích khi bạn không muốn các điểm ngoại lai nằm trong bộ chứa riêng; thay vào đó, các điểm ngoại lai sẽ được nhóm với các bộ chứa đầu tiên hoặc cuối cùng.

Trong biểu đồ trên, chúng tôi đã bỏ qua 5 phần trăm giá trị trên cùng và 5 phần trăm dưới cùng khi tính toán kích thước nhóm. Các giá trị vẫn được lập biểu đồ; điều duy nhất thay đổi là kích thước bộ chứa, nhưng sẽ tạo ra một biểu đồ dễ đọc hơn.

Ví dụ này cũng cho thấy cách chúng ta có thể thay đổi tỷ lệ của trục tung để sử dụng tỷ lệ "nhật ký phản chiếu", điều này cũng hữu ích khi lập biểu đồ dữ liệu có một phần dài các giá trị nhỏ.

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { lastBucketPercentile: 5 },
    vAxis: { scaleType: 'mirrorLog' }
  };

Như bạn có thể thấy, việc xoá 5 phần trăm trên cùng và dưới cùng khỏi phép tính đã dẫn đến kích thước bộ chứa là 10.000.000 thay vì 100.000.000 mà lẽ ra sẽ có. Nếu đã biết rõ rằng kích thước bộ chứa 10.000.000 là mức bạn muốn, thì có thể bạn đã sử dụng histogram.bucketSize để làm điều đó:

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { bucketSize: 10000000 }
  };

Trong ví dụ sau, chúng tôi cho biết cách mở rộng phạm vi của các bộ chứa và cho thấy nhiều bộ chứa hơn mà không có khoảng cách giữa các bộ chứa đó. Bạn có thể dùng tuỳ chọn maxNumBuckets để tăng số lượng bộ chứa mặc định. Các tuỳ chọn histogram.minValuehistogram.maxValue sẽ mở rộng phạm vi của bộ chứa, nhưng lưu ý rằng nếu có dữ liệu nằm ngoài phạm vi này, các tuỳ chọn này sẽ không thu gọn phạm vi.

Ví dụ này cũng cho thấy bạn có thể chỉ định kim đánh dấu nhịp độ khung hình để hiển thị cho từng bộ chứa bằng cách sử dụng tuỳ chọn ticks rõ ràng cho hAxis. Điều này không ảnh hưởng đến chính bộ chứa mà chỉ ảnh hưởng đến cách hiển thị kim đánh dấu nhịp độ khung hình.

Ngoài ra, hãy lưu ý rằng chúng tôi chỉ định chartArea.width để số lượng nhóm sẽ phù hợp chính xác hơn mà không cần cấu phần phần mềm hình ảnh. Sau đây là các lựa chọn cho ví dụ này.

  var options = {
    title: 'Approximating Normal Distribution',
    legend: { position: 'none' },
    colors: ['#4285F4'],

    chartArea: { width: 405 },
    hAxis: {
      ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
    },
    bar: { gap: 0 },

    histogram: {
      bucketSize: 0.01,
      maxNumBuckets: 400,
      minValue: -1,
      maxValue: 1
    }
  };

Nhiều bộ sách

Sau đây là biểu đồ điện tích của các hạt hạ nguyên tử, theo Mô hình chuẩn:

Biểu đồ trên có một chuỗi chứa tất cả các phần tử. Các hạt hạ nguyên tử có thể được chia thành 4 nhóm: quark, lepton và boson. Hãy coi mỗi định dạng là một chuỗi riêng:

Trong biểu đồ này, chúng tôi sử dụng một chuỗi khác nhau (và do đó sử dụng màu) cho mỗi loại trong số 4 loại hạt hạ nguyên tử. Chúng tôi đã đặt interpolateNulls thành false một cách rõ ràng để đảm bảo rằng các giá trị rỗng (cần thiết vì các chuỗi có độ dài không bằng nhau) không được vẽ biểu đồ. Chúng ta cũng đặt legend.maxLines để thêm một dòng khác vào chú giải:

  var data = google.visualization.arrayToDataTable([
    ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
    [2/3, -1, 0, 0],
    [2/3, -1, 0, null],
    [2/3, -1, 0, null],
    [-1/3, 0, 1, null],
    [-1/3, 0, -1, null],
    [-1/3, 0, null, null],
    [-1/3, 0, null, null]
  ]);

  var options = {
    title: 'Charges of subatomic particles',
    legend: { position: 'top', maxLines: 2 },
    colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
    interpolateNulls: false,
  };

Đang tải

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

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

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

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

Định dạng dữ liệu

Có hai cách để điền vào bảng dữ liệu biểu đồ. Khi chỉ có một bộ sách:

  var data = google.visualization.arrayToDataTable([
    ['Name', 'Number'],
    ['Name 1', number1],
    ['Name 2', number2],
    ['Name 3', number3],
    ...
  ]);

...và khi có nhiều bộ sách:

  var data = google.visualization.arrayToDataTable([
    ['Series Name 1', 'Series Name 2', 'Series Name 3', ...],
    [series1_number1, series2_number1, series3_number1, ...],
    [series1_number2, series2_number2, series3_number2, ...],
    [series1_number3, series2_number3, series3_number3, ...],
    ...
  ]);

Hiện không hỗ trợ vai trò không bắt buộc trong cột nào cho biểu đồ.

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

Tên
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
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"
bar.groupWidth
Chiều rộng của nhóm thanh, được chỉ định bằng một trong các định dạng sau:
  • Điểm ảnh (ví dụ: 50).
  • Tỷ lệ phần trăm chiều rộng có sẵn cho từng nhóm (ví dụ: "20%"), trong đó "100%" có nghĩa là các nhóm không có khoảng trống giữa chúng.
Loại: số hoặc chuỗi
Mặc định: Tỷ lệ vàng, khoảng "61,8%".
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
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
focusTarget

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

  • "Mốc dữ liệu" – 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.
  • "danh mục" – Tập trung vào một nhóm tất cả các điểm dữ liệu dọc theo trục chính. Tương quan với một hàng trong bảng dữ liệu.

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

Loại: chuỗi
Mặc định: "điểm đo lường"
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.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.interval

Một mảng 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 thang đo tuyến tính, giá trị mặc định là [1, 2, 2.5, 5], nghĩa là giá trị đường lưới có thể rơi trên mọi đơn vị (1), trên các đơn vị chẵn (2) hoặc trên các bội số của 2,5 hoặc 5. Bất kỳ luỹ thừa nào gấp 10 lần các giá trị này cũng sẽ đượ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: được tính toán
hAxis.gridlines.minSpacing

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 các đườ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ì minSpacing sẽ được tính từ số lượng. 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ừ minSpacing. Nếu bạn chỉ định cả hai, minSpacing sẽ ghi đè.

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

Tất cả giá trị đường lưới và dấu kiểm phải là bội số của giá trị của tuỳ chọn này. Xin lưu ý rằng, không giống như các khoảng thời gian, luỹ thừa của 10 lần bội số sẽ không được xem xét. Vì vậy, bạn có thể buộ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 kim đánh dấu nhịp độ khung hình thành bội số của 1000 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 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.interval

Tuỳ chọnMinorGridlines.interval cũng giống như tuỳ chọn khoảng đường 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 chính. Khoảng mặc định cho thang đo tuyến tính là [1, 1.5, 2, 2.5, 5] và cho thang nhật ký là [1, 2, 5].

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

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

Loại: số
Mặc định: được tính
hAxis.minorGridlines.multiple

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

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
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 fontNamefontSize.

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

Nếu giá trị là false, thì các nhãn ngoài cùng sẽ bị ẩn chứ không cho phép cắt bằng vùng chứa biểu đồ. Nếu true, tuỳ chọn này sẽ cho phép cắt nhãn.

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

Nếu giá trị là true (đúng), hãy vẽ văn bản trên trục hoành một góc để giúp nhiều văn bản hơn dọc theo trục. Nếu giá trị là false, hãy vẽ văn bản trên trục hoành theo chiều dọc. Hành vi mặc định là văn bản nghiêng nếu văn bản đó không vừa vặn khi được vẽ thẳng đứng. Lưu ý rằng tuỳ chọn này chỉ có sẵn khi hAxis.textPosition được đặt thành "out" (giá trị 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 được vẽ nghiêng. Bỏ qua nếu hAxis.slantedTextfalse hoặc đang ở chế độ tự động và biểu đồ đã quyết định vẽ văn bản theo chiều ngang. Nếu là góc dương thì xoay theo chiều ngược 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 các nhãn văn bản trục trở nên quá đông, máy chủ có thể di chuyển các nhãn lân cận lên hoặc xuống để khớp các nhãn gần nhau hơn. Giá trị này chỉ định số lượng cấp tối đa cần sử dụng. Máy chủ có thể sử dụng ít cấp hơn nếu nhãn có thể vừa mà không chồng chéo. Đố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 cho nhãn văn bản. Nhãn có thể trải dài nhiều dòng nếu quá dài. Theo mặc định, số lượng 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.minTextSpacing

Khoảng cách tối thiểu theo chiều ngang, tính bằng pixel, được phép giữa hai nhãn văn bản liền kề. Nếu các nhãn được đặt cách nhau 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 sắp xếp nhãn gọn gàng sẽ được áp dụng (ví dụ: cắt bớt nhãn hoặc bỏ một vài nhãn).

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

Số lượng nhãn trục hoành cần hiển thị, trong đó 1 có nghĩa là hiện mọi nhãn, 2 có nghĩa là hiện mọi nhãn khác, v.v. Mặc định là cố gắng hiện nhiều nhãn nhất có thể mà không chồng chéo.

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

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

Chỉ mục hàng dựa trên 0, nơi cửa sổ cắt bắt đầu. Các điểm dữ liệu tại các chỉ mục thấp hơn giá trị này sẽ bị cắt bớt. Cùng với vAxis.viewWindowMode.max, thuộc tính này xác định một phạm vi đang mở một nửa [tối thiểu, tối đa) biểu thị các chỉ mục phần tử cần hiển thị. Nói cách khác, mọi chỉ mục sao cho min <= index < max sẽ được 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
histogram.bucketSize

Mã hoá cứng kích thước của từng thanh biểu đồ, thay vì cho phép xác định bằng thuật toán.

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

Bỏ qua các phần phân chia mỏng giữa các khối của biểu đồ, biến biểu đồ này thành một loạt thanh đồng nhất.

Loại: boolean
Mặc định: false
histogram.lastBucketPercentile

Khi tính toán kích thước bộ chứa của biểu đồ, hãy bỏ qua lastBucketPercentile phần trăm trên cùng và dưới cùng. Các giá trị vẫn được đưa vào biểu đồ nhưng không ảnh hưởng đến việc phân nhóm.

Loại: số
Mặc định: 0
histogram.minValue

Mở rộng phạm vi nhóm để bao gồm giá trị này.

Loại: số
Mặc định: tự động – sử dụng tối thiểu dữ liệu
histogram.maxValue

Mở rộng phạm vi nhóm để bao gồm giá trị này.

Loại: số
Mặc định: tự động – sử dụng dữ liệu tối đa
histogram.numBucketsRule

Cách tính toán số lượng nhóm mặc định. Các giá trị có thể là:

  • 'sqrt' – Tính toán căn bậc hai của số điểm dữ liệu.
  • 'sturges' – Xuất phát từ phân phối nhị thức. Ngụ ý giả định rằng có sự phân phối gần đúng chuẩn.
  • 'rice' – Phương án thay thế đơn giản hơn cho quy tắc của Sturges.
Để biết thêm thông tin chi tiết, hãy xem Wikipedia – Biểu đồ: Số thùng và chiều rộng

Loại: chuỗi
Mặc định:'sqrt'
độ 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
interpolateNulls

Liệu có đoán được giá trị của các điểm còn thiếu hay không. Nếu đúng, công cụ 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 đặt là false, thao tác này sẽ để lại một dấu ngắt trong dòng tại điểm không xác định.

Phương thức này không được biểu đồ Area hỗ trợ với tuỳ chọn isStacked: true/'percent'/'relative'/'absolute'.

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

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

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

Các tuỳ chọn cho isStacked là:

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

Đối với khả năng xếp chồng 100%, giá trị được 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ế của phần tử đó.

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

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
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"
reverseCategories

Nếu bạn đặt chính sách này thành true, thì hệ thống sẽ vẽ các chuỗi từ phải sang trái. Lựa chọn mặc định là vẽ từ trái sang phải.

Loại: boolean
Mặc định: false
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 đồ.
  • targetAxisIndex – Trục nào để gán chuỗi dữ liệu 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; hãy đặt thành 1 để xác định một biểu đồ mà trong đó các chuỗi dữ liệu hiển thị dựa trên các trục khác nhau. Ít nhất một chuỗi được phân bổ cho trục mặc định. Bạn có thể xác định tỷ lệ khác nhau cho các trục khác nhau.
  • 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 fontNamefontSize.

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.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. Giá trị mặc định là true khi đặt focusTarget thành "category" (danh mục), nếu không giá trị mặc định sẽ là false.

Loại: boolean
Mặc định: tự động
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 fontNamefontSize.

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ị.
Loại: chuỗi
Mặc định: "lấy nét"
vAxes

Chỉ định 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 mọi 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 tài sản.

Để chỉ định một biểu đồ có nhiều trục tung, trước tiên, hãy xác định một trục mới bằng series.targetAxisIndex, sau đó định cấu hình trục đó bằng vAxes. Ví dụ sau đây sẽ gán chuỗi 2 cho trục bên phải và chỉ định một tiêu đề cũng như 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 hiển thị ở trên; mảng là một mảng các đối tượng, một mảng cho mỗi trục. Ví dụ: ký hiệu kiểu mảng sau đây giống với đối tượng vAxis ở 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
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.interval

Một mảng 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 thang đo tuyến tính, giá trị mặc định là [1, 2, 2.5, 5], nghĩa là giá trị đường lưới có thể rơi trên mọi đơn vị (1), trên các đơn vị chẵn (2) hoặc trên các bội số của 2,5 hoặc 5. Bất kỳ luỹ thừa nào gấp 10 lần các giá trị này cũng sẽ đượ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: được tính toán
vAxis.gridlines.minSpacing

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 các đườ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ì minSpacing sẽ được tính từ số lượng. 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ừ minSpacing. Nếu bạn chỉ định cả hai, minSpacing sẽ ghi đè.

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

Tất cả giá trị đường lưới và dấu kiểm phải là bội số của giá trị của tuỳ chọn này. Xin lưu ý rằng, không giống như các khoảng thời gian, luỹ thừa của 10 lần bội số sẽ không được xem xét. Vì vậy, bạn có thể buộ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 kim đánh dấu nhịp độ khung hình thành bội số của 1000 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 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.interval

Tuỳ chọnMinorGridlines.interval cũng giống như tuỳ chọn khoảng đường 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 chính. Khoảng mặc định cho thang đo tuyến tính là [1, 1.5, 2, 2.5, 5] và cho thang nhật ký là [1, 2, 5].

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

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

Loại: số
Mặc định: được tính
vAxis.minorGridlines.multiple

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

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

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

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.minvaxis.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.minvaxis.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.minvaxis.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à thanh, mục nhập chú giải và danh mục. Đố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à thanh, mục nhập chú giải và danh mục. Đố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ệnSự 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. Thanh tương quan 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 rỗng) và một danh mục cho một hàng (chỉ mục cột là rỗng).

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. Thanh tương quan 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 rỗng) và một danh mục cho một hàng (chỉ mục cột là rỗng).

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 về 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.