總覽
使用 SVG 或 VML 在瀏覽器中算繪的圓餅圖。將滑鼠遊標懸停在 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([ ['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
,則圓餅圖會繪製成三個維度:
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 圖表會盡可能將標籤放置在最靠近片段中心的位置。如果圓環圖只有一個切片,切片的中心可能會落入圓環圖中。在此情況下,您可以變更標籤的顏色:
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 度。(因此選擇了這個特定角度,以便讓「義大利文」標籤符合片段內)。
<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>
爆破 Slice
您可以使用 slices
選項的 offset
屬性,將圓餅區塊與其他圖表的其他部分分開:
如要分隔切片,請建立 slices
物件,並指派介於 0 至 1 之間的 offset
。下方,我們會逐步為切片 4 (古吉拉特文)、12 (馬拉地文)、14 (Oriya) 和 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.
小於這個門檻的任何切片都會合併為單一「其他」配量,並匯總低於門檻的所有配量值。
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 欄 (選用) | |
---|---|---|---|---|
用途: | 配量標籤 | 配量值 | ... | 選用角色 |
資料類型: | 字串 | 號碼 | ... | |
角色: | 網域 | 資料 | ... | |
選用的資料欄角色: | 無 | 無 | ... |
設定選項
名稱 | |
---|---|
backgroundColor |
圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串 (例如 類型:字串或物件
預設:「white」
|
backgroundColor.stroke |
圖表邊框顏色,以 HTML 顏色字串表示。 類型:字串
預設值:「#666」
|
backgroundColor.strokeWidth |
邊框寬度 (以像素為單位)。 類型:數字
預設值:0
|
backgroundColor.fill |
圖表填滿顏色,以 HTML 顏色字串表示。 類型:字串
預設:「white」
|
chartArea |
此物件可讓成員設定圖表區域的位置和大小 (繪製圖表時不含軸和圖例)。系統支援兩種格式:一個數字,或後接 % 的數字。簡單數字是以像素為單位的值,數字後面加上 % 代表百分比。範例: 類型:物件
預設值:null
|
chartArea.backgroundColor |
圖表區域背景顏色。使用字串時,可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時,可以提供下列屬性:
類型:字串或物件
預設:「white」
|
chartArea.left |
從左框線繪製圖表的時間長度。 類型:數字或字串
預設:自動
|
chartArea.top |
圖表與上框線的繪製距離。 類型:數字或字串
預設:自動
|
chartArea.width |
圖表區域寬度。 類型:數字或字串
預設:自動
|
chartArea.height |
圖表區域高度。 類型:數字或字串
預設:自動
|
顏色 |
圖表元素要使用的顏色。字串陣列,其中每個元素都是 HTML 顏色字串,例如: 類型:字串陣列
預設:預設顏色
|
enableInteractivity |
圖表是否會擲回以使用者為基礎的事件,或是對使用者互動做出反應。如果設為 False,圖表不會擲回「select」或其他互動型事件 (但「會」擲回已就緒或錯誤的事件),且不會顯示懸停文字,或根據使用者輸入內容而變更。 類型:布林值
預設值:true
|
fontSize |
圖表中所有文字的預設字型大小 (以像素為單位)。您可以使用特定圖表元素的屬性覆寫這項設定。 類型:數字
預設:自動
|
fontName |
圖表中所有文字的預設字型。您可以使用特定圖表元素的屬性覆寫這項設定。 類型:字串
預設值:「trigger」
|
forceIFrame |
在內嵌頁框中繪製圖表。(請注意,在 IE8 中,系統會忽略此選項;所有 IE8 圖表都會繪製成 iFrame。) 類型:布林值
預設值:false
|
高度 |
圖表的高度,以像素為單位。 類型:數字
預設:所含元素的高度
|
是 3D |
如果為 true,則顯示 3D 圖表。 類型:布林值
預設值:false
|
傳說 |
由成員組成的物件,可設定圖例的各個層面。如要指定這個物件的屬性,您可以使用物件常值標記法,如下所示: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} 類型:物件
預設值:null
|
legend.alignment |
圖例的對齊。可以是下列其中一項:
起點、中心和結束點是以圖例的樣式 (垂直或水平) 為準。舉例來說,在「右側」圖例中,「start」和「end」分別位於頂端和底部。如果是「頂端」圖例,「start」和「end」則分別位於區域的左側和右側。 預設值取決於圖例位置。「bottom」圖例的預設值為「center」,其他圖例則預設為「start」。 類型:字串
預設:自動
|
legend.position |
圖例位置。可以是下列其中一項:
類型:字串
預設值:「right」
|
legend.maxLines |
圖例中的行數上限。將這個項目設為大於一的數字,即可為圖例新增線條。請注意:決定實際算繪行數的確切邏輯仍在浮動中。 此選項目前僅適用於圖例.position 為「top」時。 類型:數字
預設值:1
|
legend.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
|
pieSliceBorderColor |
切片邊框的顏色。只有在圖表為二維圖表時才能使用。 類型:字串
預設:「white」
|
pieSliceText |
片段上顯示的文字內容。可以是下列其中一項:
類型:字串
預設:「percentage」
|
pieSliceTextStyle |
指定片段文字樣式的物件。物件的格式如下: {color: <string>, fontName: <string>, fontSize: <number>}
類型:物件
預設:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
pieStartAngle |
讓圖表旋轉的角度 (以度為單位)。 類型:數字
預設:
0 |
reverseCategories |
如果為 true,會逆時針繪製切片。預設為順時針繪製。 類型:布林值
預設值:false
|
pieResidueSliceColor |
包含 sliceVisibilityThreshold 以下所有配量的組合區塊顏色。 類型:字串
預設: '#ccc'
|
pieResidueSliceLabel |
組合片段的標籤,其中包含 sliceVisibilityThreshold 以下的所有切片。 類型:字串
預設:「其他」
|
切片 |
物件的陣列,每個物件都會說明圓餅圖中對應片段的格式。如果要針對配量使用預設值,請指定空白物件 (即
您可以指定物件的陣列,其中每個陣列都會依指定順序套用至配量,或者也可以指定物件,讓每個子項都有數字鍵代表要套用至哪一個切片。例如,以下兩個宣告完全相同,並將第一個切片宣告為黑色,第四個片段則宣告為紅色: slices: [{color: 'black'}, {}, {}, {color: 'red'}] slices: {0: {color: 'black'}, 3: {color: 'red'}} 類型:物件陣列,或含有巢狀物件的物件
預設:{}
|
sliceVisibilityThreshold |
圓餅圖的分數值,低於該圓餅圖不會單獨顯示。凡是未超過這個門檻的配量,都會合併到單一「其他」扇區,其大小為所有大小的總和。預設不會個別顯示任何小於一半的切片。 // Slices less than 25% of the pie will be // combined into an "Other" slice. sliceVisibilityThreshold: .25 類型:數字
預設:半一度 (.5/360 或 1/720 或 .0014)
|
title |
顯示在圖表上方的文字。 類型:字串
預設:無標題
|
titleTextStyle |
指定標題文字樣式的物件。物件的格式如下: { 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} 類型:物件
預設值:null
|
tooltip.ignoreBounds |
如果設為 注意:這僅適用於 HTML 工具提示。透過 SVG 工具提示啟用這項功能時,系統會裁剪圖表邊界外的所有溢位。詳情請參閱「自訂工具提示內容」一文。 類型:布林值
預設值:false
|
tooltip.isHtml |
如果設為 true,將使用 HTML 算繪 (而非 SVG 算繪) 的工具提示。詳情請參閱「自訂工具提示內容」一文。 注意:泡泡圖圖表「不」支援透過工具提示欄資料角色自訂 HTML 工具提示內容。 類型:布林值
預設值:false
|
tooltip.showColorCode |
設為 true 時,在工具提示中的配量資訊旁邊顯示彩色方塊。 類型:布林值
預設值:false
|
tooltip.text |
當使用者將滑鼠遊標懸停在圓餅區塊上時,要顯示的資訊。支援下列值:
類型:字串
預設:「secondary」
|
tooltip.textStyle |
指定工具提示文字樣式的物件。物件的格式如下: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
類型:物件
預設:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
觸發工具提示的使用者互動:
類型:字串
預設:「focus」
|
寬度 |
圖表的寬度,以像素為單位。 類型:數字
預設:所含元素的寬度
|
方法
方法 | |
---|---|
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 |
在使用者點選視覺實體時觸發。如要瞭解已選取的項目,請呼叫 屬性:無
|
資料政策
所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。