Tổng quan
Một biểu đồ bong bóng trò chuyện hiển thị trong trình duyệt bằng cách sử dụng SVG hoặc VML. Hiển thị các mẹo khi di chuột qua bong bóng.
Biểu đồ bong bóng được dùng để trực quan hoá một tập dữ liệu có từ 2 đến 4 phương diện. Hai kích thước đầu tiên được hiển thị dưới dạng toạ độ, phương diện thứ ba là màu sắc và phương diện thứ tư là kích thước.
Ví dụ:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawSeriesChart); function drawSeriesChart() { var data = google.visualization.arrayToDataTable([ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000] ]); var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: {textStyle: {fontSize: 11}} }; var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="series_chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Màu theo số
Bạn có thể sử dụng tuỳ chọn colorAxis
để tô màu bong bóng tương ứng với một giá trị, như trong ví dụ bên dưới.
<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([ ['ID', 'X', 'Y', 'Temperature'], ['', 80, 167, 120], ['', 79, 136, 130], ['', 78, 184, 50], ['', 72, 278, 230], ['', 81, 200, 210], ['', 72, 170, 100], ['', 68, 477, 80] ]); var options = { colorAxis: {colors: ['yellow', 'red']} }; var chart = new google.visualization.BubbleChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Tuỳ chỉnh nhãn
Bạn có thể kiểm soát kiểu chữ, phông chữ và màu bong bóng bằng tùy chọn bubble.textStyle
:
var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { fontSize: 12, fontName: 'Times-Roman', color: 'green', bold: true, italic: true } } };
<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([ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000] ]); var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { fontSize: 12, fontName: 'Times-Roman', color: 'green', bold: true, italic: true } } }; var chart = new google.visualization.BubbleChart(document.getElementById('textstyle')); chart.draw(data, options); } </script> </head> <body> <div id="textstyle" style="width: 900px; height: 500px;"></div> </body> </html>
Các nhãn trên biểu đồ trên rất khó đọc và một trong những lý do là khoảng trắng xung quanh các nhãn đó. Đây được gọi là aura và nếu
muốn biểu đồ của mình không có, bạn có thể đặt
bubble.textStyle.auraColor
thành 'none'
.
var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { auraColor: 'none' } } };
<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([ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000] ]); var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { auraColor: 'none', } } }; var chart = new google.visualization.BubbleChart(document.getElementById('noAura')); chart.draw(data, options); } </script> </head> <body> <div id="noAura" style="width: 900px; height: 500px;"></div> </body> </html>
Đ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.BubbleChart
.
var visualization = new google.visualization.BubbleChart(container);
Định dạng dữ liệu
Hàng: Mỗi hàng trong bảng trình bày một bong bóng trò chuyện.
Cột:
Cột 0 | Cột 1 | Cột 2 | Cột 3 (không bắt buộc) | Cột 4 (không bắt buộc) | |
---|---|---|---|---|---|
Mục đích: | Mã (tên) của bong bóng trò chuyện | Toạ độ X | Toạ độ Y | Mã nhận dạng dạng chuỗi hoặc giá trị đại diện cho màu trên thang màu chuyển sắc,
tuỳ thuộc vào loại cột:
|
Kích thước; các giá trị trong cột này được liên kết đến các giá trị pixel thực tế bằng cách sử dụng tùy chọn sizeAxis . |
Loại dữ liệu: | chuỗi | number | number | chuỗi hoặc số | number |
Các lựa chọn về cấu hình
Tên | |
---|---|
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:
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 Loại: Boolean
sai mặc định
|
TrụcTitlesPosition |
Vị trí đặt tiêu đề trục, so với khu vực biểu đồ. Giá trị được hỗ trợ:
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ụ: 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"
|
bong bóng |
Một đối tượng có thành viên để định cấu hình các thuộc tính hình ảnh của bong bóng trò chuyện. Loại: đối tượng
Mặc định: rỗng
|
bong bóng.opacity |
Độ mờ của các bong bóng, trong đó 0 là hoàn toàn trong suốt và 1 là hoàn toàn không trong suốt. Loại: số từ 0 đến 1
Mặc định: 0.8
|
Bubble.stroke |
Màu của nét gạch. Loại: chuỗi
Mặc định: "#DAU"
|
bong bóng.textStyle |
Một đối tượng chỉ định kiểu văn bản của bong bóng trò chuyện. Đối tượng có định dạng sau: {color: <string>, fontName: <string>, fontSize: <number>}
Loại: đối tượng
Mặc định:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
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ụ: 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:
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ụ: Loại: Mảng chuỗi
Mặc định: màu mặc định
|
Trục màu |
Một đối tượng chỉ định mối liên kết giữa các giá trị và màu của cột màu hoặc thang độ 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 họa dưới đây: {minValue: 0, colors: ['#FF0000', '#00FF00']} Loại: đối tượng
Mặc định: rỗng
|
colorAxis.minValue |
Nếu có, hãy chỉ định một giá trị tối thiểu cho dữ liệu màu của biểu đồ. Các giá trị dữ liệu màu của giá trị này trở xuống sẽ hiển thị dưới dạng màu đầu tiên trong dải ô Loại: số
Mặc định: Giá trị tối thiểu của cột màu trong dữ liệu biểu đồ
|
colorAxis.maxValue |
Nếu có, hãy chỉ định một giá trị tối đa cho dữ liệu màu của biểu đồ. Các giá trị dữ liệu màu của giá trị này trở lên sẽ hiển thị dưới dạng màu cuối cùng trong dải ô Loại: số
Mặc định: Giá trị tối đa của cột màu trong dữ liệu biểu đồ
|
colorAxis.values |
Nếu có, hãy kiểm soát cách các giá trị liên kết với màu sắc. Mỗi giá trị được liên kết với một màu tương ứng trong mảng Loại: mảng số
Mặc định: rỗng
|
colorAxis.colors |
Màu sắc để chỉ định cho các giá trị trong hình ảnh trực quan. Một mảng chuỗi, trong đó mỗi phần tử là một chuỗi màu HTML, ví dụ: Loại: mảng chuỗi màu
Mặc định: rỗng
|
colorAxis.legend |
Một đối tượng chỉ định kiểu của chú giải màu độ dốc. Loại: đối tượng
Mặc định: rỗng
|
colorAxis.legend.position |
Vị trí chú giải. Có thể là một trong những trạng thái sau:
Loại: đối tượng
Mặc định: "trên cùng"
|
colorAxis.legend.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>}
Loại: đối tượng
Mặc định:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
colorAxis.legend.numberFormat |
Chuỗi định dạng cho các nhãn số. Đây là tập hợp con của
bộ mẫu ICU
.
Ví dụ: Loại: chuỗi
Mặc định: tự động
|
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 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:
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 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 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
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 Loại: số
Mặc định: 4
|
khám phá.DeltaDelta |
Khi người dùng phóng to hoặc thu nhỏ, Loại: số
Mặc định: 1.5
|
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. 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ụ: 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 Loại: 1 hoặc -1
Mặc định: 1
|
hAxis.format |
Chuỗi định dạng cho các nhãn trục số. Đây là tập hợp con của
bộ mẫu ICU
. Ví dụ:
Đị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 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} 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 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. 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 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 Loại: Boolean
Mặc định: sai
|
hAxis.scaleType |
Thuộc tính
Loại: chuỗi
Mặc định: rỗng
|
hAxis.textPosition |
Vị trí của văn bản trên trục 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> }
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
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 Ví dụ:
Loại: Mảng phần tử
Mặc định: tự động
|
Tiêu đề hAxis. |
Thuộc tí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> }
Loại: đối tượng
Mặc định:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.maxValue |
Di chuyển giá trị tối đa của trục hoành 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.
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.
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ợ:
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 |
Giá trị dữ liệu ngang tối đa để hiển thị. Bỏ qua khi Loại: số
Mặc định: tự động
|
hAxis.viewWindow.min |
Giá trị dữ liệu theo chiều ngang tối thiểu để hiển thị. Bỏ qua khi Loại: số
Mặc định: tự động
|
độ cao |
Chiều cao của biểu đồ, tính bằng pixel. Loại: số
Mặc định: chiều cao của phần tử chứa
|
chú 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:
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:
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> }
Loại: đối tượng
Mặc định:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
chế độ lựa chọn |
Khi Loại: chuỗi
Mặc định: "single"
|
loạt phim |
Đối tượng của đối tượng, trong đó khoá là tên chuỗi (giá trị trong cột Màu) và mỗi đối tượng mô tả định dạng của chuỗi tương ứng trong biểu đồ. Nếu không xác định được chuỗi hoặc giá trị, thì hệ thống sẽ dùng giá trị chung. Mỗi đối tượng hỗ trợ những thuộc tính sau:
series: {'Europe': {color: 'green'}} Loại: Đối tượng có các đối tượng lồng nhau
Mặc định: {}
|
Kích thước trục |
Một đối tượng có thành viên để định cấu hình cách các giá trị liên kết với kích thước bong bóng. Để 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: {minValue: 0, maxSize: 20} Loại: đối tượng
Mặc định: rỗng
|
SizeAxis.maxSize |
Bán kính tối đa của bong bóng lớn nhất có thể, tính bằng pixel. Loại: số
Mặc định: 30
|
kích thướcAxis.maxValue |
Giá trị kích thước (như xuất hiện trong dữ liệu biểu đồ) để được liên kết đến Loại: số
Mặc định: Giá trị tối đa của cột kích thước trong dữ liệu biểu đồ
|
SizeAxis.minSize |
Bán kính tối thiểu của bong bóng nhỏ nhất có thể, tính bằng pixel. Loại: số
Mặc định: 5
|
kích thướcAxis.minValue |
Giá trị kích thước (như xuất hiện trong dữ liệu biểu đồ) để được liên kết đến Loại: số
Mặc định: Giá trị tối thiểu của cột kích thước trong dữ liệu biểu đồ
|
sắp xếp bong bóng theo kích thước |
Nếu đúng, hãy sắp xếp các bong bóng theo kích thước để bong bóng nhỏ hơn xuất hiện phía trên bong bóng lớn hơn. Nếu sai, bong bóng trò chuyện sẽ được sắp xếp theo thứ tự trong DataTable. Loại: Boolean
Mặc định: true
|
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:
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ợ:
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> }
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ụ.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ụ.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> }
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ị:
Loại: chuỗi
Mặc định: "tiêu điểm"
|
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 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ụ: 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 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ụ:
Đị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 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 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.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
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> }
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
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 Ví dụ:
Loại: Mảng phần tử
Mặc định: tự động
|
Tiêu đề vAxis. |
Thuộc tính 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> }
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.
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.
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ợ:
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 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 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 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ó 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 đồ
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):
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ề:
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 Ví dụ: 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à bong bó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.
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 Ví dụ: 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 Ví dụ: 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 Ví dụ: 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 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
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 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à bong bóng.
Đối với biểu đồ này, mỗi lần bạn chỉ có thể chọn một thực thể.
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. Bong bóng tương ứng với một hàng trong bảng dữ liệu (chỉ mục cột rỗ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. Bong bóng tương ứng với một hàng trong bảng dữ liệu (chỉ mục cột rỗ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 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
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.