Tổng quan
Biểu đồ cột là biểu đồ thanh dọc hiển thị trong trình duyệt bằng cách sử dụng SVG hoặc VML, tùy theo điều kiện nào phù hợp với trình duyệt của người dùng. Giống như tất cả biểu đồ Google, biểu đồ cột hiển thị chú giải công cụ khi người dùng di chuột qua dữ liệu. Để xem phiên bản theo chiều ngang của biểu đồ này, hãy xem biểu đồ thanh.
Ví dụ
Cột màu
Hãy vẽ biểu đồ mật độ của 4 kim loại quý:
Ở trên, tất cả các màu đều là màu xanh dương mặc định. Lý do là tất cả các tập phim này đều thuộc cùng một chương trình dài tập; nếu có một chương trình dài tập thứ hai, các chương trình đó sẽ có màu đỏ. Chúng ta có thể tuỳ chỉnh các màu này bằng vai trò định kiểu:
Có ba cách để chọn màu, và bảng dữ liệu của chúng tôi trình bày tất cả các màu đó: giá trị RGB, tên màu bằng tiếng Anh và khai báo giống CSS:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }], ['Copper', 8.94, '#b87333'], // RGB value ['Silver', 10.49, 'silver'], // English color name ['Gold', 19.30, 'gold'], ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration ]);
Kiểu cột
Vai trò kiểu cho phép bạn kiểm soát một số khía cạnh của giao diện cột bằng các khai báo giống CSS:
color
opacity
fill-color
fill-opacity
stroke-color
stroke-opacity
stroke-width
Bạn không nên kết hợp các kiểu quá mức bên trong một biểu đồ – hãy chọn một kiểu và giữ nguyên kiểu trình bày đó. Tuy nhiên, để minh hoạ tất cả các thuộc tính kiểu, hãy tham khảo một mẫu sau đây:
Hai cột đầu tiên đều sử dụng một color
cụ thể (cột đầu tiên có tên tiếng Anh, cột thứ hai có giá trị RGB). Không có opacity
nào được chọn, vì vậy, giá trị mặc định là 1.0 (mờ hoàn toàn) được sử dụng; đó là lý do cột thứ hai che khuất đường lưới phía sau. Trong cột thứ ba, opacity
0,2 được sử dụng, hiển thị đường lưới. Trong ví dụ thứ tư, ba thuộc tính kiểu được dùng: stroke-color
và stroke-width
để vẽ đường viền, và fill-color
để chỉ định màu của hình chữ nhật trong đó. Cột ngoài cùng bên phải
sử dụng stroke-opacity
và fill-opacity
để
chọn độ mờ cho đường viền và lấp đầy:
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Visitations', { role: 'style' } ], ['2010', 10, 'color: gray'], ['2020', 14, 'color: #76A7FA'], ['2030', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] ]);
Gắn nhãn cột
Có một số loại nhãn, chẳng hạn như nhãn đánh dấu, nhãn chú giải, và nhãn trong chú giải công cụ. Trong phần này, chúng ta sẽ xem cách đặt nhãn bên trong (hoặc gần) các cột trong biểu đồ cột.
Giả sử chúng tôi muốn chú thích từng cột bằng ký hiệu hoá học thích hợp. Chúng ta có thể làm việc đó bằng vai trò chú giải:
Trong bảng dữ liệu, chúng ta xác định một cột mới có { role:
'annotation' }
để giữ nhãn cột:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ], ['Copper', 8.94, '#b87333', 'Cu' ], ['Silver', 10.49, 'silver', 'Ag' ], ['Gold', 19.30, 'gold', 'Au' ], ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ] ]);
Trong khi người dùng có thể di chuột qua các cột để xem giá trị dữ liệu, bạn có thể muốn đưa các giá trị đó vào chính các cột đó:
Cách này phức tạp hơn một chút vì chúng tôi sẽ tạo một DataView
để chỉ định chú thích cho mỗi cột.
<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([ ["Element", "Density", { role: "style" } ], ["Copper", 8.94, "#b87333"], ["Silver", 10.49, "silver"], ["Gold", 19.30, "gold"], ["Platinum", 21.45, "color: #e5e4e2"] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, bar: {groupWidth: "95%"}, legend: { position: "none" }, }; var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); chart.draw(view, options); } </script> <div id="columnchart_values" style="width: 900px; height: 300px;"></div>
Nếu muốn định dạng giá trị theo cách khác, chúng ta có thể xác định một trình định dạng và gói giá trị đó trong một hàm như sau:
function getValueAt(column, dataTable, row) { return dataTable.getFormattedValue(row, column); }
Sau đó, chúng ta có thể gọi bằng calc: getValueAt.bind(undefined, 1)
.
Nếu nhãn quá lớn không thể vừa toàn bộ bên trong cột, nhãn sẽ hiển thị bên ngoài:
Biểu đồ cột xếp chồng
Biểu đồ cột xếp chồng là biểu đồ cột đặt các giá trị liên quan ở phía trên nhau. Nếu có bất kỳ giá trị âm nào, các giá trị đó được xếp chồng theo thứ tự đảo ngược bên dưới đường cơ sở của biểu đồ. Chỉ số này thường được dùng khi một danh mục tự nhiên được chia thành các thành phần. Ví dụ: hãy xem xét một số doanh số bán sách giả định, chia theo thể loại và so sánh theo thời gian:
Bạn tạo một biểu đồ cột xếp chồng bằng cách đặt tuỳ chọn isStacked
thành true
:
var data = google.visualization.arrayToDataTable([ ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ], ['2010', 10, 24, 20, 32, 18, 5, ''], ['2020', 16, 22, 23, 30, 16, 9, ''], ['2030', 28, 19, 29, 30, 12, 13, ''] ]); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '75%' }, isStacked: true, };
Biểu đồ cột xếp chồng cũng hỗ trợ xếp chồng 100%, trong đó ngăn xếp các phần tử ở mỗi
giá trị miền được điều chỉnh theo tỷ lệ để tổng cộng lên đến 100%. Các tuỳ chọn này là isStacked: 'percent'
, định dạng mỗi giá trị theo tỷ lệ phần trăm 100% và isStacked: 'relative'
để định dạng từng giá trị dưới dạng phân số của 1. Ngoài ra còn có một tuỳ chọn isStacked: 'absolute'
có chức năng tương đương với isStacked: true
.
Lưu ý trong biểu đồ xếp chồng 100% ở bên phải, các giá trị đánh dấu nhịp độ khung hình dựa trên thang điểm tương đối
0-1 dưới dạng phân số của 1, nhưng giá trị trục được hiển thị dưới dạng phần trăm. Điều này là do việc đánh dấu trục quay theo tỷ lệ phần trăm là kết quả của việc áp dụng định dạng "#.##%" cho các giá trị tỷ lệ tương đối 0-1. Khi sử dụng isStacked: 'percent'
, hãy nhớ chỉ định mọi giá trị kim đánh dấu/Trục bằng thang điểm 0-1 tương đối.
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, vAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, vAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
Tạo biểu đồ cột Material
Năm 2014, Google công bố các nguyên tắc nhằm hỗ trợ giao diện chung trên các tài sản và ứng dụng (chẳng hạn như ứng dụng Android) chạy trên nền tảng Google. Chúng tôi gọi nỗ lực này là Material Design. Chúng tôi sẽ cung cấp phiên bản "Material" (Tài liệu) của tất cả biểu đồ cốt lõi; chúng tôi hoan nghênh bạn sử dụng các biểu đồ này nếu muốn.
Việc tạo Biểu đồ cột Material tương tự như việc tạo biểu đồ mà giờ đây chúng tôi sẽ gọi là Biểu đồ cột "Cổ điển". Bạn tải API Hình ảnh trực quan của Google (mặc dù có gói 'bar'
thay vì gói 'corechart'
), hãy xác định bảng dữ liệu rồi tạo đối tượng (nhưng lớp google.charts.Bar
thay vì google.visualization.ColumnChart
).
Vì biểu đồ thanh và biểu đồ cột về cơ bản giống nhau nhưng để định hướng, chúng tôi gọi cả hai Biểu đồ thanh Material, bất kể thanh có dọc (cổ điển, biểu đồ cột) hay ngang (biểu đồ thanh). Trong Material, điểm khác biệt duy nhất là ở tuỳ chọn bars
. Khi đặt thành 'horizontal'
, hướng sẽ giống với Biểu đồ thanh truyền thống; nếu không, các thanh sẽ theo chiều dọc.
Lưu ý: Biểu đồ Material sẽ không hoạt động trong các phiên bản cũ của Internet Explorer. (IE8 và các phiên bản trước đó không hỗ trợ SVG. Biểu đồ này yêu cầu.)
Biểu đồ cột Material có nhiều điểm cải tiến nhỏ so với Biểu đồ cột cổ điển, bao gồm bảng màu được cải thiện, góc bo tròn, định dạng nhãn rõ ràng hơn, khoảng cách mặc định chặt chẽ hơn giữa các chuỗi nội dung, đường lưới và tiêu đề mềm hơn (và cả phụ đề).
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', } }; var chart = new google.charts.Bar(document.getElementById('columnchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="columnchart_material" style="width: 800px; height: 500px;"></div> </body> </html>
Biểu đồ Material ở phiên bản beta. Giao diện và khả năng tương tác phần lớn là cuối cùng, nhưng nhiều tùy chọn có sẵn trong Biểu đồ cổ điển chưa có sẵn trong các biểu đồ đó. Bạn có thể tìm thấy danh sách các lựa chọn chưa được hỗ trợ trong vấn đề này.
Ngoài ra, cách khai báo các tuỳ chọn chưa được hoàn tất. Vì vậy, nếu đang sử dụng bất kỳ tùy chọn cũ nào, bạn phải chuyển đổi các tùy chọn Material sang bằng cách thay thế dòng này:
chart.draw(data, options);
...bằng cách này:
chart.draw(data, google.charts.Bar.convertOptions(options));
Việc sử dụng google.charts.Bar.convertOptions()
cho phép bạn tận dụng một số tính năng, chẳng hạn như các tuỳ chọn đặt trước hAxis/vAxis.format
.
Biểu đồ kép
Đôi khi, bạn sẽ muốn hiển thị hai chuỗi trong biểu đồ cột, với hai trục Y độc lập: trục trái cho một chuỗi và trục phải cho chuỗi khác:
Xin lưu ý rằng không chỉ hai trục y của chúng tôi được gắn nhãn khác nhau ("parsecs" so với "apparent parent") mà mỗi trục đều có thang đo và đường lưới độc lập riêng. Nếu bạn muốn tùy chỉnh hành vi này, hãy sử dụng tùy chọn vAxis.gridlines
.
Trong mã bên dưới, các tùy chọn axes
và series
cùng nhau chỉ định giao diện kép Y của biểu đồ. Tuỳ chọn series
chỉ định trục nào cần sử dụng cho từng ('distance'
và 'brightness'
; chúng không cần liên quan đến tên cột trong bảng dữ liệu). Sau đó, tuỳ chọn axes
sẽ biến biểu đồ này thành
biểu đồ Y-Y, đặt trục 'distance'
ở bên trái
(có nhãn "parsecs") và trục 'brightness'
ở bên phải (được gắn nhãn "apparentparent").
<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', 'bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var materialOptions = { width: 900, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { y: { distance: {label: 'parsecs'}, // Left y-axis. brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis. } } }; var classicOptions = { width: 900, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Nearby galaxies - distance on the left, brightness on the right', vAxes: { // Adds titles to each axis. 0: {title: 'parsecs'}, 1: {title: 'apparent magnitude'} } }; function drawMaterialChart() { var materialChart = new google.charts.Bar(chartDiv); materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ColumnChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); }; </script> </head> <body> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> </body> </html>
Biểu đồ hàng đầu X
Lưu ý: Các trục Top-X chỉ có trong biểu đồ Material (tức là các biểu đồ có gói bar
).
Nếu muốn đặt các nhãn và tiêu đề trục X ở đầu biểu đồ thay vì ở cuối biểu đồ, bạn có thể làm việc đó trong biểu đồ Material bằng tùy chọn axes.x
:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { width: 800, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, axes: { x: { 0: { side: 'top', label: 'White to move'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); // Convert the Classic options to Material options. chart.draw(data, google.charts.Bar.convertOptions(options)); }; </script> </head> <body> <div id="top_x_div" style="width: 800px; height: 600px;"></div> </body> </html>
Đang tải
Tên gói google.charts.load
là "corechart"
.
Tên lớp của hình ảnh trực quan là google.visualization.ColumnChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ColumnChart(container);
Đối với Biểu đồ cột Material, tên gói
google.charts.load
là "bar"
. (Không phải lỗi chính tả: Biểu đồ thanh Material xử lý cả hai hướng.)
Tên lớp của hình ảnh trực quan là google.charts.Bar
. (Không phải lỗi chính tả: Biểu đồ thanh Material xử lý cả hai hướng.)
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
Định dạng dữ liệu
Mỗi hàng trong bảng trình bày một nhóm các thanh liền kề.
Hàng: Mỗi hàng trong bảng trình bày một nhóm thanh.
Cột:
Cột 0 | Cột 1 | ... | Cột N | |
---|---|---|---|---|
Mục đích: | Các giá trị Bar 1 trong nhóm này | ... | Thanh N giá trị trong nhóm này | |
Loại dữ liệu: |
|
number | ... | number |
Vai trò: | miền | data | ... | data |
Các vai trò cột không bắt buộc: | ... |
Các lựa chọn về cấu hình
Tên | |
---|---|
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
|
Annotation.alwaysOutside |
Trong biểu đồ Thanh và Biểu đồ cột, nếu bạn đặt thành Loại: Boolean
Mặc định: sai
|
Annotation.boxStyle |
Đối với các biểu đồ hỗ trợ chú thích, đối tượng var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; Tuỳ chọn này hiện được hỗ trợ cho các biểu đồ vùng, thanh, cột, kết hợp, đường kẻ và tán xạ. Biểu đồ chú thích không hỗ trợ tính năng này. Loại: đối tượng
Mặc định: rỗng
|
annotation.datum |
Đối với các biểu đồ hỗ trợ chú thích, đối tượng
annotations.datum cho phép bạn ghi đè lựa chọn của Google Biểu đồ cho các chú thích được cung cấp cho các phần tử dữ liệu riêng lẻ (chẳng hạn như các giá trị hiển thị cùng với mỗi thanh trên biểu đồ thanh). Bạn có thể kiểm soát màu sắc bằng annotations.datum.stem.color , chiều dài thân bằng annotations.datum.stem.length và kiểu với annotations.datum.style .
Loại: đối tượng
Mặc định: màu là "đen"; độ dài là 12; kiểu là "điểm".
|
annotation.domain |
Đối với các biểu đồ hỗ trợ chú thích, đối tượng
annotations.domain cho phép bạn ghi đè lựa chọn của Biểu đồ Google cho các chú thích được cung cấp cho một miền (Trục chính của biểu đồ, chẳng hạn như trục X trên biểu đồ dạng đường điển hình). Bạn có thể kiểm soát màu sắc bằng annotations.domain.stem.color , chiều dài thân bằng annotations.domain.stem.length và kiểu với annotations.domain.style .
Loại: đối tượng
Mặc định: màu là "đen"; độ dài là 5; kiểu là "điểm".
|
Annotation.high_ cụm từ tương phản |
Đối với các biểu đồ hỗ trợ chú thích, boolean
annotations.highContrast cho phép bạn ghi đè lựa chọn của Google Biểu đồ về màu của chú thích. Theo mặc định, annotations.highContrast là đúng, khiến Biểu đồ chọn màu chú thích có độ tương phản tốt: màu sáng trên nền tối và màu tối trên ánh sáng. Nếu bạn đặt annotations.highContrast thành false và không chỉ định màu chú thích của riêng mình, Bảng xếp hạng của Google sẽ sử dụng màu mặc định cho chuỗi chú thích:
Loại: Boolean
Mặc định: true
|
annotation.stem |
Đối với các biểu đồ hỗ trợ chú thích, đối tượng
annotations.stem cho phép bạn ghi đè lựa chọn của Biểu đồ Google cho kiểu gốc. Bạn có thể kiểm soát màu sắc bằng annotations.stem.color và chiều dài thân bằng annotations.stem.length . Xin lưu ý rằng tùy chọn độ dài của nội dung gốc không ảnh hưởng đến các chú thích kiểu 'line' : đối với chú thích dữ liệu 'line' , độ dài của phần gốc luôn giống với văn bản và đối với chú thích miền 'line' , phần thân sẽ mở rộng trên toàn bộ biểu đồ.
Loại: đối tượng
Mặc định: màu là "đen"; độ dài là 5 đối với chú thích miền và 12 đối với chú thích dữ liệu.
|
annotation.style |
Đối với các biểu đồ hỗ trợ chú thích, tuỳ chọn
annotations.style sẽ cho phép bạn ghi đè lựa chọn loại chú thích của Biểu đồ Google. Đó có thể là 'line' hoặc 'point' .
Loại: chuỗi
Mặc định: "điểm"
|
annotation.textStyle |
Đối với các biểu đồ hỗ trợ chú thích, đối tượng
annotations.textStyle sẽ kiểm soát giao diện văn bản của chú thích:
var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; Tuỳ chọn này hiện được hỗ trợ cho các biểu đồ vùng, thanh, cột, kết hợp, đường kẻ và tán xạ. Biểu đồ chú thích không hỗ trợ Biểu đồ chú thích. Loại: đối tượng
Mặc định: rỗng
|
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"
|
bar.groupWidth |
Chiều rộng của một nhóm các thanh, được chỉ định ở một trong hai định dạng này:
Loại: số hoặc chuỗi
Mặc định:
Tỷ lệ vàng,
khoảng 61,8%.
|
quán bar |
Liệu các thanh trong Biểu đồ thanh Material nằm dọc hay ngang. Tuỳ chọn này không ảnh hưởng đến Biểu đồ thanh cổ điển hoặc Biểu đồ cột cổ điển. Loại: "ngang" hoặc "dọc"
Mặc định: 'ngành dọc'
|
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
|
title.subtitle |
Đối với Biểu đồ Material, tùy chọn này sẽ chỉ định phụ đề. Biểu đồ Material chỉ hỗ trợ phụ đề. Loại: chuỗi
Mặc định: rỗng
|
title.title |
Đối với Biểu đồ Material, tùy chọn này sẽ chỉ định tiêu đề. Loại: chuỗi
Mặc định: rỗ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
|
dữ liệu độ mờ |
Độ trong suốt của các điểm dữ liệu, trong đó 1.0 hoàn toàn không trong suốt và 0.0 trong suốt. Trong các biểu đồ tán xạ, biểu đồ, thanh và cột, đây là dữ liệu hiển thị: dấu chấm trong biểu đồ tán xạ và hình chữ nhật trong các biểu đồ khác. Trong các biểu đồ mà việc chọn dữ liệu sẽ tạo ra một dấu chấm, chẳng hạn như biểu đồ dạng đường và biểu đồ vùng, tức là các vòng tròn xuất hiện khi di chuột hoặc lựa chọn. Biểu đồ kết hợp thể hiện cả hai hành vi này và tùy chọn này không ảnh hưởng đến các biểu đồ khác. (Để thay đổi độ mờ của đường xu hướng, hãy xem độ mờ của đường xu hướng .) Loại: số
Mặc định: 1.0
|
bật sự tương tác |
Biểu đồ có gửi sự kiện dựa trên người dùng hay phản ứng với tương tác của người dùng không. Nếu giá trị là sai, biểu đồ sẽ không gửi "sự kiện" hoặc các sự kiện dựa trên lượt tương tác khác (nhưng sẽ gửi sự kiện sẵn sàng hoặc sự kiện lỗi) và sẽ không hiển thị văn bản di chuột hay thay đổi tuỳ thuộc vào hoạt động đầu vào của người dùng. Loại: Boolean
Mặc định: true
|
trình khám phá |
Tuỳ chọn 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
|
mục tiêu tập trung |
Loại thực thể nhận được tiêu điểm khi di chuột. Đồng thời, ảnh hưởng đến thực thể nào được chọn bằng thao tác nhấp chuột và phần tử bảng dữ liệu nào được liên kết với các sự kiện. Có thể là một trong những trạng thái sau đây:
Trong focusTarget 'category', chú giải công cụ sẽ cho thấy tất cả giá trị của danh mục. Điều này có thể hữu ích khi so sánh giá trị của các chuỗi khác nhau. Loại: chuỗi
Mặc định: "dum"
|
Kích thước phông chữ |
Kích thước phông chữ mặc định, tính bằng pixel, của tất cả văn bản trong biểu đồ. Bạn có thể ghi đè giá trị này bằng cách sử dụng các thuộc tính cho các phần tử biểu đồ cụ thể. Loại: số
Mặc định: tự động
|
phông chữ |
Phông chữ mặc định cho tất cả văn bản trong biểu đồ. Bạn có thể ghi đè giá trị này bằng cách sử dụng các thuộc tính cho các phần tử biểu đồ cụ thể. Loại: chuỗi
Mặc định: 'Arial'
|
forceIFrame |
Vẽ biểu đồ bên trong một khung cùng dòng. (Xin lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ IE8 đều được vẽ trong khung i.) Loại: Boolean
Mặc định: sai
|
trục |
Một đối tượng có thành viên để định cấu hình các phần tử trục hoành. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Loại: đối tượng
Mặc định: rỗng
|
hAxis.baseline |
Đường cơ sở cho trục hoành. Tuỳ chọn này chỉ được hỗ trợ cho trục 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ụ: Tuỳ chọn này chỉ được hỗ trợ cho trục 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 nhãn trục số hoặc trục ngày.
Đối với nhãn trục số, đây là tập hợp con của định dạng thập phân
Tập hợp mẫu ICU
. Ví dụ:
Đối với nhãn trục ngày, đây là một tập hợp con của định dạng ngày
nhóm mẫu ICU
. Ví dụ: Đị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
Tùy chọn này chỉ được hỗ trợ cho trục
Loại: chuỗi
Mặc định: tự động
|
hAxis.gridlines |
Một đối tượng có các thuộc tính để định cấu hình đường lưới trên trục hoành. Xin lưu ý rằng đường lưới trục hoành được vẽ theo chiều dọc. Để chỉ định thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: {color: '#333', minSpacing: 20}
Tùy chọn này chỉ được hỗ trợ cho trục
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.interval |
Một loạt các kích thước (dưới dạng giá trị dữ liệu, không phải pixel) giữa các đường lưới liền kề. Hiện tại, tuỳ chọn này chỉ dành cho các trục số, nhưng tương tự như các tuỳ chọn Loại: số từ 1 đến 10, không bao gồm 10.
Mặc định: đã tính toán
|
hAxis.gridlines.minDistance |
Không gian màn hình tối thiểu, tính bằng pixel, giữa các đường lưới chính hAxis.
Giá trị mặc định cho đường lưới chính là Loại: số
Mặc định: đã tính toán
|
hAxis.gridlines.multi |
Tất cả các giá trị đường lưới và kim đánh dấu phải là bội số của giá trị của tùy chọn này. Xin lưu ý rằng, không giống như khoảng thời gian, số luỹ thừa gấp 10 lần bội số của chúng ta không được xem xét.
Vì vậy, bạn có thể buộc các kim đánh dấu nhịp độ khung hình là số nguyên bằng cách chỉ định Loại: số
Mặc định: 1
|
hAxis.gridlines.units |
Ghi đè định dạng mặc định cho nhiều khía cạnh của các loại dữ liệu ngày/ngày/giờ trong ngày khi dùng chung với các đường lưới được tính toán trên biểu đồ. Cho phép định dạng theo năm, tháng, ngày, giờ, phút, giây và mili giây. Định dạng chung là: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Bạn có thể tìm thêm thông tin trong Ngày và giờ. Loại: đối tượng
Mặc định: rỗng
|
hAxis.minorGridlines |
Một đối tượng có thành viên để định cấu hình các đường lưới phụ trên trục hoành, tương tự như tùy chọn hAxis.gridlines.
Tùy chọn này chỉ được hỗ trợ cho trục
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.interval |
Tuỳ chọn smallestGridlines.interval giống như tuỳ chọn khoảng thời gian
lưới chính, nhưng khoảng thời gian được chọn sẽ luôn
là số chia đều của khoảng thời gian lưới lớn.
Khoảng thời gian mặc định cho tỷ lệ tuyến tính là Loại: số
Mặc định:1
|
hAxis.minorGridlines.minDistance |
Khoảng trống tối thiểu bắt buộc, tính bằng pixel, giữa đường lưới nhỏ liền kề và giữa đường lưới nhỏ và đường lưới chính. Giá trị mặc định là 1/2 minDistance của đường lưới chính cho tỷ lệ tuyến tính và 1/5 minDistance cho tỷ lệ nhật ký. Loại: số
Mặc định: được tính toán
|
hAxis.minorGridlines.multi |
Tương tự như đối với 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 Tuỳ chọn này chỉ được hỗ trợ cho trục Loại: Boolean
Mặc định: sai
|
hAxis.scaleType |
Thuộc tính
Tuỳ chọn này chỉ được hỗ trợ cho trục 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ụ:
Tùy chọn này chỉ được hỗ trợ cho trục
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.allowContainerBoundaryTextText địat |
Nếu giá trị là sai, sẽ ẩn các nhãn ở ngoài cùng thay vì cho phép vùng chứa biểu đồ cắt ảnh. Nếu đúng, sẽ cho phép cắt nhãn. Tuỳ chọn này chỉ được hỗ trợ cho trục Loại: Boolean
Mặc định: sai
|
hAxis.slantedText |
Nếu đúng, hãy vẽ văn bản trên trục hoành ở một góc, để giúp vừa với nhiều văn bản hơn dọc theo trục; nếu sai, hãy vẽ văn bản trục ngang thẳng đứng. Hành vi mặc định là văn bản nghiêng nếu không thể vừa với văn bản khi được vẽ thẳng. Xin lưu ý rằng tùy chọn này chỉ dùng được khi
Loại: Boolean
Mặc định: tự động
|
hAxis.slantedTextAngle |
Góc của văn bản trục hoành, nếu văn bản bị vẽ nghiêng. Bỏ qua nếu Loại: số, -90—90
Mặc định: 30
|
hAxis.maxAlternation |
Số cấp tối đa của văn bản trục hoành. Nếu nhãn văn bản trên trục quá lớn, máy chủ có thể dịch chuyển các nhãn lân cận lên hoặc xuống để khớp các nhãn với nhau gần nhau hơn. Giá trị này chỉ định số lượng cấp độ cần sử dụng nhiều nhất; máy chủ có thể sử dụng ít cấp độ hơn nếu các nhãn có thể nằm vừa vặn mà không chồng chéo nhau. Đối với ngày và giờ, giá trị mặc định là 1. Loại: số
Mặc định: 2
|
hAxis.maxTextLines |
Số dòng tối đa được phép đối với các nhãn văn bản. Nhãn có thể kéo dài nhiều dòng nếu quá dài, và theo mặc định, số dòng bị giới hạn theo chiều cao của không gian hiện có. Loại: số
Mặc định: tự động
|
hAxis.minTextDistance |
Khoảng cách ngang tối thiểu, tính bằng pixel, được phép giữa 2 nhãn văn bản liền kề. Nếu nhãn bị giãn cách quá dày hoặc quá dài, thì khoảng cách có thể giảm xuống dưới ngưỡng này và trong trường hợp này, một trong các biện pháp xóa nhãn sẽ được áp dụng (ví dụ: cắt bớt nhãn hoặc bỏ một số nhãn). Loại: số
Mặc định: Giá trị của
hAxis.textStyle.fontSize |
hAxis.showTextMọi |
Số lượng trục hoành để hiển thị, trong đó 1 có nghĩa là hiển thị mọi nhãn, 2 có nghĩa là hiển thị mọi nhãn khác, v.v. Chế độ mặc định là cố gắng hiển thị nhiều nhãn nhất có thể mà không trùng lặp. Loại: số
Mặc định: tự động
|
hAxis.maxValue |
Di chuyển giá trị tối đa của trục hoành sang giá trị được chỉ định; giá trị này sẽ nằm ngay trong hầu hết các biểu đồ. Bỏ qua nếu bạn đặt giá trị này nhỏ hơn giá trị x tối đa của dữ liệu.
Tùy chọn này chỉ được hỗ trợ cho trục
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.
Tùy chọn này chỉ được hỗ trợ cho trục
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ợ:
Tùy chọn này chỉ được hỗ trợ cho trục
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 |
Bỏ qua khi Loại: số
Mặc định: tự động
|
hAxis.viewWindow.min |
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
|
xếp chồng |
Nếu bạn đặt thành đúng, thì hệ thống sẽ xếp chồng các phần tử cho tất cả chuỗi ở mỗi giá trị miền. Lưu ý: Trong các biểu đồ Cột, Khu vực và SteppedArea, Biểu đồ của Google đảo ngược thứ tự của các mục chú giải để tương ứng hơn với việc xếp chồng các phần tử trong chuỗi (ví dụ: chuỗi 0 sẽ là mục huyền thoại ở dưới cùng). Điều này không áp dụng cho Biểu đồ thanh.
Tùy chọn Các tùy chọn cho
Để xếp chồng 100%, giá trị đã tính toán cho mỗi phần tử sẽ xuất hiện trong chú giải công cụ sau giá trị thực tế.
Trục mục tiêu sẽ mặc định chọn giá trị đánh dấu nhịp độ khung hình dựa trên thang điểm 0-1 tương đối dưới dạng phân số của 1 cho
Việc xếp chồng 100% chỉ hỗ trợ các giá trị dữ liệu thuộc loại Loại: boolean/chuỗi
Mặc định: sai
|
chú giải |
Một đối tượng có các thành viên để định cấu hình các khía cạnh khác nhau của chú giải. Để chỉ định thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Loại: đối tượng
Mặc định: rỗng
|
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"
|
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
|
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>}
|
hướng |
Hướng của biểu đồ. Khi bạn đặt thành Loại: chuỗi
Mặc định: "ngang"
|
đảo loại |
Nếu đặt là đúng, sẽ vẽ chuỗi từ phải sang trái. Tùy chọn mặc định là vẽ từ trái sang phải.
Tuỳ chọn này chỉ được hỗ trợ cho trục Loại: Boolean
Mặc định: sai
|
loạt phim |
Một mảng các đối tượng, mỗi đối tượng mô tả định dạng của chuỗi tương ứng trong biểu đồ. Để sử dụng giá trị mặc định cho một chuỗi, hãy chỉ định một đối tượng trống {}. Nếu một chuỗi hoặc một giá trị không được chỉ định, thì giá trị chung sẽ được sử dụng. Mỗi đối tượng hỗ trợ các thuộc tính sau:
Bạn có thể chỉ định một mảng đối tượng, mỗi mảng áp dụng cho chuỗi theo thứ tự nhất định hoặc bạn có thể chỉ định một đối tượng, trong đó mỗi phần tử con có một khoá số cho biết chuỗi áp dụng đối tượng đó. Ví dụ: hai nội dung khai báo sau đây giống hệt nhau và khai báo chuỗi đầu tiên là màu đen và không có trong chú giải, còn nội dung thứ tư là màu đỏ và không có trong chú giải: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Loại: Một mảng các đối tượng hoặc đối tượng có các đối tượng lồng nhau
Mặc định: {}
|
chủ đề |
Giao diện là một tập hợp các giá trị tùy chọn được xác định trước, phối hợp với nhau để đạt được hành vi hoặc hiệu ứng hình ảnh cụ thể trên biểu đồ. Hiện chỉ có một giao diện:
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ụ.ignoreBounds |
Nếu được đặt thành Lưu ý: Điều này chỉ áp dụng cho chú giải công cụ HTML. Nếu bạn bật tính năng này bằng chú giải công cụ SVG, thì mọi mục tràn ra ngoài giới hạn biểu đồ sẽ bị cắt. Hãy xem phần Tuỳ chỉnh nội dung cho chú giải công cụ để biết thêm thông tin. Loại: Boolean
Mặc định: sai
|
chú giải công cụ.isHtml |
Nếu bạn đặt chính sách này thành true, hãy sử dụng chú giải công cụ (hiển thị) HTML (thay vì hiển thị SVG). Hãy xem phần Tuỳ chỉnh nội dung cho chú giải công cụ để biết thêm thông tin. Lưu ý: tuỳ chỉnh nội dung chú giải công cụ HTML thông qua vai trò dữ liệu cột chú giải công cụ không được hỗ trợ bởi hình ảnh Biểu đồ bong bóng. Loại: Boolean
Mặc định: sai
|
chú giải công cụ.showColorCode |
Nếu đúng, hãy hiển thị các hình vuông màu bên cạnh thông tin về chuỗi trong chú giải công cụ. Giá trị mặc định là true khi Loại: Boolean
Mặc định: tự động
|
Chú giải công cụ.textStyle |
Đối tượng chỉ định kiểu văn bản của chú giải công cụ. Đối tượng có định dạng sau: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
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"
|
đường xu hướng |
Hiển thị
đường xu hướng
trên các biểu đồ hỗ trợ chúng. Theo mặc định, các đường xu hướng tuyến tính được sử dụng, nhưng bạn có thể tuỳ chỉnh đường dẫn này bằng tuỳ chọn
Các đường xu hướng được chỉ định theo từng chuỗi, do đó trong hầu hết các trường hợp, tuỳ chọn của bạn sẽ như sau: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Loại: đối tượng
Mặc định: rỗng
|
Trendylines.n.color |
Màu của đường xu hướng, thể hiện dưới dạng tên màu bằng tiếng Anh hoặc chuỗi màu hex. Loại: chuỗi
Mặc định: màu của chuỗi mặc định
|
đang thịnh hành.n.degree |
Đối với
đường xu hướng
của Loại: số
Mặc định: 3
|
Trendylines.n.labelInLegend |
Nếu được đặt, đường xu hướng sẽ xuất hiện trong chú giải dưới dạng chuỗi chú giải. Loại: chuỗi
Mặc định: rỗng
|
Trendylines.n.lineWidth |
Chiều rộng dòng của đường xu hướng, tính bằng pixel. Loại: số
Mặc định: 2
|
Trendylines.n.opacity |
Độ trong suốt của đường xu hướng, từ 0 (trong suốt) đến 1,0 (mờ). Loại: số
Mặc định: 1.0
|
Trendylines.n.pointSize |
Đường xu hướng
được tạo thành từ việc đóng dấu một loạt dấu chấm trên biểu đồ; tùy chọn hiếm khi cần thiết này cho phép bạn
tùy chỉnh kích thước của các dấu chấm. Tuỳ chọn Loại: số
Mặc định: 1
|
Trendylines.n.pointsVisible |
Đường xu hướng
được tạo nên bằng cách đóng dấu một loạt dấu chấm trên biểu đồ. Tuỳ chọn Loại: Boolean
Mặc định: true
|
đang thịnh hành.n.showR2 |
Liệu có hiển thị hệ số xác định trong chú giải chú giải hoặc chú giải xu hướng hay không. Loại: Boolean
Mặc định: sai
|
đang thịnh hành.n.type |
Liệu
đường xu hướng
là Loại: chuỗi
Mặc định: tuyến tính
|
Trendylines.n.InvisibleInLegend |
Liệu phương trình đường xu hướng có xuất hiện trong phần chú giải hay không. (Tính năng này sẽ xuất hiện trong chú giải công cụ đường xu hướng.) Loại: Boolean
Mặc định: sai
|
trục |
Chỉ định các thuộc tính cho từng trục dọc nếu biểu đồ có nhiều trục dọc.
Mỗi đối tượng con là một đối tượng
Để chỉ định một biểu đồ có nhiều trục dọc, trước tiên hãy xác định một trục mới bằng cách sử dụng { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } }
Thuộc tính này có thể là một đối tượng hoặc một mảng: đối tượng là một tập hợp các đối tượng, mỗi đối tượng có một nhãn số chỉ định trục mà đối tượng xác định – đây là định dạng được hiển thị ở trên; mảng là một mảng đối tượng, mỗi đối tượng trên một trục. Ví dụ: ký hiệu kiểu mảng sau đây giống hệt với đối tượng vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Loại: Mảng đối tượng hoặc đối tượng có các đối tượng con
Mặc định: rỗng
|
trục |
Một đối tượng có thành viên để định cấu hình nhiều thành phần trục tung. Để chỉ định thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Loại: đối tượng
Mặc định: rỗng
|
vAxis.baseline |
Thuộc tính 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.interval |
Một loạt các kích thước (dưới dạng giá trị dữ liệu, không phải pixel) giữa các đường lưới liền kề. Hiện tại, tuỳ chọn này chỉ dành cho các trục số, nhưng tương tự như các tuỳ chọn Loại: số từ 1 đến 10, không bao gồm 10.
Mặc định: đã tính toán
|
vAxis.gridlines.minDistance |
Không gian màn hình tối thiểu, tính bằng pixel, giữa các đường lưới chính hAxis.
Giá trị mặc định cho đường lưới chính là Loại: số
Mặc định: đã tính toán
|
vAxis.gridlines.multi |
Tất cả các giá trị đường lưới và kim đánh dấu phải là bội số của giá trị của tùy chọn này. Xin lưu ý rằng, không giống như khoảng thời gian, số luỹ thừa gấp 10 lần bội số của chúng ta không được xem xét.
Vì vậy, bạn có thể buộc các kim đánh dấu nhịp độ khung hình là số nguyên bằng cách chỉ định 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.interval |
Tuỳ chọn smallestGridlines.interval giống như tuỳ chọn khoảng thời gian
lưới chính, nhưng khoảng thời gian được chọn sẽ luôn
là số chia đều của khoảng thời gian lưới lớn.
Khoảng thời gian mặc định cho tỷ lệ tuyến tính là Loại: số
Mặc định:1
|
vAxis.minorGridlines.minDistance |
Khoảng trống tối thiểu bắt buộc, tính bằng pixel, giữa đường lưới nhỏ liền kề và giữa đường lưới nhỏ và đường lưới chính. Giá trị mặc định là 1/2 minDistance của đường lưới chính cho tỷ lệ tuyến tính và 1/5 minDistance cho tỷ lệ nhật ký. Loại: số
Mặc định: được tính toán
|
vAxis.minorGridlines.multi |
Tương tự như đối với 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
Tuỳ chọn này chỉ được hỗ trợ cho trục 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à thanh, mục nhập chú giải và danh mục.
Thanh tương ứng với một ô trong bảng dữ liệu, mục nhập chú giải cho một cột (chỉ mục hàng bị rỗng) và một danh mục cho một hàng (chỉ mục cột rỗng.
Đối với biểu đồ này, chỉ có thể chọn một thực thể vào bất kỳ thời điểm nào.
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à thanh, mục nhập chú giải và danh mục.
Thanh tương ứng với một ô trong bảng dữ liệu, mục nhập chú giải cho một cột (chỉ mục hàng bị rỗng) và một danh mục cho một hàng (chỉ mục cột rỗng.
Đối với biểu đồ này, mỗi lần bạn chỉ có thể chọn một thực thể.
Loại dữ liệu trả về: không có
|
clearChart() |
Xoá biểu đồ và giải phóng tất cả tài nguyên được phân bổ của biểu đồ. Loại dữ liệu trả về: không có
|
Sự kiện
Để biết thêm thông tin về cách sử dụng những sự kiện này, hãy xem bài viết Hoạt động tương tác cơ bản, Xử lý sự kiện và Sự kiện kích hoạt.
Tên | |
---|---|
animationfinish |
Được kích hoạt khi ảnh động chuyển đổi hoàn tất. Thuộc tính: không có
|
click |
Được kích hoạt khi người dùng nhấp vào bên trong biểu đồ. Có thể được dùng để xác định thời điểm người dùng nhấp vào tiêu đề, các phần tử dữ liệu, mục nhập chú giải, trục, đường lưới, hoặc nhãn. Thuộc tính: targetID
|
error |
Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ. Thuộc tính: mã nhận dạng, thông báo
|
legendpagination |
Được kích hoạt khi người dùng nhấp vào mũi tên phân trang chú giải. Trả về chỉ mục trang dựa trên 0 chú giải hiện tại và tổng số trang. Thuộc tính: currentPageIndex, totalPages
|
onmouseover |
Được kích hoạt khi người dùng di chuột qua một thực thể hình ảnh. Truyền lại các chỉ mục hàng và cột của phần tử bảng dữ liệu tương ứng. Tài sản: hàng, cột
|
onmouseout |
Được kích hoạt khi người dùng di chuột khỏi một thực thể hình ảnh. Chuyển trở lại các chỉ mục hàng và cột của phần tử bảng dữ liệu tương ứng. Tài sản: hàng, cột
|
ready |
Biểu đồ đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi bạn gọi phương thức 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 về 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.