Biểu đồ hình tròn được hiển thị trong trình duyệt bằng SVG hoặc VML. Hiển thị chú giải công cụ khi di chuột qua các lát cắt
Ví dụ
google.charts.load['current', {'packages':['corechart']}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart[document.getElementById['piechart']]; chart.draw[data, options]; }
Tạo biểu đồ hình tròn 3D
Nếu bạn đặt tùy chọn
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }0 thành
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }1, biểu đồ hình tròn của bạn sẽ được vẽ như thể nó có ba chiều
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }0 là
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }3 theo mặc định, vì vậy ở đây chúng tôi đặt rõ ràng là
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }1
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }
Tạo biểu đồ bánh rán
Biểu đồ vành khuyên là một biểu đồ hình tròn có một lỗ ở giữa. Bạn có thể tạo biểu đồ vành khuyên với tùy chọn
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }5
Tùy chọn
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }5 phải được đặt thành một số từ 0 đến 1, tương ứng với tỷ lệ bán kính giữa lỗ và biểu đồ. Các số giữa 0. 4 và 0. 6 sẽ trông đẹp nhất trên hầu hết các biểu đồ. Các giá trị bằng hoặc lớn hơn 1 sẽ bị bỏ qua và giá trị bằng 0 sẽ đóng hoàn toàn lỗ hổng của bạn
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }
Bạn không thể kết hợp các tùy chọn
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }5 và
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }0;
Lưu ý rằng Google Charts cố gắng đặt nhãn càng gần tâm của lát cắt càng tốt. Nếu bạn có biểu đồ vành khuyên chỉ với một lát cắt, tâm của lát cắt có thể rơi vào lỗ vành khuyên. Trong trường hợp đó, hãy thay đổi màu của nhãn
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }3
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }4
Xoay một Pie Chart
Theo mặc định, biểu đồ hình tròn bắt đầu với cạnh trái của lát cắt đầu tiên hướng thẳng lên trên. Bạn có thể thay đổi điều đó bằng tùy chọn
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }30
Ở đây, chúng ta xoay biểu đồ 100 độ theo chiều kim đồng hồ với tùy chọn
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }31. [Được chọn như vậy vì góc cụ thể đó xảy ra để làm cho nhãn "Ý" nằm gọn trong lát cắt. ]
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }7
Nổ một Slice
Bạn có thể tách các lát tròn khỏi phần còn lại của biểu đồ bằng thuộc tính
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }32 của tùy chọn
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }33
Để tách một lát cắt, hãy tạo một đối tượng
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }33 và gán số lát thích hợp là một
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }32 trong khoảng từ 0 đến 1. Bên dưới, chúng tôi chỉ định độ lệch lớn dần cho lát 4 [Gujarati], 12 [Marathi], 14 [Oriya] và 15 [Punjabi]
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }2
Loại bỏ các lát cắt
Để bỏ qua một lát cắt, hãy thay đổi màu thành
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }36
Chúng tôi cũng đã sử dụng
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }30 để xoay biểu đồ 135 độ,
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }38 để xóa văn bản khỏi các lát cắt và
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }39 để tắt chú giải công cụ
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }7
Ngưỡng hiển thị lát cắt
Bạn có thể đặt một giá trị làm ngưỡng để một lát bánh hiển thị riêng lẻ. Giá trị này tương ứng với một phần của biểu đồ [với toàn bộ biểu đồ là giá trị 1]. Để đặt ngưỡng này dưới dạng phần trăm của toàn bộ, hãy chia phần trăm mong muốn cho 100 [đối với ngưỡng 20%, giá trị sẽ là 0. 2]
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }8
Bất kỳ lát cắt nào nhỏ hơn ngưỡng này sẽ được kết hợp thành một lát cắt "Khác" duy nhất và sẽ có giá trị tổng hợp của tất cả các lát cắt bên dưới ngưỡng
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }9
Đang tải
Tên gói
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }40 là
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }41
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }0
Tên lớp của trực quan hóa là
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }42
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }1
Định dạng dữ liệu
hàng. Mỗi hàng trong bảng đại diện cho một lát
Cột
Cột 0Cột 1. Cột N [tùy chọn]Mục đích. Nhãn lát cắt Giá trị lát cắt. Vai trò tùy chọn Loại dữ liệu. chuỗi số. Vai trò. dữ liệu miền. Vai trò cột tùy chọn. Không có Không có- chú giải công cụ
Tùy chọn cấu hình
TênnềnMàu sắcMàu nền cho khu vực chính của biểu đồ. Ví dụ: có thể là một chuỗi màu HTML đơn giản.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }43 hoặc
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }44 hoặc một đối tượng có các thuộc tính sau
Loại. chuỗi hoặc đối tượng
Mặc định. 'trắng'
màu nền. Cú đánhMàu của đường viền biểu đồ, dưới dạng chuỗi màu HTML
Loại. chuỗi
Mặc định. '#666'
màu nền. Chiều rộng đột quỵChiều rộng đường viền, tính bằng pixel
Loại. con số
Mặc định. 0
màu nền. lấp đầyTô màu cho biểu đồ, dưới dạng một chuỗi màu HTML
Loại. chuỗi
Mặc định. 'trắng'
khu vực biểu đồMột đối tượng có các thành viên để định cấu hình vị trí và kích thước của vùng biểu đồ [nơi bản thân biểu đồ được vẽ, không bao gồm trục và chú giải]. Hai định dạng được hỗ trợ. một số hoặc một số theo sau bởi %. Một số đơn giản là một giá trị tính bằng pixel; . Ví dụ.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }45
Loại. vật
Mặc định. vô giá trị
khu vực biểu đồ. màu nềnMàu nền của khu vực biểu đồ. Khi một chuỗi được sử dụng, nó có thể là một chuỗi hex [e. g. , '#fdc'] hoặc tên màu tiếng Anh. Khi một đối tượng được sử dụng, các thuộc tính sau có thể được cung cấp
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }
46. màu, được cung cấp dưới dạng chuỗi hex hoặc tên màu tiếng Anhgoogle.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }
47. nếu được cung cấp, vẽ một đường viền xung quanh khu vực biểu đồ có chiều rộng nhất định [và với màu củagoogle.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }
46]
Loại. chuỗi hoặc đối tượng
Mặc định. 'trắng'
khu vực biểu đồ. tráiCách vẽ biểu đồ từ đường viền bên trái bao xa
Loại. số hoặc chuỗi
Mặc định. tự động
khu vực biểu đồ. hàng đầuCách vẽ biểu đồ từ đường viền trên cùng bao xa
Loại. số hoặc chuỗi
Mặc định. tự động
khu vực biểu đồ. chiều rộngChiều rộng khu vực biểu đồ
Loại. số hoặc chuỗi
Mặc định. tự động
khu vực biểu đồ. Chiều caoChiều cao khu vực biểu đồ
Loại. số hoặc chuỗi
Mặc định. tự động
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.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }49
Loại. Mảng chuỗi
Mặc định. màu mặc định
kích hoạt tính tương tácLiệu biểu đồ đưa ra các sự kiện dựa trên người dùng hay phản ứng với tương tác của người dùng. 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
Loại. boolean
Mặc định. thật
cỡ chữKích thước phông chữ mặc định, tính bằng pixel, của tất cả văn bản trong biểu đồ. Bạn có thể ghi đè điều này bằng các thuộc tính cho các thành phần biểu đồ cụ thể
Loại. con số
Mặc định. tự động
tên phông chữMặt phông chữ mặc định cho tất cả văn bản trong biểu đồ. Bạn có thể ghi đè điều này bằng các thuộc tính cho các thành phần biểu đồ cụ thể
Loại. chuỗi
Mặc định. 'Arial'
buộcIFrameVẽ biểu đồ bên trong khung nội tuyến. [Lưu ý rằng trên IE8, tùy chọn này bị bỏ qua; tất cả các biểu đồ IE8 được vẽ trong i-frame. ]
Loại. boolean
Mặc định. sai
Chiều caoChiều cao của biểu đồ, tính bằng pixel
Loại. con số
Mặc định. chiều cao của phần tử chứa
is3DNếu đúng, hiển thị biểu đồ ba chiều
Loại. boolean
Mặc định. sai
huyền thoạiMộ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
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }2
Loại. vật
Mặc định. vô giá trị
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';
Loại. chuỗi
Mặc định. tự động
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' - Hiển thị chú giải bên dưới biểu đồ
- 'được gắn nhãn' - Vẽ các đường kết nối các lát cắt với các giá trị dữ liệu của chúng
- 'left' - Hiển thị chú giải bên trái của biểu đồ
- 'none' - Không hiển thị chú thích
- 'right' - Hiển thị chú thích bên phải của biểu đồ
- 'top' - Hiển thị chú giải phía trên biểu đồ
Loại. chuỗi
Mặc định. 'đúng'
huyền thoại. dòng tối đaSố dòng tối đa trong chú giải. Đặt số này thành một số lớn hơn một để thêm dòng vào chú thích của bạn. Ghi chú. Logic chính xác được sử dụng để xác định số dòng thực tế được hiển thị vẫn đang thay đổi
Tùy chọn này hiện chỉ hoạt động khi chú giải. vị trí là 'hàng đầu'
Loại. con số
Mặc định. 1
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
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }3
Ví dụ:
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }70 có thể là bất kỳ chuỗi màu HTML nào.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }43 hoặc
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }44. Xem thêm
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }73 và
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }74
Loại. vật
Mặc định.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }75lỗ bánh
Nếu từ 0 đến 1, hiển thị biểu đồ vành khuyên. Cái lỗ có bán kính bằng
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }76 lần bán kính của biểu đồ
Loại. con số
Mặc định. 0
bánhLátBiên giớiMàuMàu của các đường viền của lát cắt. Chỉ áp dụng khi biểu đồ là hai chiều
Loại. chuỗi
Mặc định. 'trắng'
bánhSliceVăn bảnNội dung văn bản hiển thị trên slice. Có thể là một trong những điều sau đây
- 'percentage' - Tỷ lệ phần trăm kích thước lát cắt trên tổng số
- 'giá trị' - Giá trị định lượng của lát cắt
- 'nhãn' - Tên của lát cắt
- 'none' - Không có văn bản nào được hiển thị
Loại. chuỗi
Mặc định. 'tỷ lệ phần trăm'
bánhSliceVăn bảnPhong cáchMột đối tượng chỉ định kiểu văn bản lát. Đố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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }4
Ví dụ:
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }70 có thể là bất kỳ chuỗi màu HTML nào.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }43 hoặc
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }44. Xem thêm
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }73 và
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }74
Loại. vật
Mặc định.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }75bánhBắt đầuGóc
Góc, tính bằng độ, để xoay biểu đồ theo. Giá trị mặc định của
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }23 sẽ định hướng cạnh ngoài cùng bên trái của lát cắt đầu tiên trực tiếp lên trên
Loại. con số
Mặc định.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }23đảo ngược Thể loại
Nếu đúng, vẽ các lát ngược chiều kim đồng hồ. Mặc định là vẽ theo chiều kim đồng hồ
Loại. boolean
Mặc định. sai
bánhCặnLátMàuMàu cho lát kết hợp giữ tất cả các lát bên dưới sliceVisibilityThreshold
Loại. chuỗi
Mặc định. '#ccc'
bánhCặnLátNhãnNhãn cho lát kết hợp chứa tất cả các lát bên dưới sliceVisibilityThreshold
Loại. chuỗi
Mặc định. 'Khác'
látMột mảng các đối tượng, mỗi đối tượng mô tả định dạng của lát cắt tương ứng trong chiếc bánh. Để sử dụng các giá trị mặc định cho một lát cắt, hãy chỉ định một đối tượng trống [i. e. ,
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }25]. Nếu một lát 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
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }
70 - Màu sử dụng cho lát cắt này. Chỉ định một chuỗi màu HTML hợp lệgoogle.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }
32 - Khoảng cách để tách miếng bánh ra khỏi phần còn lại của chiếc bánh, từ 0. 0 [hoàn toàn không] đến 1. 0 [bán kính của chiếc bánh]google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }
28 - Ghi đè toàn cầugoogle.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }
29 cho lát cắt này
Bạn có thể chỉ định một mảng các đối tượng, mỗi mảng áp dụng cho lát cắt theo thứ tự nhất định hoặc bạn có thể chỉ định một đối tượng trong đó mỗi đối tượng con có một phím số cho biết nó áp dụng cho lát cắt nào. Ví dụ: hai khai báo sau giống hệt nhau và khai báo lát cắt đầu tiên có màu đen và lát cắt thứ tư có màu đỏ
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }5
Loại. Mảng đối tượng hoặc đối tượng với các đối tượng lồng nhau
Mặc định. {}
sliceVisibilityThresholdGiá trị phân số của chiếc bánh, dưới đó một lát sẽ không hiển thị riêng lẻ. Tất cả các lát cắt chưa vượt qua ngưỡng này sẽ được kết hợp thành một lát cắt "Khác" duy nhất, có kích thước bằng tổng của tất cả các kích thước của chúng. Mặc định là không hiển thị riêng lẻ bất kỳ lát cắt nào nhỏ hơn nửa độ
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }6
Loại. con số
Mặc định. Nửa độ [. 5/360 hoặc 1/720 hoặc. 0014]
Tiêu đềVăn bản để hiển thị phía trên biểu đồ
Loại. chuỗi
Mặc định. Không tiêu đề
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
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }3
Ví dụ:
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }70 có thể là bất kỳ chuỗi màu HTML nào.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }43 hoặc
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }44. Xem thêm
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }73 và
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }74
Loại. vật
Mặc định.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }75chú 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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }8
Loại. 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
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }1, 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
Loại. 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 thông qua vai trò dữ liệu cột chú giải công cụ không được trực quan hóa Biểu đồ bong bóng hỗ trợ
Loại. 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 lát cắt trong chú giải công cụ
Loại. boolean
Mặc định. sai
chú giải công cụ. chữThông tin nào sẽ hiển thị khi người dùng di chuột qua một lát bánh. Các giá trị sau được hỗ trợ
- 'cả hai' - [Mặc định] Hiển thị cả giá trị tuyệt đối của lát cắt và tỷ lệ phần trăm của toàn bộ
- 'giá trị' - Chỉ hiển thị giá trị tuyệt đối của lát cắt
- 'percentage' - Chỉ hiển thị tỷ lệ phần trăm của tổng thể được đại diện bởi lát cắt
Loại. chuỗi
Mặc định. 'cả hai'
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
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }3
Ví dụ:
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }70 có thể là bất kỳ chuỗi màu HTML nào.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }43 hoặc
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }44. Xem thêm
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }73 và
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }74
Loại. vật
Mặc định.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }75chú giải công cụ. Kích hoạt
Tương tác của người dùng khiến chú giải công cụ được hiển thị
- '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ử
Loại. chuỗi
Mặc định. 'tiêu điểm'
chiều rộngChiều rộng của biểu đồ, tính bằng pixel
Loại. con số
Mặc định. chiều rộng của phần tử chứa
phương pháp
Phương pháp____283Vẽ 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
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }84 được kích hoạt.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }85
Loại trả lại. không ai
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }86
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }87 được yêu cầu
Loại trả lại. vật
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }88
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }89. Định dạng cho
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }89 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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }91
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }92Chiều rộng của thanh thứ ba trong chuỗi đầu tiên của biểu đồ thanh hoặc cộtgoogle.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }93Hộ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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }94Hộp giới hạn của dữ liệu biểu đồ của một . g. , biểu đồ cột.google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }95Khung 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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }96
Các giá trị có liên quan đến vùng chứa của biểu đồ. Gọi cái này sau khi biểu đồ được vẽ
Loại trả lại. vật
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }97
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ú thích]
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }91
______299google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }00google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }01google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }02
Các giá trị có liên quan đến vùng chứa của biểu đồ. Gọi cái này sau khi biểu đồ được vẽ
Loại trả lại. vật
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }03
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }
04google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }
05google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }
06google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }
07google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }
08google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }
09
Gọi điều này sau khi biểu đồ được vẽ
Loại trả lại. vật
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }10
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }11, 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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }12
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }13
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. chuỗi
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }14
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 lát cắt và các mục chú thích. Đố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.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }85
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }16
Trả về giá trị dữ liệu theo chiều dọc tại
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }17, là pixel được dịch chuyển xuống từ 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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }18
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }19
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }20 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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }21
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }22
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }20 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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }24
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }25
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }87 đượ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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }27
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }28
Đặ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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }29 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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }89— 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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }31 —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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }32 — 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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }33 của biểu đồ. Mô tả mở rộng
Loại trả lại.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }27
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }35
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 lát cắt và các mục chú thích. Đối với biểu đồ này, mỗi lần chỉ có thể chọn một thực thể.
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }85
Loại trả lại. không ai
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }37
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 ai
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ên____638Đượ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
Tính chất. ID mục tiêu
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }39
Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ
Tính chất. id, tin nhắn
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }40
Đượ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 lát cắt hoặc mục nhập chú giải tương quan với một hàng trong bảng dữ liệu [chỉ mục cột là null]
Tính chất. hàng, cột
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }41
Đượ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 lát cắt hoặc mục nhập chú giải tương quan với một hàng trong bảng dữ liệu [chỉ mục cột là null]
Tính chất. hàng, cột
google.charts.load["current", {packages:["corechart"]}]; google.charts.setOnLoadCallback[drawChart]; function drawChart[] { var data = google.visualization.arrayToDataTable[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart[document.getElementById['donutchart']]; chart.draw[data, options]; }84
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[[ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]]; var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart[document.getElementById['piechart_3d']]; chart.draw[data, options]; }43 và chỉ gọi chúng sau khi sự kiện được kích hoạt