Biểu đồ thanh của Google được hiển thị trong trình duyệt bằng SVG hoặc VML, tùy theo trình duyệt nào phù hợp với người dùng. Giống như tất cả các biểu đồ của Google, biểu đồ thanh hiển thị chú giải công cụ khi người dùng di chuột qua dữ liệu. Đối với phiên bản dọc của biểu đồ này, hãy xem biểu đồ cột
ví dụ
thanh màu
Hãy lập biểu đồ mật độ của bốn kim loại quý
Ở trên, tất cả các màu đều là màu xanh lam mặc định. Đó là bởi vì tất cả chúng đều thuộc cùng một bộ; . Chúng ta có thể tùy chỉnh các màu này bằng
Có ba cách khác nhau để chọn màu và bảng dữ liệu của chúng tôi hiển thị tất cả. Giá trị RGB, tên màu tiếng Anh và khai báo giống như 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 ]];
phong cách thanh
Cho phép bạn kiểm soát một số khía cạnh của giao diện thanh bằng các khai báo giống như CSS
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
9function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }
0function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }
1function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }
2function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }
3function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }
4function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }
5
Chúng tôi không khuyên bạn nên kết hợp các kiểu quá tự do bên trong biểu đồ—hãy chọn một kiểu và gắn bó với kiểu đó—nhưng để minh họa tất cả các thuộc tính kiểu, đây là một ví dụ mẫu
Hai thanh đầu tiên, mỗi thanh sử dụng một
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }9 cụ thể [thanh đầu tiên có tên tiếng Anh, thanh thứ hai có giá trị RGB]. Không có
function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }0 nào được chọn, vì vậy giá trị mặc định là 1. 0 [hoàn toàn mờ đục] được sử dụng; . Trong thanh thứ ba, một
function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }0 của 0. 2 được sử dụng, hiển thị đường lưới. Trong thanh thứ tư, ba thuộc tính phong cách được sử dụng.
function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }3 và
function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }5 để vẽ đường viền và
function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }1 để chỉ định màu của hình chữ nhật bên trong. Thanh ngoài cùng bên phải sử dụng thêm
function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }4 và
function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }2 để chọn độ mờ cho đường viền và tô màu
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'] ]];
thanh ghi nhãn
Biểu đồ 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 thanh trong biểu đồ thanh
Giả sử chúng ta muốn chú thích từng thanh bằng ký hiệu hóa học thích hợp. Chúng ta có thể làm điều đó với vai trò chú thích
Trong bảng dữ liệu của chúng tôi, chúng tôi xác định một cột mới với
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 };4 để giữ các nhãn thanh của chúng tôi
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' ] ]];
Mặc dù người dùng có thể di chuột qua các thanh để xem các giá trị dữ liệu, nhưng bạn có thể muốn đưa chúng vào chính các thanh đó
Điều này phức tạp hơn một chút so với mức bình thường, bởi vì chúng tôi tạo một
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 };5 để chỉ định chú thích cho mỗi thanh
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
Nếu chúng ta muốn định dạng giá trị theo cách khác, chúng ta có thể xác định a và gói nó trong một hàm như thế này
function getValueAt[column, dataTable, row] { return dataTable.getFormattedValue[row, column]; }
Sau đó, chúng ta có thể gọi nó bằng
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 };6
Nếu nhãn quá lớn để vừa hoàn toàn bên trong thanh, nhãn sẽ hiển thị bên ngoài
Biểu đồ thanh xếp chồng lên nhau
Biểu đồ thanh xếp chồng là biểu đồ thanh đặt các giá trị có liên quan lên nhau. Nếu có bất kỳ giá trị âm nào, chúng sẽ được xếp chồng lên nhau theo thứ tự ngược lại bên dưới đường cơ sở trục của biểu đồ. Biểu đồ thanh xếp chồng lên nhau thường được sử dụng khi một danh mục được chia thành các thành phần một cách tự nhiên. Chẳng hạn, hãy xem xét một số doanh số bán sách giả định, được chia theo thể loại và so sánh theo thời gian
Bạn tạo biểu đồ thanh xếp chồng lên nhau bằng cách đặt tùy chọn
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 };7 thành
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 };8
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 đồ thanh xếp chồng cũng hỗ trợ xếp chồng 100%, trong đó các ngăn xếp phần tử ở mỗi giá trị miền được thay đổi tỷ lệ sao cho chúng cộng lại tới 100%. Các tùy chọn cho điều này là
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 };9, định dạng từng giá trị theo tỷ lệ phần trăm của 100% và
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };0, đị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 tùy chọn
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };1, có chức năng tương đương với
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };2
Lưu ý trong biểu đồ xếp chồng 100% ở bên phải, các giá trị đánh dấu dựa trên tỷ lệ 0-1 tương đối dưới dạng phân số của 1, nhưng các giá trị trục được hiển thị dưới dạng phần trăm. Điều này là do dấu kiểm trục phần trăm là kết quả của việc áp dụng định dạng "#. ##%" thành các giá trị tỷ lệ 0-1 tương đối. Khi sử dụng
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 };9, hãy đảm bảo chỉ định bất kỳ dấu tích nào bằng thang tỷ lệ 0-1 tương đối
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
Tạo biểu đồ thanh Vật liệu
Vào 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 thuộc tính và ứng dụng của mình [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à Thiết kế Vật liệu. Chúng tôi sẽ cung cấp các phiên bản "Vật liệu" của tất cả các biểu đồ cốt lõi của chúng tôi;
Tạo Biểu đồ thanh Vật liệu tương tự như tạo cái mà bây giờ chúng ta gọi là Biểu đồ thanh "Cổ điển". Bạn tải Google Visualization API [mặc dù với gói
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };4 thay vì gói
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };5], xác định bảng dữ liệu của bạn, sau đó tạo một đối tượng [nhưng thuộc lớp
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };6 thay vì
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };7]
Ghi chú. Biểu đồ Vật liệu 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 cũ hơn không hỗ trợ SVG, mà Biểu đồ Vật liệu yêu cầu. ]
Biểu đồ thanh Vật liệu có nhiều cải tiến nhỏ so với Biểu đồ thanh cổ điển, bao gồm bảng màu được cải thiện, các góc được làm 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 và tiêu đề mềm hơn [và bổ sung phụ đề]
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', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar[document.getElementById['barchart_material']]; chart.draw[data, google.charts.Bar.convertOptions[options]]; }
The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue
Also, the way options are declared is not finalized, so if you are using any of the classic options, you must convert them to material options by replacing this line
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };8
with this
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };9
Using
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };0 allows you to take advantage of certain features, such as the
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };1 preset options
Dual-X charts
Note. Dual-X axes are available only for Material charts [i. e. , those with package
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };2]
Sometimes you'll want to display two series in a bar chart, with two independent x-axes. a top axis for one series, and a bottom axis for another
Note that not only are our two x-axes labeled differently ["parsecs" versus "apparent magnitude"] but they each have their own independent scales and gridlines. If you want to customize this behavior, use the
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };3 options
In the code below, the
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };4 and
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };5 options together specify the dual-X appearance of the chart. The
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };5 option specifies which axis to use for each [
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };7 and
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };8; they needn't have any relation to the column names in the datatable]. The
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };4 option then makes this chart a dual-X chart, placing the
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', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar[document.getElementById['barchart_material']]; chart.draw[data, google.charts.Bar.convertOptions[options]]; }0 axis on the top and the
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', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar[document.getElementById['barchart_material']]; chart.draw[data, google.charts.Bar.convertOptions[options]]; }1 axis on the bottom
google.charts.load['current', {'packages':['bar']}]; google.charts.setOnLoadCallback[drawStuff]; function drawStuff[] { var data = new 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 options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar[document.getElementById['dual_x_div']]; chart.draw[data, options]; };
Biểu đồ Top-X
Note. Top-X axes are available only for Material charts [i. e. , those with package
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };2]
If you want to put the X-axis labels and title on the top of your chart rather than the bottom, you can do that in Material charts with the
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', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar[document.getElementById['barchart_material']]; chart.draw[data, google.charts.Bar.convertOptions[options]]; }3 option
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'] ]];0
Loading
The
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', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar[document.getElementById['barchart_material']]; chart.draw[data, google.charts.Bar.convertOptions[options]]; }4 package name is
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', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar[document.getElementById['barchart_material']]; chart.draw[data, google.charts.Bar.convertOptions[options]]; }5. The visualization's class name is
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };7
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'] ]];1
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'] ]];2
For Material Bar Charts, the
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', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar[document.getElementById['barchart_material']]; chart.draw[data, google.charts.Bar.convertOptions[options]]; }4 package name is
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', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar[document.getElementById['barchart_material']]; chart.draw[data, google.charts.Bar.convertOptions[options]]; }8. The visualization's class name is
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };6
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'] ]];3
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'] ]];4
Data format
hàng. Each row in the table represents a group of bars
Columns
Column 0Column 1. Column NPurpose- Y-axis group labels []
- Y-axis values []
- string []
- number, date, datetime or
timeofday []
Configuration options
Nameanimation. durationThe duration of the animation, in milliseconds. For details, see the animation documentation
Type. number
Default. 0
animation. easingThe easing function applied to the animation. The following options are available
- 'linear' - Constant speed
- 'in' - Ease in - Start slow and speed up
- 'out' - Ease out - Start fast and slow down
- 'inAndOut' - Ease in and out - Start slow, speed up, then slow down
Type. string
Default. 'linear'
animation. startupDetermines if the chart will animate on the initial draw. If
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 };8, the chart will start at the baseline and animate to its final state
Type. boolean
Mặc định sai
chú thích. luôn luônBên ngoàiTrong biểu đồ Thanh và Cột, nếu được đặt thành
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 };8, hãy vẽ tất cả chú thích bên ngoài Thanh/Cột
Type. boolean
Mặc định. SAI
chú thích. mốc thời gianĐối với các biểu đồ hỗ trợ chú thích, đối tượng
google.charts.load['current', {'packages':['bar']}]; google.charts.setOnLoadCallback[drawStuff]; function drawStuff[] { var data = new 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 options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar[document.getElementById['dual_x_div']]; chart.draw[data, options]; };2 cho phép bạn ghi đè lựa chọn của Google Charts đối với các chú thích được cung cấp cho các thành phần dữ liệu riêng lẻ [chẳng hạn như các giá trị được hiển thị với mỗi thanh trên biểu đồ thanh]. Bạn có thể kiểm soát màu sắc bằng
google.charts.load['current', {'packages':['bar']}]; google.charts.setOnLoadCallback[drawStuff]; function drawStuff[] { var data = new 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 options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar[document.getElementById['dual_x_div']]; chart.draw[data, options]; };3, chiều dài thân bằng
google.charts.load['current', {'packages':['bar']}]; google.charts.setOnLoadCallback[drawStuff]; function drawStuff[] { var data = new 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 options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar[document.getElementById['dual_x_div']]; chart.draw[data, options]; };4 và kiểu dáng bằng
google.charts.load['current', {'packages':['bar']}]; google.charts.setOnLoadCallback[drawStuff]; function drawStuff[] { var data = new 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 options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar[document.getElementById['dual_x_div']]; chart.draw[data, options]; };5
Kiểu. sự vật
Mặc định. màu là "đen";
chú thích. lãnh địaĐối với các biểu đồ hỗ trợ chú thích, đối tượng
google.charts.load['current', {'packages':['bar']}]; google.charts.setOnLoadCallback[drawStuff]; function drawStuff[] { var data = new 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 options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar[document.getElementById['dual_x_div']]; chart.draw[data, options]; };6 cho phép bạn ghi đè lựa chọn của Google Charts đối với 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 đồ đường điển hình]. Bạn có thể kiểm soát màu sắc bằng
google.charts.load['current', {'packages':['bar']}]; google.charts.setOnLoadCallback[drawStuff]; function drawStuff[] { var data = new 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 options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar[document.getElementById['dual_x_div']]; chart.draw[data, options]; };7, chiều dài thân bằng
google.charts.load['current', {'packages':['bar']}]; google.charts.setOnLoadCallback[drawStuff]; function drawStuff[] { var data = new 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 options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar[document.getElementById['dual_x_div']]; chart.draw[data, options]; };8 và kiểu dáng bằng
google.charts.load['current', {'packages':['bar']}]; google.charts.setOnLoadCallback[drawStuff]; function drawStuff[] { var data = new 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 options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar[document.getElementById['dual_x_div']]; chart.draw[data, options]; };9
Kiểu. sự vật
Mặc định. màu là "đen";
chú thích. hộpPhong cáchĐối với các biểu đồ hỗ trợ chú thích, đối tượng
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'] ]];00 kiểm soát sự xuất hiện của các hộp xung quanh chú thích
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'] ]];5
Tùy chọn này hiện được hỗ trợ cho các biểu đồ vùng, thanh, cột, tổ hợp, đường và phân tán. Nó không được hỗ trợ bởi Annotation Chart
Kiểu. sự vật
Mặc định. vô giá trị
chú thích. độ tương phản caoĐối với các biểu đồ hỗ trợ chú thích, boolean
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'] ]];01 cho phép bạn ghi đè lựa chọn màu chú thích của Google Charts. Theo mặc định,
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'] ]];01 là true, điều này 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
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'] ]];01 thành false và không chỉ định màu chú thích của riêng mình, Google Charts sẽ sử dụng màu chuỗi mặc định cho chú thích
Type. boolean
Mặc định. ĐÚNG VẬY
chú thích. thân câyĐối với các biểu đồ hỗ trợ chú thích, đối tượng
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'] ]];04 cho phép bạn ghi đè lựa chọn của Google Charts cho kiểu gốc. Bạn có thể kiểm soát màu sắc với
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'] ]];05 và chiều dài thân cây với
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'] ]];06. Lưu ý rằng tùy chọn độ dài gốc không ảnh hưởng đến các chú thích có kiểu
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'] ]];07. đối với chú thích dữ liệu của
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'] ]];07, độ dài gốc luôn giống với văn bản và đối với chú thích tên miền
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'] ]];07, phần gốc kéo dài trên toàn bộ biểu đồ
Kiểu. sự vật
Mặc định. màu là "đen";
chú thích. phong cáchĐối với các biểu đồ hỗ trợ chú thích, tùy chọn
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'] ]];10 cho phép bạn ghi đè lựa chọn loại chú thích của Google Charts. It can be either
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'] ]];07 or
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'] ]];12
Type. string
Default. 'point'
annotations. textStyleFor charts that support annotations, the
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'] ]];13 object controls the appearance of the text of the annotation
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'] ]];6
This option is currently supported for area, bar, column, combo, line, and scatter charts. It is not supported by the Annotation Chart
Kiểu. sự vật
Mặc định. vô giá trị
axisTitlesPositionWhere to place the axis titles, compared to the chart area. Supported values
- in - Draw the axis titles inside the chart area
- out - Draw the axis titles outside the chart area
- none - Omit the axis titles
Type. string
Default. 'out'
backgroundColorThe background color for the main area of the chart. Can be either a simple HTML color string, for example.
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'] ]];14 or
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'] ]];15, or an object with the following properties
Type. string or object
Default. 'white'
backgroundColor. strokeThe color of the chart border, as an HTML color string
Type. string
Default. '#666'
backgroundColor. strokeWidthThe border width, in pixels
Type. number
Default. 0
backgroundColor. fillThe chart fill color, as an HTML color string
Type. string
Default. 'white'
bar. groupWidthThe width of a group of bars, specified in either of these formats
- Pixels [e. g. 50]
- Percentage of the available width for each group [e. g. '20%'], where '100%' means that groups have no space between them
Type. number or string
Default. Tỷ lệ vàng, xấp xỉ '61. 8%'
barsWhether the bars in a are vertical or horizontal. This option has no effect on Classic Bar Charts or Classic Column Charts
Type. 'horizontal' or 'vertical'
Default. 'vertical'
chartAreaAn object with members to configure the placement and size of the chart area [where the chart itself is drawn, excluding axis and legends]. Two formats are supported. a number, or a number followed by %. A simple number is a value in pixels; a number followed by % is a percentage. Example.
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'] ]];16
Kiểu. sự vật
Mặc định. vô giá trị
chartArea. backgroundColorChart area background color. When a string is used, it can be either a hex string [e. g. , '#fdc'] or an English color name. When an object is used, the following properties can be provided
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'] ]];
17. the color, provided as a hex string or English color namefunction 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'] ]];
18. if provided, draws a border around the chart area of the given width [and with the color offunction 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'] ]];
17]
Type. string or object
Default. 'white'
chartArea. leftHow far to draw the chart from the left border
Type. number or string
Default. auto
chartArea. topCách vẽ biểu đồ từ đường viền trên cùng bao xa
Type. number or string
Default. auto
khu vực biểu đồ. chiều rộngChiều rộng khu vực biểu đồ
Type. number or string
Default. auto
khu vực biểu đồ. chiều caoChiều cao khu vực biểu đồ
Type. number or string
Default. auto
đồ thị. phụ đềĐối với , tùy chọn này chỉ định phụ đề. Chỉ Biểu đồ vật liệu hỗ trợ phụ đề
Type. string
Mặc định. vô giá trị
đồ thị. tiêu đềĐối với , tùy chọn này chỉ định tiêu đề
Type. string
Mặc định. vô giá trị
màu sắcCác màu được sử dụng cho các thành phần biểu đồ. Ví dụ: một mảng các chuỗi, trong đó mỗi phần tử là một chuỗi màu HTML.
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'] ]];20
Kiểu. Mảng chuỗi
Mặc định. màu mặc định
dữ liệuOpacityĐộ trong suốt của các điểm dữ liệu, với 1. 0 hoàn toàn mờ đục và 0. 0 hoàn toàn minh bạch. Trong biểu đồ phân tán, biểu đồ, thanh và cột, điều này đề cập đến dữ liệu hiển thị. dấu chấm trong biểu đồ phân tán 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 đồ đường và vùng, điều này đề cập đến 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 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. ]
Type. number
Mặc định. 1. 0
kích hoạt tính tương tácWhether the chart throws user-based events or reacts to user interaction. Nếu sai, biểu đồ sẽ không đưa ra 'chọn' hoặc các sự kiện dựa trên tương tác khác [nhưng sẽ đưa ra các sự kiện sẵn sàng hoặc lỗi] và sẽ không hiển thị văn bản di chuột hoặc thay đổi khác tùy thuộc vào đầu vào của người dùng
Type. boolean
Mặc định. ĐÚNG VẬY
nhà thám hiểmTùy chọn
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'] ]];21 cho phép người dùng xoay và thu phóng các biểu đồ của Google.
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'] ]];22 cung cấp hành vi thám hiểm mặc định, cho phép người dùng xoay theo chiều ngang và chiều dọc bằng cách kéo và phóng to và thu nhỏ bằng cách cuộn
Tính năng này là thử nghiệm và có thể thay đổi trong các bản phát hành trong tương lai
Ghi chú. Explorer chỉ hoạt động với các trục liên tục [chẳng hạn như số hoặc ngày tháng]
Kiểu. sự vật
Mặc định. vô giá trị
nhà thám hiểm. hành độngTrình khám phá Google Charts hỗ trợ ba hành động
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'] ]];
23. Kéo để xoay quanh biểu đồ theo chiều ngang và chiều dọc. Để chỉ xoay dọc theo trục ngang, hãy sử dụngfunction 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'] ]];
24. Tương tự cho trục tungfunction 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'] ]];
25. Hành vi mặc định của trình khám phá là phóng to và thu nhỏ khi người dùng cuộn. Nếu sử dụngfunction 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'] ]];
26, kéo qua một khu vực hình chữ nhật sẽ phóng to khu vực đó. Chúng tôi khuyên bạn nên sử dụngfunction 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'] ]];
27 bất cứ khi nào sử dụngfunction 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'] ]];
25. Seefunction 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'] ]];
29,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'] ]];
30, andfunction 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'] ]];
31 for zoom customizationsfunction 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'] ]];
27. Nhấp chuột phải vào biểu đồ sẽ đưa biểu đồ về mức thu phóng và thu phóng ban đầu
Kiểu. Mảng chuỗi
Mặc định. ['dragToPan', 'rightClickToReset']
Theo mặc định, người dùng có thể xoay theo cả chiều ngang và chiều dọc khi sử dụng tùy chọn
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'] ]];21. Nếu bạn muốn người dùng chỉ xoay theo chiều ngang, hãy sử dụng
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'] ]];24. Tương tự,
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'] ]];35 chỉ cho phép xoay theo chiều dọc
Type. string
Mặc định. cả xoay ngang và dọc
nhà thám hiểm. keepInBoundsBy default, users can pan all around, regardless of where the data is. Để đảm bảo rằng người dùng không di chuyển ra ngoài biểu đồ gốc, hãy sử dụng
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'] ]];36
Type. boolean
Mặc định. SAI
nhà thám hiểm. phóng to tối đaMức tối đa mà nhà thám hiểm có thể phóng to. Theo mặc định, người dùng sẽ có thể phóng to đủ để họ chỉ thấy 25% chế độ xem ban đầu. Setting
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'] ]];37 would let users zoom in only far enough to see half of the original view
Type. number
Mặc định. 0. 25
explorer. thu nhỏ tối đaMức tối đa mà nhà thám hiểm 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 dung lượng có sẵn. Cài đặt
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'] ]];38 sẽ cho phép người dùng thu nhỏ đủ xa để biểu đồ chỉ chiếm 1/8 dung lượng có sẵn
Type. number
Mặc định. 4
nhà thám hiểm. zoomDeltaWhen users zoom in or out,
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'] ]];31 determines how much they zoom by. Số càng nhỏ, zoom càng mượt và chậm
Type. number
Mặc định. 1. 5
tiêu điểmTargetLoại thực thể nhận tiêu điểm khi di chuột. Cũng ảnh hưởng đến thực thể nào được chọn bằng cách 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. Can be one of the following
- 'datum' - Focus on a single data point. Correlates to a cell in the data table
- 'category' - Focus on a grouping of all data points along the major axis. Correlates to a row in the data table
In focusTarget 'category' the tooltip displays all the category values. This may be useful for comparing values of different series
Type. string
Default. 'datum'
fontSizeThe default font size, in pixels, of all text in the chart. You can override this using properties for specific chart elements
Type. number
Default. automatic
fontNameThe default font face for all text in the chart. You can override this using properties for specific chart elements
Type. string
Default. 'Arial'
buộcIFrameDraws the chart inside an inline frame. [Note that on IE8, this option is ignored; all IE8 charts are drawn in i-frames. ]
Type. boolean
Mặc định. SAI
hAxesSpecifies properties for individual horizontal axes, if the chart has multiple horizontal axes. Each child object is a
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'] ]];40 object, and can contain all the properties supported by
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'] ]];40. These property values override any global settings for the same property
To specify a chart with multiple horizontal axes, first define a new axis using
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'] ]];42, then configure the axis using
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'] ]];43. The following example assigns series 1 to the bottom axis and specifies a custom title and text style for it
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'] ]];44
This property can be either an object or an array. the object is a collection of objects, each with a numeric label that specifies the axis that it defines--this is the format shown above; the array is an array of objects, one per axis. For example, the following array-style notation is identical to the
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'] ]];40 object shown above
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'] ]];7
Type. Array of object, or object with child objects
Mặc định. vô giá trị
hAxisAn object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here
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'] ]];8
Kiểu. sự vật
Mặc định. vô giá trị
hAxis. baselineThe baseline for the horizontal axis
Type. number
Default. automatic
hAxis. baselineColorThe color of the baseline for the horizontal axis. Can be any HTML color string, for example.
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'] ]];14 or
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'] ]];15
Type. number
Default. 'black'
hAxis. directionThe direction in which the values along the horizontal axis grow. Specify
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'] ]];48 to reverse the order of the values
Type. 1 or -1
Default. 1
hAxis. formatA format string for numeric axis labels. This is a subset of the . For instance,
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'] ]];49 will display values "1,000%", "750%", and "50%" for values 10, 7. 5, and 0. 5. You can also supply any of the following
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'] ]];
50. displays numbers with no formatting [e. g. , 8000000]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'] ]];
51. displays numbers with thousands separators [e. g. , 8,000,000]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'] ]];
52. displays numbers in scientific notation [e. g. , 8e6]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'] ]];
53. displays numbers in the local currency [e. g. , $8,000,000. 00]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'] ]];
54. displays numbers as percentages [e. g. , 800,000,000%]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'] ]];
55. hiển thị số viết tắt [e. g. , 8M]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'] ]];
56. displays numbers as full words [e. g. , 8.000.000]
The actual formatting applied to the label is derived from the locale the API has been loaded with. Để biết thêm chi tiết, xem
Khi tính toán các giá trị đánh dấu và đường lưới, một số kết hợp thay thế của tất cả các tùy chọn đường lưới có liên quan sẽ được xem xét và các phương án thay thế sẽ bị từ chối nếu các nhãn đánh dấu được định dạng sẽ bị trùng lặp hoặc chồng lên nhau. So you can specify
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'] ]];57 if you want to only show integer tick values, but be aware that if no alternative satisfies this condition, no gridlines or ticks will be shown
Type. string
Default. auto
trục h. đường lướiMột đối tượng có thuộc tính để định cấu hình đường lưới trên trục ngang. Lưu ý rằng các đường lưới trục ngang đượ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 chữ đối tượng, như được hiển thị ở đâ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'] ]];9
Kiểu. sự vật
Mặc định. vô giá trị
trục h. đường lưới. màu sắcMàu của các đường lưới ngang bên trong khu vực biểu đồ. Chỉ định một chuỗi màu HTML hợp lệ
Type. string
Mặc định. '#CCC'
trục h. đường lưới. đếmSố gần đúng của đường lưới ngang bên trong khu vực biểu đồ. Nếu bạn chỉ định một số dương cho
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'] ]];58, nó sẽ được sử dụng để tính toán
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'] ]];59 giữa các đường lưới. Bạn có thể chỉ định giá trị
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'] ]];60 để chỉ vẽ một đường lưới hoặc
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'] ]];61 để không vẽ đường lưới. Chỉ định -1, là giá trị mặc định, để tự động tính toán số lượng đường lưới dựa trên các tùy chọn khác
Type. number
Default. -1
hAxis. đường lưới. các đơn vịGhi đè định dạng mặc định cho các khía cạnh khác nhau của kiểu dữ liệu ngày/ngày giờ/thời gian trong ngày khi được sử dụng với các đườ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à
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' ] ]];0
Thông tin bổ sung có thể được tìm thấy trong
Kiểu. sự vật
Mặc định. vô giá trị
trục h. đường lưới nhỏMột đối tượng có các thành viên để định cấu hình các đường lưới phụ trên trục ngang, tương tự như hAxis. tùy chọn đường lưới
Kiểu. sự vật
Mặc định. vô giá trị
trục h. đường lưới nhỏ. colorMàu của các đường lưới phụ nằm ngang bên trong khu vực biểu đồ. Chỉ định một chuỗi màu HTML hợp lệ
Type. string
Mặc định. Sự pha trộn giữa đường lưới và màu nền
trục h. đường lưới nhỏ. đếmTùy chọn
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'] ]];62 hầu như 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ố đếm thành 0. Số lượng đường lưới phụ hiện phụ thuộc hoàn toàn vào khoảng cách giữa các đường lưới chính [xem
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'] ]];63] và khoảng trống tối thiểu cần thiết [xem
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'] ]];64]
Type. number
Mặc định. 1
trục h. đường lưới nhỏ. các đơn vịGhi đè định dạng mặc định cho các khía cạnh khác nhau của kiểu dữ liệu ngày/ngày giờ/thời gian trong ngày khi được sử dụng với các đường lưới phụ đượ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à
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' ] ]];0
Thông tin bổ sung có thể được tìm thấy trong
Kiểu. sự vật
Mặc định. vô giá trị
trục h. đăng nhập quy môThuộc tính
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'] ]];40 làm cho trục hoành trở thành thang logarit [yêu cầu tất cả các giá trị phải dương]. Đặt thành đúng cho có
Type. boolean
Mặc định. SAI
trục h. loại tỷ lệThuộc tính
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'] ]];40 làm cho trục hoành trở thành thang logarit. Có thể là một trong những điều sau đây
- null - Không thực hiện chia tỷ lệ logarit
- 'log' - Thang logarit. Các giá trị âm và 0 không được vẽ. Tùy chọn này giống như cài đặt
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'] ]];
67 - 'mirrorLog' - Chia tỷ lệ logarit trong đó các giá trị âm và 0 được vẽ. Giá trị biểu thị của một số âm là giá trị âm của nhật ký giá trị tuyệt đối. Các giá trị gần bằng 0 được vẽ trên thang tuyến tính
Type. string
Mặc định. vô giá trị
trục h. phong cách văn bảnMột đối tượng chỉ định kiểu văn bản trục ngang. Đối tượng có định dạng này
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' ] ]];2
Ví dụ:
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }9 có thể là bất kỳ chuỗi màu HTML nào.
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'] ]];14 hoặc
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'] ]];15. Cũng xem
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'] ]];71 và
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'] ]];72
Kiểu. sự vật
Mặc định.
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'] ]];73trục h. văn bảnVị trí
Vị trí của văn bản trục ngang, so với khu vực biểu đồ. Supported values. 'ra', 'vào', 'không'
Type. string
Default. 'out'
trục h. bọ veThay thế các dấu kiểm trục X được tạo tự động bằng mảng đã chỉ định. Mỗi phần tử của mảng phải là một giá trị đánh dấu hợp lệ [chẳng hạn như số, ngày, ngày giờ hoặc timeofday] hoặc một đối tượng. Nếu đó là một đối tượng, nó phải có thuộc tính
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'] ]];74 cho giá trị đánh dấu và thuộc tính
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'] ]];75 tùy chọn chứa chuỗi ký tự được hiển thị dưới dạng nhãn
ViewWindow sẽ được tự động mở rộng để bao gồm các dấu tick tối thiểu và tối đa trừ khi bạn chỉ định một
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'] ]];76 hoặc
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'] ]];77 để ghi đè
ví dụ
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'] ]];
78function 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'] ]];
79function 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'] ]];
80function 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'] ]];
81
Kiểu. Mảng phần tử
Default. auto
trục h. tiêu đềThuộc tính
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'] ]];40 chỉ định tiêu đề của trục hoành
Type. string
Mặc định. vô giá trị
trục h. tiêu đềVăn bảnPhong cáchMột đối tượng chỉ định kiểu văn bản tiêu đề trục ngang. Đối tượng có định dạng này
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' ] ]];2
Ví dụ:
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }9 có thể là bất kỳ chuỗi màu HTML nào.
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'] ]];14 hoặc
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'] ]];15. Cũng xem
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'] ]];71 và
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'] ]];72
Kiểu. sự vật
Mặc định.
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'] ]];73trục h. giá trị tối đa
Di chuyển giá trị lớn nhất của trục hoành đến giá trị đã chỉ định; . Bỏ qua nếu giá trị này được đặt thành giá trị nhỏ hơn giá trị x tối đa của dữ liệu.
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'] ]];89 ghi đè thuộc tính này
Type. number
Default. automatic
trục h. giá trị tối thiểuDi chuyển giá trị tối thiểu của trục hoành đến giá trị đã chỉ định; . 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.
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'] ]];90 ghi đè thuộc tính này
Type. number
Default. automatic
trục h. chế độ xemWindowChỉ định cách chia tỷ lệ trục ngang để hiển thị các giá trị trong khu vực biểu đồ. Các giá trị chuỗi sau được hỗ trợ
- 'khá' - Chia tỷ lệ các giá trị theo chiều ngang sao cho các giá trị dữ liệu tối đa và tối thiểu được hiển thị một chút bên trong bên trái và bên phải của khu vực biểu đồ. Chế độ xemWindow được mở rộng thành đường lưới chính gần nhất cho các số hoặc đường lưới phụ gần nhất cho ngày và giờ
- 'tối đa hóa' - Chia tỷ lệ các giá trị theo chiều ngang sao cho các giá trị dữ liệu tối đa và tối thiểu chạm vào bên trái và bên phải của khu vực biểu đồ. Điều này sẽ khiến
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'] ]];
91 và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'] ]];
92 bị bỏ qua - 'rõ ràng' - Một tùy chọn không dùng nữa để chỉ định các giá trị tỷ lệ trái và phải của khu vực biểu đồ. [Không dùng nữa vì nó dư thừa với
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'] ]];
91 và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'] ]];
92. ] Các giá trị dữ liệu bên ngoài các giá trị này sẽ bị cắt. Bạn phải chỉ định một đối tượngfunction 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'] ]];
95 mô tả các giá trị tối đa và tối thiểu để hiển thị
Type. string
Mặc định. Tương đương với 'pretty', nhưng
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'] ]];91 và
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'] ]];92 được ưu tiên hơn nếu được sử dụngtrục h. lượt xemCửa sổ
Chỉ định phạm vi cắt xén của trục ngang
Kiểu. sự vật
Mặc định. vô giá trị
trục h. lượt xemCửa sổ. tối đaGiá trị dữ liệu ngang tối đa để hiển thị
Bị bỏ qua khi
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'] ]];98 là 'khá' hoặc 'tối đa'
Type. number
Default. auto
trục h. lượt xemCửa sổ. tối thiểuGiá trị dữ liệu ngang tối thiểu để hiển thị
Bị bỏ qua khi
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'] ]];98 là 'khá' hoặc 'tối đa'
Type. number
Default. auto
chiều caoChiều cao của biểu đồ, tính bằng pixel
Type. number
Mặc định. chiều cao của phần tử chứa
isStackedNếu được đặt thành true, hãy sắp xếp các phần tử cho tất cả các chuỗi ở mỗi giá trị miền. Ghi chú. Trong các biểu đồ Cột, Vùng và SteppedArea, Google Charts đảo ngược thứ tự của các mục chú thích để tương ứng tốt hơn với việc sắp xếp các phần tử chuỗi [E. g. sê-ri 0 sẽ là vật phẩm 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
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 };7 cũng hỗ trợ xếp chồng 100%, trong đó các ngăn xếp phần tử ở mỗi giá trị miền được thay đổi tỷ lệ để thêm tối đa 100%
Các tùy chọn cho
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 };7 là
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' ] ]];
02 — các phần tử sẽ không xếp chồng lên nhau. Đây là tùy chọn mặc địnhvar 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 };
8 — ngăn xếp các phần tử cho tất cả các chuỗi ở mỗi giá trị miềnvar 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' ] ]];
04 — xếp chồng các phần tử cho tất cả các chuỗi ở mỗi giá trị miền và thay đổi tỷ lệ của chúng sao cho chúng cộng lại thành 100%, với giá trị của mỗi phần tử được tính theo tỷ lệ phần trăm là 100%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' ] ]];
05 — xếp chồng các phần tử cho tất cả các chuỗi ở mỗi giá trị miền và thay đổi tỷ lệ của chúng sao cho chúng cộng lại thành 1, với giá trị của mỗi phần tử được tính bằng một phân số của 1var 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' ] ]];
06 — chức năng giống nhưvar options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };
2
Đối với xếp chồng 100%, giá trị được tính toán cho từng phần tử sẽ xuất hiện trong chú giải công cụ sau giá trị thực của nó
Trục mục tiêu sẽ mặc định đánh dấu các giá trị dựa trên tỷ lệ 0-1 tương đối dưới dạng phân số của 1 cho
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' ] ]];05 và 0-100% cho
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' ] ]];04 [Lưu ý. khi sử dụng tùy chọn
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' ] ]];04, các giá trị trục/tick được hiển thị dưới dạng phần trăm, tuy nhiên, các giá trị thực tế là các giá trị tỷ lệ 0-1 tương đối. Điều này là do dấu kiểm trục phần trăm là kết quả của việc áp dụng định dạng "#. ##%" thành các giá trị tỷ lệ 0-1 tương đối. Khi sử dụng
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 };9, hãy đảm bảo chỉ định bất kỳ dấu tích/đường lưới nào bằng cách sử dụng các giá trị tỷ lệ 0-1 tương đối]. Bạn có thể tùy chỉnh đường lưới/giá trị đánh dấu và định dạng bằng cách sử dụng các tùy chọn
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' ] ]];12 thích hợp
Xếp chồng 100% chỉ hỗ trợ các giá trị dữ liệu thuộc loại
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' ] ]];13 và phải có đường cơ sở bằng 0
Kiểu. boolean/chuỗi
Mặc định. SAI
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 các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu chữ đối tượng, như được hiển thị ở đây
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' ] ]];4
Kiểu. sự vật
Mặc định. vô giá trị
huyền thoại. trang IndexChỉ mục trang dựa trên số 0 được chọn ban đầu của chú giải
Type. number
Default. 0
huyền thoại. chức vụVị trí của huyền thoại. Có thể là một trong những điều sau đây
- 'bottom' - Bên dưới biểu đồ
- 'left' - Ở bên trái của biểu đồ, miễn là trục bên trái không có chuỗi liên kết với nó. Vì vậy, nếu bạn muốn chú thích ở bên trái, hãy sử dụng tùy chọn
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' ] ]];
14 - 'in' - Bên trong biểu đồ, ở góc trên cùng bên trái
- 'none' - Không có chú giải nào được hiển thị
- 'right' - Ở bên phải của biểu đồ. Không tương thích với tùy chọn
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' ] ]];
15 - 'top' - Phía trên biểu đồ
Type. string
Mặc định. 'Phải'
huyền thoại. căn chỉnhCăn chỉnh của huyền thoại. Có thể là một trong những điều sau đây
- 'bắt đầu' - Căn với điểm bắt đầu của khu vực được phân bổ cho chú giải
- 'trung tâm' - Căn giữa trong khu vực được phân bổ cho chú giải
- 'kết thúc' - Căn chỉnh đến cuối khu vực được phân bổ cho chú giải
Bắt đầu, ở giữa và kết thúc có liên quan đến kiểu -- dọc hoặc ngang -- của chú giải. Ví dụ: trong chú thích 'đúng', 'bắt đầu' và 'kết thúc' lần lượt ở trên cùng và dưới cùng;
Giá trị mặc định phụ thuộc vào vị trí của chú giải. Đối với chú thích 'dưới cùng', mặc định là 'ở giữa';
Type. string
Default. automatic
huyền thoại. phong cách văn bảnMột đối tượng chỉ định kiểu văn bản chú giải. Đối tượng có định dạng này
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' ] ]];2
Ví dụ:
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }9 có thể là bất kỳ chuỗi màu HTML nào.
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'] ]];14 hoặc
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'] ]];15. Cũng xem
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'] ]];71 và
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'] ]];72
Kiểu. sự vật
Mặc định.
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'] ]];73đảo ngược Thể loại
Nếu đặt thành true, sẽ vẽ chuỗi từ dưới lên trên. Mặc định là vẽ từ trên xuống dưới
Type. boolean
Mặc định. SAI
định hướngĐịnh hướng của biểu đồ. Khi được đặt thành
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' ] ]];22, hãy xoay các trục của biểu đồ để [ví dụ] biểu đồ cột trở thành biểu đồ thanh và biểu đồ vùng phát triển sang phải thay vì hướng lên trên
Type. string
Mặc định. 'nằm ngang'
loạtMộ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 các 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, giá trị chung sẽ được sử dụng. Mỗi đối tượng hỗ trợ các thuộc tính sau
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' ] ]];
23 - Một đối tượng được áp dụng cho các chú thích cho chuỗi này. Điều này có thể được sử dụng để kiểm soát, ví dụ,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' ] ]];
24 cho chuỗivar 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' ] ]];
6Xem các tùy chọn
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' ] ]];
23 khác nhau để có danh sách đầy đủ hơn về những gì có thể được tùy chỉnhgoogle.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
9 - Màu sử dụng cho loạt bài này. Chỉ định một chuỗi màu HTML hợp lệ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' ] ]];
27 - Mô tả về sê-ri xuất hiện trong chú thích bảng xếp hạngvar 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' ] ]];
28 - Gán chuỗi này vào trục nào, trong đó 0 là trục mặc định và 1 là trục đối diện. Giá trị mặc định là 0; . Ít nhất một chuỗi được phân bổ cho trục mặc định. Bạn có thể xác định tỷ lệ khác nhau cho các trục khác nhauvar 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' ] ]];
29 - Một giá trị boolean, trong đó đúng có nghĩa là bộ truyện phải có mục chú thích và sai có nghĩa là không nên. Mặc định là đúng
Bạn có thể chỉ định một mảng các đố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 phím số cho biết nó áp dụng cho chuỗi nào. Ví dụ: hai tuyên bố sau giống hệt nhau và tuyên bố chuỗi đầu tiên là màu đen và không có trong chú giải, và chuỗi thứ tư là màu đỏ và không có trong chú giải
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' ] ]];7
Kiểu. Mảng đối tượng hoặc đối tượng với các đối tượng lồng nhau
Mặc định. {}
chủ đềChủ đề là một tập hợp các giá trị tùy chọn được xác định trước hoạt động cùng nhau để đạt được một hành vi biểu đồ hoặc hiệu ứng hình ảnh cụ thể. Hiện tại chỉ có một chủ đề có sẵn
- 'tối đa hóa' - Tối đa hóa diện tích của biểu đồ và vẽ chú giải cũng như tất cả các nhãn bên trong khu vực biểu đồ. Đặt các tùy chọn sau.
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' ] ]];
8
Type. string
Mặc định. vô giá trị
tiêu đềVăn bản để hiển thị phía trên biểu đồ
Type. string
Mặc định. Không tiêu đề
vị trí tiêu đềVị trí đặt tiêu đề biểu đồ, so với diện tích biểu đồ. Giá trị được hỗ trợ
- in - Vẽ tiêu đề bên trong khu vực biểu đồ
- out - Vẽ tiêu đề bên ngoài khu vực biểu đồ
- không có - Bỏ qua tiêu đề
Type. string
Default. 'out'
tiêu đềVăn bảnPhong cáchMột đối tượng chỉ định kiểu văn bản tiêu đề. Đối tượng có định dạng này
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' ] ]];2
Ví dụ:
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }9 có thể là bất kỳ chuỗi màu HTML nào.
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'] ]];14 hoặc
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'] ]];15. Cũng xem
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'] ]];71 và
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'] ]];72
Kiểu. sự vật
Mặc định.
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'] ]];73chú giải công cụ
Một đối tượng có các thành viên để định cấu hình các thành phần chú giải công cụ khác nhau. Để 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 chữ đối tượng, như được hiển thị ở đây
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }0
Kiểu. sự vật
Mặc định. vô giá trị
chú giải công cụ. bỏ qua giới hạnNếu được đặt thành
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 };8, cho phép bản vẽ chú giải công cụ chảy ra ngoài giới hạn của biểu đồ trên tất cả các mặt
Ghi chú. Điều này chỉ áp dụng cho chú giải công cụ HTML. Nếu tính năng này được bật với chú giải công cụ SVG, mọi phần tràn ra ngoài giới hạn của biểu đồ sẽ bị cắt. Xem Tùy chỉnh nội dung chú giải công cụ để biết thêm chi tiết
Type. boolean
Mặc định. SAI
chú giải công cụ. isHtmlNếu được đặt thành true, hãy sử dụng chú giải công cụ được hiển thị bằng HTML [chứ không phải được hiển thị bằng SVG]. Xem Tùy chỉnh nội dung chú giải công cụ để biết thêm chi tiết
Ghi chú. tùy chỉnh nội dung chú giải công cụ HTML qua không được hỗ trợ bởi trực quan hóa Biểu đồ bong bóng
Type. boolean
Mặc định. SAI
chú giải công cụ. hiển thịMã màuNếu đúng, hãy hiển thị các ô vuông có màu bên cạnh thông tin sê-ri trong chú giải công cụ. Giá trị mặc định là đúng khi
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' ] ]];37 được đặt thành 'danh mục', nếu không thì giá trị mặc định là sai
Type. boolean
Default. automatic
chú giải công cụ. phong cách văn bảnMột đối tượng chỉ định kiểu văn bản chú giải công cụ. Đối tượng có định dạng này
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' ] ]];2
Ví dụ:
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }9 có thể là bất kỳ chuỗi màu HTML nào.
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'] ]];14 hoặc
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'] ]];15. Cũng xem
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'] ]];71 và
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'] ]];72
Kiểu. sự vật
Mặc định.
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'] ]];73chú giải công cụ. cò súng
Tương tác của người dùng khiến chú giải công cụ được hiển thị
- 'tiêu điểm' - Chú giải công cụ sẽ được hiển thị khi người dùng di chuột qua phần tử
- 'none' - Chú giải công cụ sẽ không được hiển thị
- 'selection' - Chú giải công cụ sẽ được hiển thị khi người dùng chọn phần tử
Type. string
Mặc định. 'tập trung'
đường xu hướngHiển thị các đườ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 điều này có thể được tùy chỉnh bằng tùy chọn
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' ] ]];44
Đường xu hướng được chỉ định trên cơ sở từng chuỗi, do đó, hầu hết thời gian các tùy chọn của bạn sẽ giống như thế này
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }2
Kiểu. sự vật
Mặc định. vô giá trị
đường xu hướng. n. màu sắcMàu của đường xu hướng , được thể hiện dưới dạng tên màu tiếng Anh hoặc chuỗi hex
Type. string
Mặc định. màu sê-ri mặc định
đường xu hướng. n. bằng cấpĐối với các đường xu hướng của
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' ] ]];45, bậc của đa thức [
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' ] ]];46 cho bậc hai,
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' ] ]];47 cho bậc ba, v.v.]. [Cấp độ mặc định có thể thay đổi từ 3 thành 2 trong bản phát hành sắp tới của Google Charts. ]
Type. number
Mặc định. 3
đường xu hướng. n. nhãnInLegendNếu được đặt, đường xu hướng sẽ xuất hiện trong chú giải dưới dạng chuỗi này
Type. string
Mặc định. vô giá trị
đường xu hướng. n. chiều rộng dòngĐộ rộng đường của đường xu hướng, tính bằng pixel
Type. number
Mặc định. 2
đường xu hướng. n. độ mờ đụcĐộ trong suốt của đường xu hướng , từ 0. 0 [trong suốt] đến 1. 0 [đục]
Type. number
Mặc định. 1. 0
đường xu hướng. n. kích thước điểmĐường xu hướng được xây dựng bằng cách đóng dấu một loạt các dấu chấm trên biểu đồ; . Tùy chọn
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' ] ]];48 của đường xu hướng thường sẽ được ưu tiên hơn. Tuy nhiên, bạn sẽ cần tùy chọn này nếu bạn đang sử dụng tùy chọn
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' ] ]];49 toàn cầu và muốn có kích thước điểm khác cho đường xu hướng của mình
Type. number
Default. 1
đường xu hướng. n. điểmHiển thịĐường xu hướng được xây dựng bằng cách đóng dấu một loạt các dấu chấm trên biểu đồ. Tùy chọn
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' ] ]];50 của đường xu hướng xác định xem các điểm cho một đường xu hướng cụ thể có hiển thị hay không
Type. boolean
Mặc định. ĐÚNG VẬY
đường xu hướng. n. showR2Có hiển thị chú giải công cụ trong chú giải hoặc đường xu hướng hay không
Type. boolean
Mặc định. SAI
đường xu hướng. n. kiểuCho dù các đường xu hướng là
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' ] ]];51 [mặc định],
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' ] ]];52 hay
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' ] ]];53
Type. string
Mặc định. tuyến tính
đường xu hướng. n. có thể nhìn thấyInLegendPhương trình đường xu hướng có xuất hiện trong truyền thuyết hay không. [Nó sẽ xuất hiện trong tooltip đường xu hướng. ]
Type. boolean
Mặc định. SAI
vTrụcMột đối tượng có các thành viên để định cấu hình các phần tử trục dọc khác nhau. Để 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 chữ đối tượng, như được hiển thị ở đây
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }3
Kiểu. sự vật
Mặc định. vô giá trị
vTrục. đường cơ sởThuộc tính
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' ] ]];54 chỉ định đường cơ sở cho trục tung. Nếu đường cơ sở lớn hơn đường lưới cao nhất hoặc nhỏ hơn đường lưới thấp nhất thì sẽ được làm tròn đến đường lưới gần nhất
Tùy chọn này chỉ được hỗ trợ cho một trục
Type. number
Default. automatic
vTrục. đường cơ sởColorChỉ định màu của đường cơ sở cho trục tung. Có thể là bất kỳ chuỗi màu HTML nào, ví dụ.
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'] ]];14 hoặc
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'] ]];15
Tùy chọn này chỉ được hỗ trợ cho một trục
Type. number
Default. 'black'
vTrục. phương hướngHướng mà các giá trị dọc theo trục tung tăng lên. Theo mặc định, giá trị thấp nằm ở dưới cùng của biểu đồ. Chỉ định
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'] ]];48 để đảo ngược thứ tự của các giá trị
Type. 1 or -1
Default. 1
vTrục. định dạngChuỗi định dạng cho nhãn trục số hoặ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. Chẳng hạn,
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'] ]];49 sẽ hiển thị các giá trị "1.000%", "750%" và "50%" cho các giá trị 10, 7. 5 và 0. 5. Bạn cũng có thể cung cấp bất kỳ thứ nào sau đâ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'] ]];
50. displays numbers with no formatting [e. g. , 8000000]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'] ]];
51. displays numbers with thousands separators [e. g. , 8,000,000]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'] ]];
52. displays numbers in scientific notation [e. g. , 8e6]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'] ]];
53. displays numbers in the local currency [e. g. , $8,000,000. 00]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'] ]];
54. displays numbers as percentages [e. g. , 800,000,000%]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'] ]];
55. hiển thị số viết tắt [e. g. , 8M]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'] ]];
56. displays numbers as full words [e. g. , 8.000.000]
Đối với nhãn trục ngày, đây là tập hợp con của định dạng ngày. Chẳng hạn,
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' ] ]];68 sẽ hiển thị giá trị "Ngày 1 tháng 7 năm 2011" cho ngày đầu tiên của tháng 7 năm 2011
The actual formatting applied to the label is derived from the locale the API has been loaded with. Để biết thêm chi tiết, xem
Khi tính toán các giá trị đánh dấu và đường lưới, một số kết hợp thay thế của tất cả các tùy chọn đường lưới có liên quan sẽ được xem xét và các phương án thay thế sẽ bị từ chối nếu các nhãn đánh dấu được định dạng sẽ bị trùng lặp hoặc chồng lên nhau. So you can specify
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'] ]];57 if you want to only show integer tick values, but be aware that if no alternative satisfies this condition, no gridlines or ticks will be shown
Tùy chọn này chỉ được hỗ trợ cho một trục
Type. string
Default. auto
vTrục. đường lướiMột đối tượng có các thành viên để định cấu hình đường lưới trên trục tung. Lưu ý rằng các đường lưới trục dọc đượ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 chữ đối tượng, như được hiển thị ở đâ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'] ]];9
Tùy chọn này chỉ được hỗ trợ cho một trục
Kiểu. sự vật
Mặc định. vô giá trị
vTrục. đường lưới. màu sắcMàu của các đường lưới dọc bên trong khu vực biểu đồ. Chỉ định một chuỗi màu HTML hợp lệ
Type. string
Mặc định. '#CCC'
vTrục. đường lưới. đếmSố gần đúng của đường lưới ngang bên trong khu vực biểu đồ. Nếu bạn chỉ định một số dương cho
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'] ]];58, nó sẽ được sử dụng để tính toán
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'] ]];59 giữa các đường lưới. Bạn có thể chỉ định giá trị
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'] ]];60 để chỉ vẽ một đường lưới hoặc
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'] ]];61 để không vẽ đường lưới. Chỉ định -1, là giá trị mặc định, để tự động tính toán số lượng đường lưới dựa trên các tùy chọn khác
Type. number
Default. -1
vTrục. đường lưới. các đơn vịGhi đè định dạng mặc định cho các khía cạnh khác nhau của kiểu dữ liệu ngày/ngày giờ/thời gian trong ngày khi được sử dụng với các đườ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à
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }5
Thông tin bổ sung có thể được tìm thấy trong
Kiểu. sự vật
Mặc định. vô giá trị
Một đối tượng có cá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ư vAxis. tùy chọn đường lưới
Tùy chọn này chỉ được hỗ trợ cho một trục
Kiểu. sự vật
Mặc định. vô giá trị
vTrục. đường lưới nhỏ. màu sắcMàu của các đường lưới phụ dọc bên trong khu vực biểu đồ. Chỉ định một chuỗi màu HTML hợp lệ
Type. string
Mặc định. Sự pha trộn giữa đường lưới và màu nền
vTrục. đường lưới nhỏ. đếmCác đường lưới nhỏ. tùy chọn đếm phần lớn 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ố đếm thành 0. Số lượng đường lưới phụ phụ thuộc vào khoảng cách giữa các đường lưới chính [xem vAxis. đường lưới. khoảng thời gian] và không gian yêu cầu tối thiểu [xem vAxis. đường lưới nhỏ. khoảng cách tối thiểu]
Type. number
Default. 1
vTrục. đường lưới nhỏ. các đơn vịGhi đè định dạng mặc định cho các khía cạnh khác nhau của kiểu dữ liệu ngày/ngày giờ/thời gian trong ngày khi được sử dụng với các đường lưới phụ đượ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à
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' ] ]];0
Thông tin bổ sung có thể được tìm thấy trong
Kiểu. sự vật
Mặc định. vô giá trị
vTrục. đăng nhập quy môNếu đúng, làm cho trục tung thành thang logarit. Ghi chú. Tất cả các giá trị phải là số dương
Tùy chọn này chỉ được hỗ trợ cho một trục
Type. boolean
Mặc định. SAI
vTrục. loại tỷ lệThuộc tính
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' ] ]];54 biến trục tung thành thang logarit. Có thể là một trong những điều sau đây
- null - Không thực hiện chia tỷ lệ logarit
- 'log' - Thang logarit. Các giá trị âm và 0 không được vẽ. Tùy chọn này giống như cài đặ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' ] ]];
79 - 'mirrorLog' - Chia tỷ lệ logarit trong đó các giá trị âm và 0 được vẽ. Giá trị biểu thị của một số âm là giá trị âm của nhật ký giá trị tuyệt đối. Các giá trị gần bằng 0 được vẽ trên thang tuyến tính
Type. string
Mặc định. vô giá trị
vTrục. văn bảnVị tríVị trí của văn bản trục tung, so với khu vực biểu đồ. Giá trị được hỗ trợ. 'ra', 'vào', 'không'
Type. string
Default. 'out'
vTrục. phong cách văn bảnMột đối tượng chỉ định kiểu văn bản trục dọc. Đối tượng có định dạng này
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' ] ]];2
Ví dụ:
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }9 có thể là bất kỳ chuỗi màu HTML nào.
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'] ]];14 hoặc
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'] ]];15. Cũng xem
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'] ]];71 và
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'] ]];72
Kiểu. sự vật
Mặc định.
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'] ]];73vTrục. bọ ve
Thay thế các tick trục Y được tạo tự động bằng mảng đã chỉ định. Mỗi phần tử của mảng phải là một giá trị đánh dấu hợp lệ [chẳng hạn như số, ngày, ngày giờ hoặc timeofday] hoặc một đối tượng. Nếu đó là một đối tượng, nó phải có thuộc tính
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'] ]];74 cho giá trị đánh dấu và thuộc tính
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'] ]];75 tùy chọn chứa chuỗi ký tự được hiển thị dưới dạng nhãn
ViewWindow sẽ được tự động mở rộng để bao gồm các dấu tick tối thiểu và tối đa trừ khi bạn chỉ định một
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'] ]];76 hoặc
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'] ]];77 để ghi đè
ví dụ
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' ] ]];
90var 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' ] ]];
91var 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' ] ]];
92var 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' ] ]];
93
Tùy chọn này chỉ được hỗ trợ cho một trục
Kiểu. Mảng phần tử
Default. auto
vTrục. tiêu đềThuộc tính
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' ] ]];54 chỉ định tiêu đề cho trục tung
Type. string
Mặc định. Không tiêu đề
vTrục. tiêu đềVăn bảnPhong cáchMộ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 này
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }8
Ví dụ:
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }9 có thể là bất kỳ chuỗi màu HTML nào.
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'] ]];14 hoặc
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'] ]];15. Cũng xem
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'] ]];71 và
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'] ]];72
Kiểu. sự vật
Mặc định.
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'] ]];73vTrục. giá trị tối đa
Di chuyển giá trị lớn nhất của trục tung đến giá trị đã chỉ định; . Bị bỏ qua nếu giá trị này được đặt thành giá trị nhỏ hơn giá trị y tối đa của dữ liệu.
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }02 ghi đè thuộc tính này
Tùy chọn này chỉ được hỗ trợ cho một trục
Type. number
Default. automatic
vTrục. giá trị tối thiểuDi chuyển giá trị tối thiểu của trục tung đến giá trị đã chỉ định; . Bị 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.
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }04 ghi đè thuộc tính này
Tùy chọn này chỉ được hỗ trợ cho một trục
Type. number
Mặc định. vô giá trị
vTrục. chế độ xemWindowChỉ định cách chia tỷ lệ trục dọc để hiển thị các giá trị trong khu vực biểu đồ. Các giá trị chuỗi sau được hỗ trợ
- 'khá' - Chia tỷ lệ các giá trị theo chiều dọc sao cho các giá trị dữ liệu tối đa và tối thiểu được hiển thị một chút bên trong phần dưới cùng và trên cùng của khu vực biểu đồ. Chế độ xemWindow được mở rộng thành đường lưới chính gần nhất cho các số hoặc đường lưới phụ gần nhất cho ngày và giờ
- 'tối đa hóa' - Chia tỷ lệ các giá trị theo chiều dọc sao cho các giá trị dữ liệu tối đa và tối thiểu chạm vào đầu và cuối của khu vực biểu đồ. Điều này sẽ khiến
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
06 và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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
07 bị bỏ qua - 'rõ ràng' - Một tùy chọn không dùng nữa để chỉ định các giá trị tỷ lệ trên cùng và dưới cùng của khu vực biểu đồ. [Không dùng nữa vì nó dư thừa với
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
06 và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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
07. Các giá trị dữ liệu bên ngoài các giá trị này sẽ bị cắt. Bạn phải chỉ định một đối tượnggoogle.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
10 mô tả các giá trị tối đa và tối thiểu để hiển thị
Tùy chọn này chỉ được hỗ trợ cho một trục
Type. string
Mặc định. Tương đương với 'pretty', nhưng
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }06 và
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }07 được ưu tiên hơn nếu được sử dụngvTrục. lượt xemCửa sổ
Chỉ định phạm vi cắt xén của trục tung
Kiểu. sự vật
Mặc định. vô giá trị
vTrục. lượt xemCửa sổ. tối đaĐối với một trục
Giá trị dữ liệu dọc tối đa để hiển thị
Đối với một trục
Chỉ mục hàng dựa trên số 0 nơi cửa sổ cắt xén kết thúc. Các điểm dữ liệu tại chỉ mục này trở lên sẽ bị cắt bỏ. Kết hợp với
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
16, nó xác định phạm vi mở một nửa [min, max] biểu thị các chỉ số phần tử sẽ hiển thị. Nói cách khác, mọi chỉ mục sao chogoogle.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
17 sẽ được hiển thị
Bị bỏ qua khi
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }18 là 'khá' hoặc 'tối đa'
Type. number
Default. auto
vTrục. lượt xemCửa sổ. tối thiểuĐối với một trục
Giá trị dữ liệu dọc tối thiểu để hiển thị
Đối với một trục
Chỉ mục hàng dựa trên số 0 nơi cửa sổ cắt xén bắt đầu. Điểm dữ liệu tại các chỉ số thấp hơn mức này sẽ bị cắt. Kết hợp với
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
21, nó xác định phạm vi mở một nửa [min, max] biểu thị các chỉ số phần tử sẽ hiển thị. Nói cách khác, mọi chỉ mục sao chogoogle.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
17 sẽ được hiển thị. Bị bỏ qua khigoogle.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
18 là 'khá' hoặc 'tối đa'
Bị bỏ qua khi
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }18 là 'khá' hoặc 'tối đa'
Type. number
Default. auto
chiều rộngChiều rộng của biểu đồ, tính bằng pixel
Type. number
Mặc định. chiều rộng của phần tử chứa
phương pháp
Phương pháp____1_______25Vẽ biểu đồ. Biểu đồ chỉ chấp nhận các cuộc gọi phương thức khác sau khi sự kiện được kích hoạt.
Loại trả lại. không có
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }28
Trả về đối tượng hành động tooltip với
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }29 được yêu cầu
Loại trả lại. sự vật
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }30
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 thành phần biểu đồ
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }31. Định dạng cho
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }31 chưa được ghi lại [chúng là giá trị trả về của trình xử lý sự kiện], nhưng đây là một số ví dụ
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }33
Chiều cao của khu vực biểu đồ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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }34Chiều rộng của thanh thứ ba trong chuỗi đầu tiên của biểu đồ thanh hoặc cột_______1_______35Hộp giới hạn của nêm thứ năm của biểu đồ hình tròngoogle.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }36Hộp giới hạn của dữ liệu biểu đồ dọc [e. g. , biểu đồ cột.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }37Khung giới hạn của dữ liệu biểu đồ theo chiều ngang [e. g. , biểu đồ cột.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }38
Các giá trị có liên quan đến vùng chứa của biểu đồ. Gọi điều này sau khi biểu đồ được vẽ
Loại trả lại. sự vật
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }39
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 đồ [i. e. , không bao gồm nhãn và chú giải]
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }33google.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }41google.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }42google.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }43google.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }44
Các giá trị có liên quan đến vùng chứa của biểu đồ. Gọi điều này sau khi biểu đồ được vẽ
Loại trả lại. sự vật
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }45
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 thành phần của nó
Các phương thức sau có thể được gọi trên đối tượng được trả về
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
46google.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
47google.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
48google.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
49google.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
50google.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }
51
Gọi điều này sau khi biểu đồ được vẽ
Loại trả lại. sự vật
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }52
Trả về giá trị dữ liệu theo chiều ngang tại
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }53, là độ lệch pixel so với cạnh trái của bộ chứa biểu đồ. có thể là tiêu cực
Ví dụ.
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }54
Gọi điều này sau khi biểu đồ được vẽ
Loại trả lại. con số
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }55
Trả về biểu đồ được tuần tự hóa dưới dạng URI hình ảnh
Gọi điều này sau khi biểu đồ được vẽ
Xem In Biểu đồ PNG
Loại trả lại. sợi dây
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }56
Trả về một mảng các thực thể biểu đồ đã chọn. Các thực thể có thể lựa chọn là các thanh, mục chú thích và danh mục. Đối với biểu đồ này, chỉ có thể chọn một thực thể tại bất kỳ thời điểm nào.
Loại trả lại. Mảng các phần tử lựa chọn
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }58
Trả về giá trị dữ liệu dọc tại _______1_______59, là pixel lệch xuống so với cạnh trên cùng của vùng chứa biểu đồ. có thể là tiêu cực
Ví dụ.
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }60
Gọi điều này sau khi biểu đồ được vẽ
Loại trả lại. con số
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }61
Trả về tọa độ x pixel của
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }62 so với cạnh trái của vùng chứa biểu đồ
Ví dụ.
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }63
Gọi điều này sau khi biểu đồ được vẽ
Loại trả lại. con số
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }64
Trả về tọa độ y pixel của
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }62 so với cạnh trên cùng của vùng chứa biểu đồ
Ví dụ.
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }66
Gọi điều này sau khi biểu đồ được vẽ
Loại trả lại. con số
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }67
Xóa hành động chú giải công cụ với
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }29 được yêu cầu khỏi biểu đồ
Loại trả lại.
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }69
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }70
Đặt một hành động 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
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }71 lấy một đối tượng làm tham số hành động của nó. Đối tượng này cần chỉ định 3 thuộc tính.
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }31— ID của hành động đang được đặt,
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }73 —văn bản sẽ xuất hiện trong chú giải công cụ cho hành động và
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }74 — chức năng sẽ được chạy khi người dùng nhấp vào văn bản hành động
Bất kỳ và tất cả các hành động chú giải công cụ phải được đặt trước khi gọi phương thức
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }75 của biểu đồ.
Loại trả lại.
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }69
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }77
Chọn các thực thể biểu đồ được chỉ định. Hủy mọi lựa chọn trước đó. Các thực thể có thể lựa chọn là các thanh, mục chú thích và danh mục. Đối với biểu đồ này, mỗi lần chỉ có thể chọn một thực thể.
Loại trả lại. không có
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }79
Xóa biểu đồ và giải phóng tất cả các tài nguyên được phân bổ của nó
Loại trả lại. không có
Sự kiện
Để biết thêm thông tin về cách sử dụng các sự kiện này, hãy xem Tương tác cơ bản, Xử lý sự kiện và Kích hoạt sự kiện
Têngoogle.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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }80
Được kích hoạt khi hoạt ảnh chuyển tiếp hoàn tất
Của cải. không có
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }81
Được kích hoạt khi người dùng nhấp vào bên trong biểu đồ. Có thể được sử dụng để xác định thời điểm tiêu đề, thành phần dữ liệu, mục chú thích, trục, đường lưới hoặc nhãn được nhấp vào
Của cải. ID mục tiêu
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }82
Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ
Của cải. id, tin nhắn
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }83
Đượ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ả lại chỉ mục trang dựa trên số 0 chú giải hiện tại và tổng số trang
Của cải. currentPage Index, totalPages
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }84
Được kích hoạt khi người dùng di chuột qua một thực thể trực quan. Trả lại chỉ số hàng và cột của phần tử bảng dữ liệu tương ứng. Một thanh tương quan với một ô trong bảng dữ liệu, một mục chú giải cho một cột [chỉ mục hàng là null] và một thể loại cho một hàng [chỉ mục cột là null]
Của cải. hàng, cột
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }85
Được kích hoạt khi người dùng di chuột khỏi một thực thể trực quan. Trả lại chỉ số hàng và cột của phần tử bảng dữ liệu tương ứng. Một thanh tương quan với một ô trong bảng dữ liệu, một mục chú giải cho một cột [chỉ mục hàng là null] và một thể loại cho một hàng [chỉ mục cột là null]
Của cải. hàng, cột
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }26
Biểu đồ đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu bạn muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ nó, bạn nên thiết lập một trình lắng nghe cho sự kiện này trước khi gọi phương thức
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.BarChart[document.getElementById["barchart_values"]]; chart.draw[view, options]; }87 và chỉ gọi chúng sau khi sự kiện được kích hoạt