Tổng quan
Biểu đồ dạng đường hiển thị trong trình duyệt bằng cách sử dụng SVG hoặc VML. Hiện chú thích khi di chuột lên các điểm.
Ví dụ
Đi theo các đường kẻ
Bạn có thể làm mịn các đường bằng cách đặt tuỳ chọn curveType
thành function
:
Mã để tạo biểu đồ này như sau. Lưu ý cách sử dụng tuỳ chọn curveType: function
:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } </script> </head> <body> <div id="curve_chart" style="width: 900px; height: 500px"></div> </body> </html>
Tạo biểu đồ đường Material
Năm 2014, Google công bố các nguyên tắc nhằm hỗ trợ giao diện phổ biến trên các thuộc tính và ứng dụng của Google (chẳng hạn như ứng dụng Android) chạy trên các nền tảng của Google. Chúng tôi gọi nỗ lực này là Material Design. Chúng tôi sẽ cung cấp phiên bản "Material" của tất cả các biểu đồ cốt lõi. Bạn có thể dùng các biểu đồ này nếu muốn.
Việc tạo Biểu đồ dạng đường Material tương tự như việc tạo Biểu đồ dạng đường mà giờ đây chúng ta gọi là "Cổ điển".
Bạn tải API GoogleVisual (mặc dù với gói 'line'
thay vì gói 'corechart'
), hãy xác định bảng dữ liệu của bạn, sau đó tạo một đối tượng (nhưng là lớp google.charts.Line
thay vì google.visualization.LineChart
).
Lưu ý: Biểu đồ Material sẽ không hoạt động trong các phiên bản cũ của Internet Explorer. (Các phiên bản IE8 trở xuống không hỗ trợ SVG là biểu đồ Material đòi hỏi phải có.)
Biểu đồ dạng đường Material có nhiều điểm cải tiến nhỏ so với Biểu đồ dạng đường cổ điển, bao gồm bảng màu được cải thiện, góc 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, đường lưới mềm hơn và tiêu đề (và bổ sung phụ đề).
google.charts.load('current', {'packages':['line']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Day'); data.addColumn('number', 'Guardians of the Galaxy'); data.addColumn('number', 'The Avengers'); data.addColumn('number', 'Transformers: Age of Extinction'); data.addRows([ [1, 37.8, 80.8, 41.8], [2, 30.9, 69.5, 32.4], [3, 25.4, 57, 25.7], [4, 11.7, 18.8, 10.5], [5, 11.9, 17.6, 10.4], [6, 8.8, 13.6, 7.7], [7, 7.6, 12.3, 9.6], [8, 12.3, 29.2, 10.6], [9, 16.9, 42.9, 14.8], [10, 12.8, 30.9, 11.6], [11, 5.3, 7.9, 4.7], [12, 6.6, 8.4, 5.2], [13, 4.8, 6.3, 3.6], [14, 4.2, 6.2, 3.4] ]); var options = { chart: { title: 'Box Office Earnings in First Two Weeks of Opening', subtitle: 'in millions of dollars (USD)' }, width: 900, height: 500 }; var chart = new google.charts.Line(document.getElementById('linechart_material')); chart.draw(data, google.charts.Line.convertOptions(options)); }
Biểu đồ Material đang trong giai đoạn beta. Hình thức và khả năng tương tác nhìn chung là hoàn chỉnh, nhưng nhiều lựa chọn trong Biểu đồ cổ điển hiện chưa có. Bạn có thể tìm thấy danh sách những lựa chọn chưa được hỗ trợ trong vấn đề này.
Ngoài ra, cách khai báo các tuỳ chọn chưa hoàn tất. Vì vậy, nếu đang sử dụng bất kỳ tuỳ chọn cũ nào, bạn phải chuyển đổi các tuỳ chọn đó thành tuỳ chọn Material bằng cách thay thế dòng này:
chart.draw(data, options);
...bằng cách sau:
chart.draw(data, google.charts.Line.convertOptions(options));
Biểu đồ kép-Y
Đôi khi, bạn muốn hiển thị hai chuỗi dữ liệu trong một biểu đồ dạng đường, với hai trục y độc lập: trục trái của một chuỗi dữ liệu và trục phải của chuỗi dữ liệu khác:
Xin lưu ý rằng hai trục y của chúng tôi không chỉ được gắn nhãn khác nhau ("Nhiệt độ" so với "Ban ngày") mà còn có tỷ lệ và đường lưới độc lập riêng. Nếu bạn muốn tuỳ chỉnh hành vi này, hãy sử dụng các tuỳ chọn vAxis.gridlines
và vAxis.viewWindow
.
Trong mã Material bên dưới, các tuỳ chọn axes
và series
cùng chỉ định hình thức xuất hiện kép Y của biểu đồ. Tuỳ chọn series
chỉ định trục nào cần sử dụng cho mỗi trục ('Temps'
và 'Daylight'
; chúng không cần có bất kỳ mối liên quan nào đến tên cột trong bảng dữ liệu). Sau đó, tuỳ chọn axes
sẽ biến biểu đồ này thành biểu đồ Y kép, đặt trục 'Temps'
ở bên trái và trục 'Daylight'
ở bên phải.
Trong mã Classic, điều này hơi khác. Thay vì tuỳ chọn axes
, bạn sẽ sử dụng tuỳ chọn vAxes
(hoặc hAxes
trên các biểu đồ theo chiều ngang). Ngoài ra, thay vì sử dụng tên, bạn sẽ dùng các số chỉ mục để điều phối một chuỗi với một trục bằng cách sử dụng tuỳ chọn targetAxisIndex
.
var materialOptions = { chart: { title: 'Average Temperatures and Daylight in Iceland Throughout the Year' }, width: 900, height: 500, series: { // Gives each series an axis name that matches the Y-axis below. 0: {axis: 'Temps'}, 1: {axis: 'Daylight'} }, axes: { // Adds labels to each axis; they don't have to match the axis names. y: { Temps: {label: 'Temps (Celsius)'}, Daylight: {label: 'Daylight'} } } };
var classicOptions = { title: 'Average Temperatures and Daylight in Iceland Throughout the Year', width: 900, height: 500, // Gives each series an axis that matches the vAxes number below. series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, vAxes: { // Adds titles to each axis. 0: {title: 'Temps (Celsius)'}, 1: {title: 'Daylight'} }, hAxis: { ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3), new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7), new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11) ] }, vAxis: { viewWindow: { max: 30 } } };
Bảng xếp hạng
Lưu ý: Trục Top-X chỉ áp dụng cho biểu đồ Material (tức là những biểu đồ có gói line
).
Nếu muốn đặt tiêu đề và nhãn trục X lên đầu thay vì cuối biểu đồ, bạn có thể thực hiện việc đó trong biểu đồ Material bằng tuỳ chọn axes.x
:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['line']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'Day'); data.addColumn('number', 'Guardians of the Galaxy'); data.addColumn('number', 'The Avengers'); data.addColumn('number', 'Transformers: Age of Extinction'); data.addRows([ [1, 37.8, 80.8, 41.8], [2, 30.9, 69.5, 32.4], [3, 25.4, 57, 25.7], [4, 11.7, 18.8, 10.5], [5, 11.9, 17.6, 10.4], [6, 8.8, 13.6, 7.7], [7, 7.6, 12.3, 9.6], [8, 12.3, 29.2, 10.6], [9, 16.9, 42.9, 14.8], [10, 12.8, 30.9, 11.6], [11, 5.3, 7.9, 4.7], [12, 6.6, 8.4, 5.2], [13, 4.8, 6.3, 3.6], [14, 4.2, 6.2, 3.4] ]); var options = { chart: { title: 'Box Office Earnings in First Two Weeks of Opening', subtitle: 'in millions of dollars (USD)' }, width: 900, height: 500, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Line(document.getElementById('line_top_x')); chart.draw(data, google.charts.Line.convertOptions(options)); } </script> </head> <body> <div id="line_top_x"></div> </body> </html>
Đang tải
Tên gói google.charts.load
là "corechart"
và tên lớp của hình ảnh trực quan là google.visualization.LineChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.LineChart(container);
Đối với Biểu đồ đường Material, tên gói google.charts.load
là "line"
và tên lớp của hình ảnh trực quan là google.charts.Line
.
google.charts.load("current", {packages: ["line"]});
var visualization = new google.charts.Line(container);
Định dạng dữ liệu
Hàng: Mỗi hàng trong bảng đại diện cho một tập hợp các điểm dữ liệu có cùng vị trí trục x.
Cột:
Cột 0 | Cột 1 | ... | Cột N | |
---|---|---|---|---|
Mục đích: | Giá trị dòng 1 | ... | Giá trị dòng N | |
Loại dữ liệu: | number | ... | number | |
Vai trò: | tên miền | data | ... | data |
Các vai trò không bắt buộc trong cột: | ... |
Các lựa chọn cấu hình
Tên | |
---|---|
aggregationTarget |
Cách hệ thống tổng hợp nhiều lựa chọn dữ liệu vào chú thích:
aggregationTarget thường được dùng song song với selectionMode và tooltip.trigger , ví dụ:
var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; Loại: chuỗi
Mặc định: "tự động"
|
animation.duration |
Thời lượng của ảnh động, tính bằng mili giây. Để biết thông tin chi tiết, hãy xem tài liệu về ảnh động. Loại: số
Mặc định: 0
|
animation.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à Loại: boolean
Mặc định là false
|
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:
Loại: chuỗi
Mặc định: "tuyến tính"
|
annotations.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 } } } }; Tùy chọn này hiện được hỗ trợ cho biểu đồ vùng, biểu đồ thanh, cột, kết hợp, biểu đồ dạng đường và biểu đồ tán xạ. Biểu đồ này không hỗ trợ biểu đồ này trong Biểu đồ chú giải. Loại: đối tượng
Mặc định: rỗng
|
annotations.datum |
Đối với các biểu đồ hỗ trợ chú thích, đối tượng
annotations.datum cho phép bạn ghi đè lựa chọn của Google Biểu đồ đối với những chú giải được cung cấp cho từng phần tử dữ liệu (chẳng hạn như các giá trị được hiển thị cùng với mỗi thanh trên biểu đồ thanh). Bạn có thể điều chỉnh màu sắc bằng annotations.datum.stem.color , chiều dài thân bằng annotations.datum.stem.length và kiểu bằng annotations.datum.style .
Loại: đối tượng
Mặc định: màu là "đen"; chiều dài là 12; kiểu là "điểm".
|
annotations.domain |
Đối với các biểu đồ hỗ trợ chú thích, đối tượng
annotations.domain cho phép bạn ghi đè lựa chọn của Google Biểu đồ cho các chú thích được cung cấp cho một miền (trục chính của biểu đồ, chẳng hạn như trục X trên biểu đồ dạng đường thông thường). Bạn có thể điều chỉnh màu sắc bằng annotations.domain.stem.color , chiều dài thân bằng annotations.domain.stem.length và kiểu bằng annotations.domain.style .
Loại: đối tượng
Mặc định: màu là "đen"; chiều dài là 5; kiểu là "điểm".
|
annotations.highContrast |
Đối với các biểu đồ hỗ trợ chú thích, boolean
annotations.highContrast cho phép bạn ghi đè lựa chọn màu chú thích của Google Biểu đồ. Theo mặc định, annotations.highContrast là giá trị true, khiến Biểu đồ chọn màu chú thích có độ tương phản tốt: màu sáng trên nền tối và màu tối trên nền sáng. Nếu bạn đặt annotations.highContrast thành false và không chỉ định màu chú thích của riêng mình, Google Biểu đồ sẽ sử dụng màu chuỗi mặc định cho chú thích:
Loại: boolean
Mặc định: true
|
annotations.stem |
Đối với các biểu đồ hỗ trợ
chú thích,
đối tượng
annotations.stem cho phép bạn ghi đè
lựa chọn của Google Biểu đồ cho kiểu gốc. Bạn có thể điều chỉnh màu sắc bằng annotations.stem.color và độ dài thân bằng annotations.stem.length . Xin lưu ý rằng tuỳ chọn độ dài gốc không ảnh hưởng đến các chú giải có kiểu 'line' : đối với chú giải mốc 'line' , độ dài gốc luôn bằng văn bản và đối với chú thích miền 'line' , gốc sẽ mở rộng trên toàn bộ biểu đồ.
Loại: đối tượng
Mặc định: màu là "đen"; độ dài là 5 đối với chú thích miền và 12 đối với chú thích mốc đo lường.
|
annotations.style |
Đối với các biểu đồ hỗ trợ
chú thích,
tuỳ chọn
annotations.style cho phép bạn ghi đè
lựa chọn loại chú thích của Google Biểu đồ. Trạng thái đó có thể là 'line' hoặc 'point' .
Loại: chuỗi
Mặc định: "point"
|
annotations.textStyle |
Đối với các biểu đồ hỗ trợ chú thích, đối tượng
annotations.textStyle sẽ kiểm soát hình thức hiển thị văn bản của chú thích đó:
var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; Tùy chọn này hiện được hỗ trợ cho biểu đồ vùng, biểu đồ thanh, cột, kết hợp, biểu đồ dạng đường và biểu đồ tán xạ. Biểu đồ chú thích không hỗ trợ biểu đồ này Biểu đồ chú thích . Loại: đối tượng
Mặc định: rỗng
|
axisTitlesPosition |
Vị trí đặt tiêu đề trục, so với vùng biểu đồ. Các giá trị được hỗ trợ:
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ụ: 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"
|
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ụ: 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:
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ụ: Loại: Mảng chuỗi
Mặc định: màu mặc định
|
hình chữ thập |
Một đối tượng chứa các thuộc tính crosspoint của biểu đồ. Loại: đối tượng
Mặc định: rỗng
|
crosshair.color |
Màu chữ thập, được biểu thị bằng tên màu (ví dụ: "blue") hoặc giá trị RGB (ví dụ: "#adf"). Loại: chuỗi
Loại: mặc định
|
crosshair.focused |
Một đối tượng chứa các thuộc tính hình chữ thập lấy tiêu điểm. Loại: đối tượng
Mặc định: mặc định
|
crosshair.opacity |
Độ mờ hình chữ thập, với Loại: số
Mặc định: 1.0
|
crosshair.orientation |
Hướng chữ thập, có thể là "dọc" chỉ đối với tóc dọc, "ngang" chỉ với tóc ngang hoặc "cả hai" đối với kiểu chữ thập truyền thống. Loại: chuỗi
Mặc định: 'cả hai'
|
crosshair.selected |
Một đối tượng chứa các thuộc tính chữ thập khi chọn. Loại: đối tượng
Mặc định: mặc định
|
crosshair.trigger |
Thời điểm hiển thị hình chữ thập: trên Loại: chuỗi
Mặc định: 'cả hai'
|
curveType |
Kiểm soát đường cong của các đường khi độ rộng của đường khác 0. Có thể là một trong những trạng thái sau đây:
Loại:chuỗi
Mặc định: "không có"
|
dataOpacity |
Độ trong suốt của các điểm dữ liệu, với 1.0 là hoàn toàn mờ đục và 0.0 hoàn toàn trong suốt. Trong biểu đồ tán xạ, biểu đồ, biểu đồ thanh và biểu đồ cột, dữ liệu này bao gồm dữ liệu hiển thị: các dấu chấm trong biểu đồ tán xạ và hình chữ nhật trong những biểu đồ khác. Trong các biểu đồ nơi việc chọn dữ liệu tạo ra một dấu chấm, chẳng hạn như biểu đồ đường và biểu đồ vùng, đó là các vòng tròn xuất hiện khi di chuột hoặc chọn. Biểu đồ kết hợp thể hiện cả hai hành vi và tuỳ chọn này không ảnh hưởng đến các biểu đồ khác. (Để thay đổi độ mờ của một đường xu hướng, hãy xem độ mờ của đường xu hướng .) Loại: số
Mặc định: 1.0
|
enableInteractivity |
Liệu biểu đồ có gửi các sự kiện dựa trên người dùng hay phản ứng với hoạt động tương tác của người dùng hay không. Nếu đặt là false, biểu đồ sẽ không gửi "select" (đã chọn) hoặc các sự kiện dựa trên hoạt động tương tác khác (nhưng sẽ gửi các sự kiện lỗi sẵn sàng hoặc lỗi) và sẽ không hiển thị văn bản di chuột hay thay đổi tuỳ thuộc vào hoạt động đầu vào của người dùng. Loại: boolean
Mặc định: true
|
trình khám phá |
Tùy chọn Tính năng này đang ở giai đoạn thử nghiệm và có thể thay đổi trong các bản phát hành sau này. Lưu ý: Trình khám phá chỉ làm việc với các trục liên tục (chẳng hạn như số hoặc ngày). Loại: đối tượng
Mặc định: rỗng
|
explorer.actions |
Trình khám phá Google Biểu đồ hỗ trợ ba thao tác:
Loại: Mảng chuỗi
Mặc định: ['dragToPan', 'rightClickToReset']
|
explorer.axis |
Theo mặc định, người dùng có thể xoay cả chiều ngang và chiều dọc khi sử dụng tuỳ chọn Loại: chuỗi
Mặc định: cả chế độ kéo theo chiều ngang và chiều dọc
|
explorer.keepInBounds |
Theo mặc định, người dùng có thể xoay xung quanh, bất kể dữ liệu ở đâu. Để đảm bảo rằng người dùng không di chuyển ra ngoài biểu đồ ban đầu, hãy sử dụng Loại: boolean
Mặc định: false
|
explorer.maxZoomIn |
Mức tối đa mà trình khám phá có thể phóng to. Theo mặc định, người dùng sẽ có thể phóng to đủ để chỉ thấy 25% so với chế độ xem gốc. Việc đặt Loại: số
Mặc định: 0,25
|
explorer.maxZoomOut |
Mức tối đa mà trình khám phá có thể thu nhỏ. Theo mặc định, người dùng sẽ có thể thu nhỏ đủ xa để biểu đồ chỉ chiếm 1/4 không gian có sẵn. Việc thiết lập Loại: số
Mặc định: 4
|
explorer.zoomDelta |
Khi người dùng phóng to hoặc thu nhỏ, Loại: số
Mặc định: 1.5
|
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:
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.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ở 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: "đen"
|
hAxis.direction |
Hướng mà theo đó các giá trị dọc theo trục hoành sẽ phát triển. Hãy chỉ định Loại: 1 hoặc -1
Mặc định: 1
|
hAxis.format |
Chuỗi định dạng cho các nhãn số hoặc trục ngày.
Đối với các nhãn trục số, đây là một tập hợp con của định dạng thập phân
bộ mẫu ICU
. Ví dụ:
Đối với các nhãn trục ngày, đây là một tập hợp con của định dạng ngày
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 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
Tuỳ chọn này chỉ được hỗ trợ cho trục Loại: chuỗi
Mặc định: tự động
|
hAxis.gridlines |
Đối tượng có các thuộc tính để định cấu hình đường lưới trên trục hoành. Xin lưu ý rằng đường lưới trục hoành sẽ được vẽ theo chiều dọc. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu bằng chữ của đối tượng, như minh hoạ dưới đây: {color: '#333', minSpacing: 20}
Tuỳ 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ố 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 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 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à 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 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.
Tuỳ 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 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 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à 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 Loại: số
Mặc định: 1
|
hAxis.minorGridlines.units |
Ghi đè định dạng mặc định cho nhiều khía cạnh của loại dữ liệu ngày/ngày/giờ trong ngày khi được sử dụng cùng với subGridlines được tính toán trên biểu đồ. Cho phép định dạng năm, tháng, ngày, giờ, phút, giây và mili giây. Định dạng chung là: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Bạn có thể xem thêm thông tin trong Ngày và giờ. Loại: đối tượng
Mặc định: rỗng
|
hAxis.logScale |
Thuộc tính Tuỳ chọn này chỉ được hỗ trợ cho trục Loại: boolean
Mặc định: false
|
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 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> }
Loại: đối tượng
Mặc định:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.ticks |
Thay thế các kim đánh dấu nhịp độ khung hình trên trục X được tạo tự động bằng mảng được chỉ định. Mỗi phần tử của mảng phải là một giá trị đánh dấu nhịp độ khung hình hợp lệ (chẳng hạn như số, ngày, ngày giờ hoặc thời gian trong ngày) hoặc một đối tượng. Nếu đó là một đối tượng, đối tượng đó phải có thuộc tính
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 Ví dụ:
Tuỳ chọn này chỉ được hỗ trợ cho trục Loại: Mảng gồm các phần tử
Mặc định: tự động
|
hAxis.title |
Thuộc tí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> }
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. Tuỳ chọn này chỉ được hỗ trợ cho trục 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 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 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.maxValue |
Di chuyển giá trị tối đa của trục hoành đến giá trị được chỉ định; giá trị này sẽ sang phải trong hầu hết các biểu đồ. Sẽ bỏ qua nếu giá trị này được đặt thành một giá trị nhỏ hơn giá trị x tối đa của dữ liệu.
Tuỳ 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 đến giá trị được chỉ định; giá trị này sẽ được di chuyển sang trái trong hầu hết các biểu đồ. Sẽ bỏ qua nếu bạn đặt giá trị này thành một giá trị lớn hơn giá trị x tối thiểu của dữ liệu.
Tuỳ 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 vùng biểu đồ. Các giá trị chuỗi sau được hỗ trợ:
Tuỳ chọn này chỉ được hỗ trợ cho trục Loại: chuỗi
Mặc định: Tương đương với "pretty", nhưng
haxis.viewWindow.min và haxis.viewWindow.max sẽ được ưu tiên nếu được sử dụng.
|
hAxis.viewWindow |
Chỉ định phạm vi cắt theo trục hoành. Loại: đối tượng
Mặc định: rỗng
|
hAxis.viewWindow.max |
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
|
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 Loại: boolean
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:
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:
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> }
Loại: đối tượng
Mặc định:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
lineDashStyle |
Mẫu bật và tắt cho các đường nét đứt. Ví dụ: Loại: Mảng số
Mặc định: rỗng
|
lineWidth |
Độ rộng đường dữ liệu tính bằng pixel. Sử dụng số 0 để ẩn tất cả các dòng và chỉ hiển thị các điểm. Bạn có thể
ghi đè các giá trị cho từng chuỗi văn bản bằng cách sử dụng thuộc tính Loại: số
Mặc định: 2
|
hướng |
Hướng của biểu đồ. Khi bạn đặt thành Loại: chuỗi
Mặc định: "ngang"
|
pointShape |
Hình dạng của các phần tử dữ liệu riêng lẻ: "vòng tròn", "hình tam giác", "hình vuông", "hình thoi", "ngôi sao" hoặc "đa giác". Hãy xem tài liệu về điểm để biết ví dụ. Loại: chuỗi
Mặc định: 'vòng tròn'
|
pointSize |
Đường kính của các điểm được hiển thị tính bằng pixel. Hãy sử dụng số 0 để ẩn tất cả các điểm. Bạn có thể ghi đè các giá trị cho từng bộ sách bằng cách sử dụng thuộc tính Loại: số
Mặc định: 0
|
pointsVisible |
Xác định xem các điểm có được hiển thị hay không. Đặt thành
Bạn cũng có thể ghi đè thuộc tính này bằng cách sử dụng vai trò kiểu ở dạng Loại: boolean
Mặc định: true
|
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.
Tuỳ chọn này chỉ được hỗ trợ cho trục Loại: boolean
Mặc định: false
|
selectionMode |
Khi Loại: chuỗi
Mặc định: "đơn"
|
loạt phim |
Một mảng gồm các đối tượng, mỗi đối tượng mô tả định dạng của các chuỗi đối tượng tương ứng trong biểu đồ. Để sử dụng các giá trị mặc định cho một chuỗi dữ liệu, hãy chỉ định một đối tượng trống {}. Nếu bạn không chỉ định một chuỗi hoặc một giá trị, thì giá trị chung sẽ được sử dụng. Mỗi đối tượng hỗ trợ các thuộc tính sau:
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:
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ợ:
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> }
Loại: đối tượng
Mặc định:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
chú thích |
Một đối tượng có các thành viên để định cấu hình nhiều phần tử chú thích. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu bằng chữ đối tượng, như minh hoạ dưới đây: {textStyle: {color: '#FF0000'}, showColorCode: true} Loại: đối tượng
Mặc định: rỗng
|
tooltip.ignoreBounds |
Nếu bạn đặt thành Lưu ý: Cách này chỉ áp dụng cho chú thích HTML. Nếu bạn bật tính năng này bằng chú thích SVG, thì mọi phần tràn bên ngoài giới hạn của biểu đồ sẽ bị cắt. Hãy xem bài viết Tuỳ chỉnh nội dung chú thích để biết thêm chi tiết. Loại: boolean
Mặc định: false
|
tooltip.isHtml |
Nếu bạn đặt chính sách này thành true, hãy sử dụng chú giải công cụ được kết xuất HTML (thay vì kết xuất SVG). Hãy xem bài viết Tuỳ chỉnh nội dung chú thích để biết thêm chi tiết. Lưu ý: Tính năng tuỳ chỉnh nội dung chú thích HTML thông qua vai trò dữ liệu của cột chú giải công cụ không được hỗ trợ trong hình ảnh Biểu đồ bong bóng. Loại: boolean
Mặc định: false
|
tooltip.showColorCode |
Nếu đúng, hãy hiển thị các hình vuông được tô màu bên cạnh thông tin về bộ sách trong chú thích. Giá trị mặc định là true khi đặt 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> }
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:
Loại: chuỗi
Mặc định: "lấy nét"
|
đường xu hướng |
Hiển thị
đường xu hướng
trên biểu đồ hỗ trợ chúng. Theo mặc định, các đường xu hướng tuyến tính được sử dụng, nhưng bạn có thể tuỳ chỉnh đường xu hướng này bằng tuỳ chọn
Đường xu hướng được chỉ định theo từng chuỗi, vì vậy, các lựa chọn của bạn sẽ luôn có dạng như sau: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Loại: đối tượng
Mặc định: rỗng
|
trendlines.n.color |
Màu của đường xu hướng , được biểu thị bằng tên màu bằng tiếng Anh hoặc chuỗi hex. Loại: chuỗi
Mặc định: màu mặc định của chuỗi
|
trendlines.n.degree |
Đối với
đường xu hướng
của Loại: số
Mặc định: 3
|
trendlines.n.labelInLegend |
Nếu được đặt, đường xu hướng sẽ xuất hiện trong phần chú thích dưới dạng chuỗi này. Loại: chuỗi
Mặc định: rỗng
|
trendlines.n.lineWidth |
Chiều rộng đường của đường xu hướng , tính bằng pixel. Loại: số
Mặc định: 2
|
trendlines.n.opacity |
Độ trong suốt của đường xu hướng , từ 0 (trong suốt) đến 1 (không rõ ràng). Loại: số
Mặc định: 1.0
|
trendlines.n.pointSize |
Đường xu hướng
được tạo bằng cách đánh dấu một loạt dấu chấm trên biểu đồ; lựa chọn hiếm khi cần thiết này cho phép bạn
tuỳ chỉnh kích thước của các dấu chấm. Lựa chọn Loại: số
Mặc định: 1
|
trendlines.n.pointsVisible |
Đường xu hướng
được tạo bằng cách đánh dấu một loạt dấu chấm trên biểu đồ. Tuỳ chọn Loại: boolean
Mặc định: true
|
trendlines.n.showR2 |
Hiển thị hệ số xác định trong phần chú thích hay chú thích về đường xu hướng. Loại: boolean
Mặc định: false
|
trendlines.n.type |
Liệu
đường xu hướng
là Loại: chuỗi
Mặc định: tuyến tính
|
trendlines.n.visibleInLegend |
Liệu đường xu hướng có xuất hiện trong phần chú thích hay không. (Giá trị này sẽ xuất hiện trong chú giải công cụ về đường xu hướng.) Loại: boolean
Mặc định: false
|
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
Để 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: { 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 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 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: "đ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 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ụ:
Đị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 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 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 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à 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 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à 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 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
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 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> }
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
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 Ví dụ:
Loại: Mảng gồm các phần tử
Mặc định: tự động
|
vAxis.title |
Thuộc tính 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> }
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.
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.
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ợ:
Loại: chuỗi
Mặc định: Tương đương với "pretty", nhưng
vaxis.viewWindow.min và vaxis.viewWindow.max sẽ được ưu tiên nếu được sử dụng.
|
vAxis.viewWindow |
Chỉ định phạm vi cắt theo trục tung. Loại: đối tượng
Mặc định: rỗng
|
vAxis.viewWindow.max |
Giá trị dữ liệu ngành dọc tối đa cần hiển thị. Bỏ qua khi 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 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
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 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 đồ
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):
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ề:
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 Ví dụ: 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à điểm, chú thích, mục nhập chú giải và danh mục.
Một điểm hoặc chú giải tương ứng với một ô trong bảng dữ liệu, một mục chú giải cho một cột (chỉ mục hàng rỗng) và một danh mục cho một hàng (chỉ mục cột là rỗng).
Đối với biểu đồ này, bạn chỉ có thể chọn một thực thể tại một thời điểm bất kỳ.
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 Ví dụ: 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 Ví dụ: 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 Ví dụ: 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 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
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 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à điểm, chú thích, mục nhập chú giải và danh mục.
Một điểm hoặc chú giải tương ứng với một ô trong bảng dữ liệu, một mục chú giải cho một cột (chỉ mục hàng rỗng) và một danh mục cho một hàng (chỉ mục cột là 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 trả lại: không có
|
clearChart() |
Xoá biểu đồ và giải phóng tất cả tài nguyên đã phân bổ của biểu đồ đó. Loại trả lại: không có
|
Sự kiện
Để biết thêm thông tin về cách sử dụng những sự kiện này, hãy xem bài viết Tương tác cơ bản, Xử lý sự kiện và Sự kiện kích hoạt.
Tên | |
---|---|
animationfinish |
Được kích hoạt khi ảnh động chuyển đổi hoàn tất. Thuộc tính: không có
|
click |
Được kích hoạt khi người dùng nhấp vào bên trong biểu đồ. Thông tin này có thể được dùng để xác định thời điểm người dùng nhấp vào tiêu đề, phần tử dữ liệu, mục chú giải, trục, đường lưới hoặc nhãn. Tài sản: targetID
|
error |
Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ. Thuộc tính: mã nhận dạng, thông báo
|
legendpagination |
Được kích hoạt khi người dùng nhấp vào mũi tên phân trang của chú giải. Trả về chỉ mục trang hiện tại từ 0 của chú giải và tổng số trang. Tài sản: currentPageIndex, totalPages
|
onmouseover |
Được kích hoạt khi người dùng di chuột qua một thực thể hình ảnh. Trả về các chỉ mục hàng và cột của phần tử tương ứng trong bảng dữ liệu. Tài sản: hàng, cột
|
onmouseout |
Được kích hoạt khi người dùng di chuột ra khỏi một thực thể trực quan. Trả về các chỉ mục hàng và cột của phần tử tương ứng trong bảng dữ liệu. Tài sản: hàng, cột
|
ready |
Biểu đồ này đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức 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
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.