總覽
使用 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(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="series_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
以數字表示的顏色
您可以使用 colorAxis 選項，依值比例為泡泡上色，如下例所示。
<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([
['ID', 'X', 'Y', 'Temperature'],
['', 80, 167, 120],
['', 79, 136, 130],
['', 78, 184, 50],
['', 72, 278, 230],
['', 81, 200, 210],
['', 72, 170, 100],
['', 68, 477, 80]
]);
var options = {
colorAxis: {colors: ['yellow', 'red']}
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
自訂標籤
您可以使用 bubble.textStyle 選項控制對話框的字體、字型和顏色：
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
fontSize: 12,
fontName: 'Times-Roman',
color: 'green',
bold: true,
italic: true
}
}
};
<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([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
fontSize: 12,
fontName: 'Times-Roman',
color: 'green',
bold: true,
italic: true
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="textstyle" style="width: 900px; height: 500px;"></div>
</body>
</html>
上圖中的標籤難以閱讀，其中一個原因在於標籤周圍的空白字元。這種做法稱為「aura」。如果您希望在沒有圖表的情況下查看圖表，可以將 bubble.textStyle.auraColor 設為 'none'。
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
auraColor: 'none'
}
}
};
<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([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
auraColor: 'none',
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="noAura" style="width: 900px; height: 500px;"></div>
</body>
</html>
載入中
google.charts.load 套件名稱為 "corechart"。
google.charts.load("current", {packages: ["corechart"]});
視覺呈現的類別名稱為 google.visualization.BubbleChart。
var visualization = new google.visualization.BubbleChart(container);
資料格式
列：表格中的每一列都代表一個泡泡。
資料欄：
| 第 0 欄 | 第 1 欄 | 第 2 欄 | 第 3 欄 (選填) | 第 4 欄 (選填) | |
|---|---|---|---|---|---|
| 用途： | 泡泡的 ID (名稱) | X 座標 | Y 座標 | 視資料欄類型而定，可以是序列 ID，或是代表漸層比例上顏色的值：
|
大小；這個欄中的值會使用 sizeAxis 選項對應至實際的像素值。 |
| 資料類型： | 字串 | 號碼 | 號碼 | 字串或數字 | 號碼 |
設定選項
| 名稱 | |
|---|---|
| animation.duration |
此為動畫的時間長度，以毫秒為單位。詳情請參閱動畫說明文件。 類型：數字
預設值：0
|
| animation.easing |
套用至動畫的加/減速功能。可用選項如下所示：
類型：字串
預設：「線性」
|
| animation.startup |
指定圖表是否會在初次繪圖時顯示動畫。如果設為 類型：布林值
預設 false
|
| axisTitlesPosition |
比較軸標題和圖表區域的位置。支援的值：
類型：字串
預設值：「out」
|
| backgroundColor |
圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串 (例如 類型：字串或物件
預設：「white」
|
| backgroundColor.stroke |
圖表邊框顏色，以 HTML 顏色字串表示。 類型：字串
預設值：「#666」
|
| backgroundColor.strokeWidth |
邊框寬度 (以像素為單位)。 類型：數字
預設值：0
|
| backgroundColor.fill |
圖表填滿顏色，以 HTML 顏色字串表示。 類型：字串
預設：「white」
|
| 泡泡 |
包含成員的物件，可設定泡泡的視覺屬性。 類型：物件
預設值：null
|
| bubble.opacity |
泡泡的不透明度，0 表示完全透明，1 表示完全不透明。 類型：介於 0.0 和 1.0 之間的數字
預設值：0.8
|
| bubble.stroke |
泡泡筆觸的顏色。 類型：字串
預設： '#ccc'
|
| bubble.textStyle |
指定對話框文字樣式的物件。物件的格式如下： {color: <string>, fontName: <string>, fontSize: <number>}
類型：物件
預設：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| chartArea |
此物件可讓成員設定圖表區域的位置和大小 (繪製圖表時不含軸和圖例)。系統支援兩種格式：一個數字，或後接 % 的數字。簡單數字是以像素為單位的值，數字後面加上 % 代表百分比。範例： 類型：物件
預設值：null
|
| chartArea.backgroundColor |
圖表區域背景顏色。使用字串時，可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時，可以提供下列屬性：
類型：字串或物件
預設：「white」
|
| chartArea.left |
從左框線繪製圖表的時間長度。 類型：數字或字串
預設：自動
|
| chartArea.top |
圖表與上框線的繪製距離。 類型：數字或字串
預設：自動
|
| chartArea.width |
圖表區域寬度。 類型：數字或字串
預設：自動
|
| chartArea.height |
圖表區域高度。 類型：數字或字串
預設：自動
|
| 顏色 |
圖表元素要使用的顏色。字串陣列，其中每個元素都是 HTML 顏色字串，例如： 類型：字串陣列
預設：預設顏色
|
| colorAxis |
這個物件可指定顏色資料欄值與顏色或漸層比例之間的對應關係。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示： {minValue: 0, colors: ['#FF0000', '#00FF00']}
類型：物件
預設值：null
|
| colorAxis.minValue |
如果有出現，可指定圖表顏色資料的最小值。這個值及較低的顏色資料值會算繪為 類型：數字
預設值：圖表資料中顏色欄的最小值
|
| colorAxis.maxValue |
如果有出現，就可以指定圖表顏色資料的最大值。這個值及較高的顏色資料值會轉譯為 類型：數字
預設：圖表資料中顏色欄的最大值
|
| colorAxis.values |
如果有，即可控管值與顏色的關聯方式。每個值都會與 類型：數字陣列
預設值：null
|
| colorAxis.colors |
要在圖表中指派給值的顏色。字串陣列，其中每個元素都是 HTML 顏色字串，例如： 類型：色彩字串陣列
預設值：null
|
| colorAxis.legend |
這個物件可指定漸層色彩圖例樣式。 類型：物件
預設值：null
|
| colorAxis.legend.position |
圖例位置。可以是下列其中一項：
類型：物件
預設： 'top'
|
| colorAxis.legend.textStyle |
指定圖例文字樣式的物件。物件的格式如下： {color: <string>, fontName: <string>, fontSize: <number>}
類型：物件
預設：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| colorAxis.legend.numberFormat |
數字標籤的格式字串。這是
ICU 模式集
的子集。舉例來說， 類型：字串
預設：自動
|
| enableInteractivity |
圖表是否會擲回以使用者為基礎的事件，或是對使用者互動做出反應。如果設為 False，圖表不會擲回「select」或其他互動型事件 (但「會」擲回已就緒或錯誤的事件)，且不會顯示懸停文字，或根據使用者輸入內容而變更。 類型：布林值
預設值：true
|
| explorer |
這項功能仍在實驗階段，未來版本可能會有所異動。 注意：多層檢視僅適用於連續軸 (例如數字或日期)。 類型：物件
預設值：null
|
| explorer.actions |
Google 圖表探索工具支援三種操作：
類型：字串陣列
預設：['dragToPan', 'rightClickToReset']
|
| explorer.axis |
根據預設，使用 類型：字串
預設：水平和垂直平移
|
| explorer.keepInBounds |
根據預設，無論資料位於何處，使用者都可以平移所有內容。如要確保使用者不會平移超出原始圖表範圍，請使用 類型：布林值
預設值：false
|
| explorer.maxZoomIn |
探險家可放大的上限。根據預設，使用者可以放大到足夠的畫面，只會看到原始檢視畫面的 25%。設定 類型：數字
預設值：0.25
|
| explorer.maxZoomOut |
探險家可縮小的最大範圍。根據預設，使用者可以縮小到夠大的範圍，讓圖表只佔用 1/4 的可用空間。如果設定 類型：數字
預設：4
|
| explorer.zoomDelta |
使用者放大或縮小時， 類型：數字
預設值：1.5
|
| fontSize |
圖表中所有文字的預設字型大小 (以像素為單位)。您可以使用特定圖表元素的屬性覆寫這項設定。 類型：數字
預設：自動
|
| fontName |
圖表中所有文字的預設字型。您可以使用特定圖表元素的屬性覆寫這項設定。 類型：字串
預設值：「trigger」
|
| forceIFrame |
在內嵌頁框中繪製圖表。(請注意，在 IE8 中，系統會忽略此選項；所有 IE8 圖表都會繪製成 iFrame。) 類型：布林值
預設值：false
|
| hAxis |
可讓成員設定各種水平軸元素的物件。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
類型：物件
預設值：null
|
| hAxis.baseline |
橫軸的基準線。 類型：數字
預設：自動
|
| hAxis.baselineColor |
水平軸的基準顏色。可以是任何 HTML 顏色字串，例如 類型：數字
預設：「black」
|
| hAxis.direction |
沿著水平軸的值成長的方向。指定 類型：1 或 -1
預設值：1
|
| hAxis.format |
數字軸標籤的格式字串。這是
ICU 模式集
的子集。舉例來說，
套用至標籤的實際格式是衍生自載入 API 時使用的語言代碼。詳情請參閱「 載入特定語言代碼的圖表 」。
計算刻點值和格線時，系統會考慮所有相關格線選項的幾種替代組合，如果格式化的刻點標籤重複或重疊，系統會拒絕替代組合。因此，如果您只想顯示整數刻點值，則可以指定 類型：字串
預設：自動
|
| hAxis.gridlines |
具有屬性，可設定水平軸格線的物件。請注意，水平軸格線是垂直繪製的。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示： {color: '#333', minSpacing: 20}
類型：物件
預設值：null
|
| hAxis.gridlines.color |
圖表區域中的水平格線顏色。指定有效的 HTML 顏色字串。 類型：字串
預設：「#CCC」
|
| hAxis.gridlines.count |
圖表區域中的水平格線約略數量。
如果為 類型：數字
預設：-1
|
| hAxis.gridlines.units |
將日期/日期時間/時間資料類型與圖表計算的格線搭配使用時，覆寫預設格式。允許格式化年、月、日、小時、分鐘、秒鐘和毫秒。 一般格式為：
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
詳情請參閱日期和時間。 類型：物件
預設值：null
|
| hAxis.minorGridlines |
此物件可讓成員在水平軸上設定次要格線，與 hAxis.gridlines 選項類似。 類型：物件
預設值：null
|
| hAxis.minorGridlines.color |
圖表區域中的水平小格線顏色。指定有效的 HTML 顏色字串。 類型：字串
預設：使用格線與背景顏色混合
|
| hAxis.minorGridlines.count |
類型：數字
預設值：1
|
| hAxis.minorGridlines.units |
與計算的次要格線搭配使用時，覆寫日期/日期時間/時間資料類型各個面向的預設格式。允許格式化年、月、日、小時、分鐘、秒鐘和毫秒。 一般格式為：
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
詳情請參閱日期和時間。 類型：物件
預設值：null
|
| hAxis.logScale |
類型：布林值
預設值：false
|
| hAxis.scaleType |
類型：字串
預設值：null
|
| hAxis.textPosition |
橫軸文字相對於圖表區域的位置。支援的值：「out」、「in」、「none」。 類型：字串
預設值：「out」
|
| hAxis.textStyle |
這個物件會指定水平軸文字樣式。物件的格式如下：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
類型：物件
預設：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.ticks |
將自動產生的 X 軸刻點替換為指定的陣列。陣列的每個元素應為有效的刻點值 (例如數字、日期、時間或時間) 或物件。如果是物件，則應提供用於刻點值的
除非您指定要覆寫的 例：
類型：元素陣列
預設：自動
|
| hAxis.title |
類型：字串
預設值：null
|
| hAxis.titleTextStyle |
這個物件會指定水平軸標題文字樣式。物件的格式如下：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
類型：物件
預設：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.maxValue |
將水平軸的最大值移至指定值；在多數圖表中，這個值會向右移動。如果設為值小於資料的最大 x 值，系統會忽略這項設定。
類型：數字
預設：自動
|
| hAxis.minValue |
將水平軸的最小值移至指定值；在大多數圖表中，這個數字會向左移動。如果設定的值大於資料中最小值 x 值，系統會忽略這項設定。
類型：數字
預設：自動
|
| hAxis.viewWindowMode |
指定如何縮放水平軸，以轉譯圖表區域中的值。支援的字串值如下：
類型：字串
預設值：等同於「漂亮」，但使用時優先度為
haxis.viewWindow.min 和 haxis.viewWindow.max。 |
| hAxis.viewWindow |
指定水平軸的裁剪範圍。 類型：物件
預設值：null
|
| hAxis.viewWindow.max |
要顯示的水平資料最大值。 當 類型：數字
預設：自動
|
| hAxis.viewWindow.min |
要顯示的水平資料最小值。 當 類型：數字
預設：自動
|
| 高度 |
圖表的高度，以像素為單位。 類型：數字
預設：所含元素的高度
|
| 傳說 |
由成員組成的物件，可設定圖例的各個層面。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示： {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
類型：物件
預設值：null
|
| legend.alignment |
圖例的對齊。可以是下列其中一項：
起點、中心和結束點是以圖例的樣式 (垂直或水平) 為準。舉例來說，在「右側」圖例中，「start」和「end」分別位於頂端和底部。如果是「頂端」圖例，「start」和「end」則分別位於區域的左側和右側。 預設值取決於圖例位置。「bottom」圖例的預設值為「center」，其他圖例則預設為「start」。 類型：字串
預設：自動
|
| legend.maxLines |
圖例中的行數上限。將這個項目設為大於一的數字，即可為圖例新增線條。請注意：決定實際算繪行數的確切邏輯仍在浮動中。 此選項目前僅適用於圖例.position 為「top」時。 類型：數字
預設值：1
|
| legend.pageIndex |
已為圖例預先選取零開始頁面索引。 類型：數字
預設值：0
|
| legend.position |
圖例位置。可以是下列其中一項：
類型：字串
預設值：「right」
|
| legend.textStyle |
指定圖例文字樣式的物件。物件的格式如下：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
類型：物件
預設：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| selectionMode |
當 類型：字串
預設：「single」
|
| 系列叢書 |
物件物件，鍵是系列名稱 (「顏色」欄中的值)，以及每個物件說明圖表中對應序列的格式。如未指定序列或值，則會使用全域值。每個物件都支援下列屬性：
series: {'Europe': {color: 'green'}}
類型：包含巢狀物件的物件
預設：{}
|
| sizeAxis |
具備成員的物件，可設定值與對話框大小建立關聯的方式。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示： {minValue: 0, maxSize: 20}
類型：物件
預設值：null
|
| sizeAxis.maxSize |
最大說明框的半徑上限，以像素為單位。 類型：數字
預設值：30 個
|
| sizeAxis.maxValue |
要對應至 類型：數字
預設：圖表資料中「大小」欄的最大值
|
| sizeAxis.minSize |
對話框的最小半徑範圍 (以像素為單位)。 類型：數字
預設：5
|
| sizeAxis.minValue |
要對應至 類型：數字
預設值：圖表資料中「大小」欄的最小值
|
| sortBubblesBySize |
如為 true，系統會依大小排序對話框，讓較小的泡泡顯示在較大的泡泡上方。 如果設為 False，對話框會根據資料在資料表中的順序排序。 類型：布林值
預設值：true
|
| 主題 |
主題是一組預先定義的選項值，可搭配運作來達成特定圖表行為或視覺效果。目前只有一個主題：
類型：字串
預設值：null
|
| title |
顯示在圖表上方的文字。 類型：字串
預設：無標題
|
| titlePosition |
圖表標題的放置位置，與圖表區域比較。支援的值：
類型：字串
預設值：「out」
|
| 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.isHtml |
如果設為 true，將使用 HTML 算繪 (而非 SVG 算繪) 的工具提示。詳情請參閱「自訂工具提示內容」一文。 注意：泡泡圖圖表「不」支援透過工具提示欄資料角色自訂 HTML 工具提示內容。 類型：布林值
預設值：false
|
| 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」
|
| vAxis |
包含成員的物件，可設定各種垂直軸元素。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示： {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
類型：物件
預設值：null
|
| vAxis.baseline |
類型：數字
預設：自動
|
| vAxis.baselineColor |
指定縱軸的基準顏色。可以是任何 HTML 顏色字串，例如 類型：數字
預設：「black」
|
| vAxis.direction |
垂直軸值成長的方向。根據預設，低值會顯示在圖表底部。指定 類型：1 或 -1
預設值：1
|
| vAxis.format |
數字軸標籤的格式字串。這是
ICU 模式集
的子集。舉例來說，
套用至標籤的實際格式是衍生自載入 API 時使用的語言代碼。詳情請參閱「 載入特定語言代碼的圖表 」。
計算刻點值和格線時，系統會考慮所有相關格線選項的幾種替代組合，如果格式化的刻點標籤重複或重疊，系統會拒絕替代組合。因此，如果您只想顯示整數刻點值，則可以指定 類型：字串
預設：自動
|
| vAxis.gridlines |
包含成員用來設定縱軸格線的物件。請注意，垂直軸格線是水平繪製的。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示： {color: '#333', minSpacing: 20}
類型：物件
預設值：null
|
| vAxis.gridlines.color |
圖表區域中的垂直格線顏色。指定有效的 HTML 顏色字串。 類型：字串
預設：「#CCC」
|
| vAxis.gridlines.count |
圖表區域中的水平格線約略數量。
如果為 類型：數字
預設：-1
|
| vAxis.gridlines.units |
將日期/日期時間/時間資料類型與圖表計算的格線搭配使用時，覆寫預設格式。允許格式化年、月、日、小時、分鐘、秒鐘和毫秒。 一般格式為：
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]},
hours: {format: [/*format strings here*/]},
minutes: {format: [/*format strings here*/]},
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]}
}
}
詳情請參閱日期和時間。 類型：物件
預設值：null
|
| vAxis.minorGridlines |
此物件可讓成員在垂直軸上設定次要格線，與 vAxis.gridlines 選項類似。 類型：物件
預設值：null
|
| vAxis.minorGridlines.color |
圖表區域中的垂直小格線顏色。指定有效的 HTML 顏色字串。 類型：字串
預設：使用格線與背景顏色混合
|
| vAxis.minorGridlines.count |
「orGridlines.count」選項主要已淘汰，除非將計數設為 0 以停用次要格線。次要格線的數量取決於主要格線之間的間隔 (請參閱 vAxis.gridlines.interval) 與最低所需空間 (請參閱 vAxis.minorGridlines.minSpacing)。 類型：數字
預設值：1
|
| vAxis.minorGridlines.units |
與計算的次要格線搭配使用時，覆寫日期/日期時間/時間資料類型各個面向的預設格式。允許格式化年、月、日、小時、分鐘、秒鐘和毫秒。 一般格式為：
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
詳情請參閱日期和時間。 類型：物件
預設值：null
|
| vAxis.logScale |
如果設為 true，系統會將垂直軸設為對數尺度。注意：所有值都必須為正數。 類型：布林值
預設值：false
|
| vAxis.scaleType |
類型：字串
預設值：null
|
| vAxis.textPosition |
垂直軸文字相對於圖表區域的位置。支援的值：「out」、「in」、「none」。 類型：字串
預設值：「out」
|
| vAxis.textStyle |
指定縱軸文字樣式的物件。物件的格式如下：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
類型：物件
預設：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| vAxis.ticks |
將自動產生的 Y 軸刻點替換為指定陣列。陣列的每個元素應為有效的刻點值 (例如數字、日期、時間或時間) 或物件。如果是物件，則應提供用於刻點值的
除非您指定要覆寫的 例：
類型：元素陣列
預設：自動
|
| vAxis.title |
類型：字串
預設：無標題
|
| vAxis.titleTextStyle |
指定縱軸標題文字樣式的物件。物件的格式如下：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
類型：物件
預設：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| vAxis.maxValue |
將垂直軸的最大值移至指定值；在大部分的圖表中，這個值會向上移動。如果設為值小於資料的最大 y 值，系統會忽略這項設定。
類型：數字
預設：自動
|
| vAxis.minValue |
將垂直軸的最小值移至指定值；在多數圖表中，這個值會向下移動。如果設定的值大於資料最小 y 值，則系統會忽略這項設定。
類型：數字
預設值：null
|
| vAxis.viewWindowMode |
指定如何縮放縱軸，以轉譯圖表區域中的值。支援的字串值如下：
類型：字串
預設值：等同於「漂亮」，但使用時優先度為
vaxis.viewWindow.min 和 vaxis.viewWindow.max。 |
| vAxis.viewWindow |
指定垂直軸的裁剪範圍。 類型：物件
預設值：null
|
| vAxis.viewWindow.max |
要顯示的最大垂直資料值。 當 類型：數字
預設：自動
|
| vAxis.viewWindow.min |
要顯示的垂直資料最小值。 當 類型：數字
預設：自動
|
| 寬度 |
圖表的寬度，以像素為單位。 類型：數字
預設：所含元素的寬度
|
方法
| 方法 | |
|---|---|
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() |
清除圖表並釋出所有分配的資源。 傳回類型：無
|
事件
如要進一步瞭解如何使用這些事件，請參閱基本互動、處理事件和觸發事件。
| 名稱 | |
|---|---|
animationfinish |
轉場動畫播放完畢時觸發。 屬性：無
|
click |
使用者點選圖表內時觸發。可用於識別使用者點選標題、資料元素、圖例項目、軸、格線或標籤的時機。 屬性： targetID
|
error |
嘗試算繪圖表時發生錯誤時觸發。 屬性：ID、訊息
|
legendpagination |
使用者按一下圖例分頁箭頭時觸發。傳回目前從零開始計算的圖例索引和總頁數。 資源：currentPageIndex、totalPages
|
onmouseover |
在使用者將滑鼠遊標懸停在視覺實體上時觸發。回傳對應資料表元素的列和欄索引。 一個泡泡與資料表中的某一列相關聯 (欄索引為空值)。 屬性：列、欄
|
onmouseout |
在使用者滑鼠遊標移離視覺實體時觸發。傳回對應資料表元素的列和欄索引。一個泡泡與資料表中的某一列相關聯 (欄索引為空值)。 屬性：列、欄
|
ready |
圖表已可供外部方法呼叫。如果您想與圖表互動，並在繪製後呼叫方法，您應「先」設定此事件的事件監聽器，並只在事件觸發後才呼叫這些事件。 屬性：無
|
select |
在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 屬性：無
|
資料政策
所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。