簡介
使用 SVG 或 VML 在瀏覽器中轉譯的圓餅圖。將遊標懸停在配量上時顯示工具提示。
範例
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['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); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
製作 3D 圓餅圖
如果將 is3D
選項設為 true
,則系統會繪製出 3 維度的圓餅圖:
is3D
預設為 false
,因此我們明確將其設為 true
:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['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); } </script> </head> <body> <div id="piechart_3d" style="width: 900px; height: 500px;"></div> </body> </html>
製作圓環圖
圓環圖是中間有一個孔的圓餅圖。您可以使用 pieHole
選項建立圓環圖:
pieHole
選項應設為介於 0 至 1 之間的數字,對應空洞與圖表之間的半徑比率。0.4 到 0.6 之間的數字最適合大多數圖表。
系統會忽略等於或大於 1 的值,如果將值設為 0,則會完全關閉您的雙眼。
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['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); } </script> </head> <body> <div id="donutchart" style="width: 900px; height: 500px;"></div> </body> </html>
您無法合併 pieHole
和 is3D
選項,否則系統會忽略 pieHole
。
請注意,Google Charts 會盡可能將標籤放置於靠近區塊中央的位置。如果只有一片甜甜圈圖表,該部分的中央可能會落在甜甜圈孔中。在此情況下,請變更標籤的顏色:
var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' };
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Effort', 'Amount given'], ['My all', 100], ]); var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' }; var chart = new google.visualization.PieChart(document.getElementById('donut_single')); chart.draw(data, options); } </script> </head> <body> <div id="donut_single" style="width: 900px; height: 500px;"></div> </body> </html>
旋轉圓餅圖
根據預設,圓餅圖會從第一個區塊的左側邊緣往上朝直。您可以透過 pieStartAngle
選項變更這項設定:
此處,我們透過 pieStartAngle: 100
選項,順時針旋轉圖表 100 度。(因此選擇特定角度,讓「義大利」標籤符合 Slice 的尺寸)。
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['German', 5.85], ['French', 1.66], ['Italian', 0.316], ['Romansh', 0.0791] ]); var options = { legend: 'none', pieSliceText: 'label', title: 'Swiss Language Use (100 degree rotation)', pieStartAngle: 100, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
爆炸切片
您可以使用 slices
選項的 offset
屬性來區隔圓餅圖和圖表的其餘部分:
如要分割配量,請建立 slices
物件,並將介於 0 至 1 之間的適當切片編號為 offset
。在下方,我們會為第 4 段 (古吉拉特)、第 12 節 (馬拉提)、第 14 節 (奧里雅文) 和第 15 節 (旁遮普文) 指派更大的偏移值:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Language', 'Speakers (in millions)'], ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4], ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300], ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5], ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5], ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33], ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5], ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52] ]); var options = { title: 'Indian Language Use', legend: 'none', pieSliceText: 'label', slices: { 4: {offset: 0.2}, 12: {offset: 0.3}, 14: {offset: 0.4}, 15: {offset: 0.5}, }, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
移除 Slice
如要省略配量,請將顏色變更為 'transparent'
:
我們還使用 pieStartAngle
將圖表旋轉 135 度、使用 pieSliceText
移除片段中的文字,以及使用 tooltip.trigger
停用工具提示:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Pac Man', 'Percentage'], ['', 75], ['', 25] ]); var options = { legend: 'none', pieSliceText: 'none', pieStartAngle: 135, tooltip: { trigger: 'none' }, slices: { 0: { color: 'yellow' }, 1: { color: 'transparent' } } }; var chart = new google.visualization.PieChart(document.getElementById('pacman')); chart.draw(data, options); } </script> </head> <body> <div id="pacman" style="width: 900px; height: 500px;"></div> </body> </html>
區塊瀏覽權限門檻
您可以設定一個值來當做一個圓餅圖區塊的門檻。這個值對應圖表的某個部分 (整個圖表的值為 1)。若要將這個門檻設為整體的百分比,請將百分比除以 100 (20% 的門檻值為 0.2)。
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
系統會將小於這個門檻的所有 Slice 合併成單一「其他」區段,並將所有區塊的門檻值低於門檻值。
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Pizza'); data.addColumn('number', 'Populartiy'); data.addRows([ ['Pepperoni', 33], ['Hawaiian', 26], ['Mushroom', 22], ['Sausage', 10], // Below limit. ['Anchovies', 9] // Below limit. ]); var options = { title: 'Popularity of Types of Pizza', sliceVisibilityThreshold: .2 }; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }
載入中
google.charts.load
套件名稱為 "corechart"
。
google.charts.load("current", {packages: ["corechart"]});
視覺化的類別名稱是 google.visualization.PieChart
。
var visualization = new google.visualization.PieChart(container);
資料格式
列:表格中的每一列都代表一個配量。
欄:
第 0 欄 | 第 1 欄 | … | N 欄 (選填) | |
---|---|---|---|---|
用途: | Slice 標籤 | Slice 值 | … | 選用角色 |
資料類型: | string | 數字 | … | |
角色: | 網域 | 資料 | … | |
選用的資料欄角色: | 無 | 無 | … |
設定選項
名稱 | |
---|---|
backgroundColor |
圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串,例如 類型:字串或物件
預設:「white」
|
背景色彩 |
圖表邊框的顏色,以 HTML 顏色字串表示。 類型:字串
預設值:「#666」
|
背景色彩.筆寬度 |
框線寬度 (單位為像素)。 類型:數字
預設:0
|
background..fill |
圖表會以 HTML 色彩字串填入顏色。 類型:字串
預設:「white」
|
圖表區域 |
擁有成員可設定圖表區域位置和大小的物件 (繪製圖表本身的位置,不含軸和圖例)。系統支援數字格式:範例: 類型:物件
預設值:空值
|
圖表區域 |
圖表區域背景顏色。使用字串時,可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時,您可以提供下列屬性:
類型:字串或物件
預設:「white」
|
圖表區域 |
從左框線繪製圖表的程度。 類型:數字或字串
預設:自動
|
排行榜區域 |
從上方邊框繪製圖表的程度。 類型:數字或字串
預設:自動
|
圖表區域 |
圖表區域寬度。 類型:數字或字串
預設:自動
|
圖表區域 |
圖表區域高度。 類型:數字或字串
預設:自動
|
顏色 |
圖表元素的顏色。字串陣列,其中每個元素都是 HTML 顏色字串,例如: 類型:字串陣列
預設:預設顏色
|
啟用互動功能 |
圖表是否擲回了以使用者為主的事件或回應使用者互動。設為 False 時,圖表不會擲回「選取」或其他以互動為基礎的事件 (但會「擲出就緒」或「錯誤」的事件),而且不會顯示使用者的文字,或是隨著使用者輸入的內容而改變。 類型:布林值
預設:是
|
字型大小 |
圖表中所有文字的預設字型大小 (以像素為單位)。您可以使用特定圖表元素的屬性覆寫這項設定。 類型:數字
預設:自動
|
字型名稱 |
圖表中所有文字的預設字型。您可以使用特定圖表元素的屬性覆寫這項設定。 類型:字串
預設:「Arial」
|
ForceIFrame |
在內嵌頁框中繪製圖表。(請注意,在 IE8 中,系統會忽略此選項;所有 IE8 圖表都會以 i-frames 繪製)。 類型:布林值
預設值:false
|
height |
圖表的高度,以像素為單位。 類型:數字
預設:所含元素的高度
|
is3D |
如為 true,則會顯示 3D 圖表。 類型:布林值
預設值:false
|
傳說 |
包含成員,用於設定圖例各個層面的物件。若要指定此物件的屬性,您可以使用物件常值標記法,如下所示: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} 類型:物件
預設值:空值
|
圖例.alignment |
圖例的對齊方式。可能是下列其中一項:
起始、置中和結束點與圖例的樣式 (垂直或水平) 有關。舉例來說,在「右」圖例中,「start」和「end」分別位於頂端和底部;如果是「top」圖例,「start」和「end」將分別位於該地區的左側和右側。 預設值取決於圖例的位置。如果是「bottom」圖例,預設值為「center」,其他圖例預設為「start」。 類型:字串
預設:自動
|
圖例.position |
圖例的位置。可能是下列其中一項:
類型:字串
預設值:「right」
|
圖例.maxLines |
圖例所含行數上限。請將這個值設為大於一的數字,在圖例中新增線條。注意事項:用於判斷實際行數的確切邏輯仍處於通量。 這個選項目前僅適用於圖例的「top」為「top」。 類型:數字
預設:1
|
圖例.textStyle |
指定圖例文字樣式的物件。物件採用以下格式: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
類型:物件
預設:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
PieHole |
如果介於 0 到 1 之間,系統會顯示圓環圖。其半徑等於圖表半徑的 類型:數字
預設:0
|
派餅 |
配色框線的顏色。只有在圖表是 2D 的情況下才適用。 類型:字串
預設:「white」
|
pieSlice 文字 |
配量中顯示的文字內容。可能是下列其中一項:
類型:字串
預設值:「percentage」
|
圓餅文字文字樣式 |
指定切片文字樣式的物件。物件採用以下格式: {color: <string>, fontName: <string>, fontSize: <number>}
類型:物件
預設:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
圓餅館 |
旋轉角度的角度 (以度為單位)。 類型:數字
預設:
0 |
反向類別 |
如為 true,則逆時針繪製 Slice。預設設定為順時針繪製。 類型:布林值
預設值:false
|
pieResidueSliceColor |
用於將 sliceVisibilityThreshold 以下所有區塊的組合配色的顏色。 類型:字串
預設值:「#ccc」
|
pieResidueSliceLabel |
組合配量的標籤,用於存放低於 sliceVisibilityThreshold 的所有配量。 類型:字串
預設:「其他」
|
Slice |
物件陣列,每個物件會說明圓餅中對應切片的格式。如要使用 Slice 預設值,請指定空白物件 (例如
您可以指定物件陣列,每個物件都按指定順序套用至各區塊,或是指定一個物件,其中每個子項都有一個數值索引鍵,以標明其套用的區塊。舉例來說,下列兩個宣告相同,且將第一段宣告為黑色,第四項宣告為紅色: slices: [{color: 'black'}, {}, {}, {color: 'red'}] slices: {0: {color: 'black'}, 3: {color: 'red'}} 類型:物件陣列,或包含巢狀物件的物件
預設: {}
|
配銷顯示設定門檻 |
圓餅的分數值,我們不會在區塊下方顯示個別片段。所有未達到這個門檻的部分都會合併為單一「其他」區段,其大小代表所有大小的總和。預設設定不是單獨顯示任何小於半度的配量。 // Slices less than 25% of the pie will be // combined into an "Other" slice. sliceVisibilityThreshold: .25 類型:數字
預設:雙度 (.5/360、1/720 或 .0014)
|
title |
圖表上方顯示的文字。 類型:字串
預設:無標題
|
標題文字樣式 |
指定標題文字樣式的物件。物件採用以下格式: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
類型:物件
預設:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
工具提示 |
擁有成員可設定各種工具提示元素的物件。若要指定此物件的屬性,您可以使用物件常值標記法,如下所示: {textStyle: {color: '#FF0000'}, showColorCode: true} 類型:物件
預設值:空值
|
tooltip.ignoreBounds |
如果設為 注意:這僅適用於 HTML 工具提示。如果您透過 SVG 工具提示啟用此功能,系統會忽略圖表邊界以外的溢位。詳情請參閱自訂工具提示內容。 類型:布林值
預設值:false
|
tooltip.isHtml |
設為 True 時,請使用 HTML 轉譯 (而非 SVG 轉譯) 工具提示。詳情請參閱自訂工具提示內容。 注意:「說明圖示圖表」不支援透過工具提示資料欄資料角色自訂 HTML 工具提示內容。 類型:布林值
預設值:false
|
tooltip.showColorCode |
如為 true,則在工具提示中的資訊部分旁邊顯示彩色正方形。 類型:布林值
預設值:false
|
tooltip.text |
當使用者將滑鼠遊標懸停在圓餅圖區塊上時,可以看到哪些資訊。可支援下列值:
類型:字串
預設:「兩者」
|
tooltip.text 樣式 |
指定工具提示文字樣式的物件。物件採用以下格式: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
類型:物件
預設:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
顯示工具提示的使用者互動:
類型:字串
預設值:「focus」
|
width |
圖表的寬度 (以像素為單位)。 類型:數字
預設:內含元素的寬度
|
方法
方法 | |
---|---|
draw(data, options) |
繪製圖表。只有在 傳回類型:無
|
getAction(actionID) |
傳回具有要求的 傳回類型:物件
|
getBoundingBox(id) |
傳回包含圖表元素
值是相對於圖表容器。在繪製圖表「之後」呼叫此方法。 傳回類型:物件
|
getChartAreaBoundingBox() |
傳回含有圖表內容左側、頂端、寬度和高度的物件 (也就是排除標籤和圖例):
值是相對於圖表容器。在繪製圖表「之後」呼叫此方法。 傳回類型:物件
|
getChartLayoutInterface() |
傳回一個物件,其中包含圖表及其螢幕位置的相關資訊。 下列方法可在傳回的物件上呼叫:
在繪製圖表「之後」呼叫此方法。 傳回類型:物件
|
getHAxisValue(xPosition, optional_axis_index) |
傳回 範例: 在繪製圖表「之後」呼叫此方法。 傳回類型:數字
|
getImageURI() |
傳回序列化為圖片 URI 的圖表。 在繪製圖表「之後」呼叫此方法。 請參閱列印 PNG 圖表。 傳回類型:字串
|
getSelection() |
傳回所選圖表實體的陣列。可選取的實體是切片和圖例項目。這張圖表在任何時間點都只能選取一個實體。
傳回類型:選取元素陣列
|
getVAxisValue(yPosition, optional_axis_index) |
傳回 範例: 在繪製圖表「之後」呼叫此方法。 傳回類型:數字
|
getXLocation(dataValue, optional_axis_index) |
傳回 範例: 在繪製圖表「之後」呼叫此方法。 傳回類型:數字
|
getYLocation(dataValue, optional_axis_index) |
傳回 範例: 在繪製圖表「之後」呼叫此方法。 傳回類型:數字
|
removeAction(actionID) |
從要求中移除具有要求的 傳回類型:
none |
setAction(action) |
設定在使用者點選動作文字時要執行的工具提示動作。
您必須在呼叫圖表的 傳回類型:
none |
setSelection() |
選取指定的圖表實體。取消先前選取的項目。
可選取的實體是切片和圖例項目。在這份圖表中,您一次只能選取一個實體。 傳回類型:無
|
clearChart() |
清除圖表並釋出其分配的所有資源。 傳回類型:無
|
活動
如要進一步瞭解如何使用這些事件,請參閱基本互動、處理事件和觸發事件。
名稱 | |
---|---|
click |
使用者點選圖表時觸發。可用於識別標題、資料元素、圖例項目、軸、軸線或標籤的點選時間。 屬性:targetID
|
error |
嘗試轉譯圖表時發生錯誤。 屬性:ID、訊息
|
onmouseover |
當使用者將滑鼠遊標移到視覺實體上時觸發。傳回對應資料表元素的列索引和欄索引。配量或圖例項目與資料表中的資料列相關聯 (資料欄索引為空值)。 屬性:資料列、資料欄
|
onmouseout |
當使用者離開視覺實體時觸發。傳回對應資料表元素的列索引和欄索引。配量或圖例項目與資料表中的資料列相關聯 (資料欄索引為空值)。 屬性:資料列、資料欄
|
ready |
圖表可供外部方法呼叫使用。如果您想要與圖表互動,並在繪製圖表後呼叫方法,請先為這個事件設定監聽器,然後再呼叫 屬性:無
|
select |
使用者點選視覺實體時觸發。如要瞭解所選項目,請呼叫 屬性:無
|
資料政策
系統會處理所有程式碼和資料,並在瀏覽器中顯示。系統不會將資料傳送至任何伺服器。