簡介
枝狀燭燈的互動式圖表。
燭光圖可用來顯示重疊在總變異數上方的開始和結束值。枝狀圖通常用於顯示庫存價值行為。在這個圖表中，起始值小於關閉值的項目 (增益) 會繪製成填滿方塊，而開幕值大於關閉值 (損失) 的項目則會繪製為空心方塊。
範例
<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([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
var options = {
legend:'none'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
刊登序列圖表
只要使用正確的選項組合，即可利用蠟燭圖來呈現簡單的瀑布圖。
在以下程式碼中，我們先在第一欄和第二欄使用相同的值，以排除頂端頂點，而在第三和第四欄中使用相同的值，將底座移開。我們會將 bar.groupWidth 設為 '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([
['Mon', 28, 28, 38, 38],
['Tue', 38, 38, 55, 55],
['Wed', 55, 55, 77, 77],
['Thu', 77, 77, 66, 66],
['Fri', 66, 66, 22, 22]
// Treat the first row as data.
], true);
var options = {
legend: 'none',
bar: { groupWidth: '100%' }, // Remove space between bars.
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
}
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
目前無法替標籤加上標籤。最好的做法是使用疊加層。
載入中
google.charts.load 套件名稱為 "corechart"。
google.charts.load('current', {packages: ['corechart']});
視覺化的類別名稱是 google.visualization.CandlestickChart.
var visualization = new google.visualization.CandlestickChart(container);
資料格式
五個以上的資料欄，其中第一個資料欄會定義 X 軸值或群組標籤，而這四個欄後面有各自的定義不同的系列。
- Col 0：在 X 軸上的字串標籤 (離散)，或以數字、日期、日期或時間值 (連續) 做為 X 軸的值。
- Col 1：這個數字表示此標記的最低/最小值。 這是蠟燭中心線的底數。資料欄標籤會用在圖例中的序列標籤，而其他資料欄的標籤則會遭到忽略。
- Col 2：指出此標記的開頭/初始值的數字。這是燭光的一個垂直邊框。如果 3 欄的值低於 3，則系統會用蠟燭來填入資料。
- Col 3：指定此標記結束/最終值的數字。這是蠟燭的第二個垂直框線。如果第 2 欄的值低於 2 欄，蠟燭就會是空心，否則將被填滿。
- Col 4：指定此標記的最高/最大值的數字。這是蠟燭中心線的頂端。
- Col 5 [選用]：燭台的工具提示或樣式欄。
設定選項
| 名稱 | |
|---|---|
| 匯總目標 |
如何將多個資料匯總至工具提示：
aggregationTarget 通常會和 selectionMode 和 tooltip.trigger 搭配使用，例如：
var options = {
// Allow multiple
// simultaneous selections.
selectionMode: 'multiple',
// Trigger tooltips
// on selections.
tooltip: {trigger: 'selection'},
// Group selections
// by x-value.
aggregationTarget: 'category',
};
類型：字串
預設值：「auto」
|
| 動畫.duration |
動畫的時間長度 (以毫秒為單位)。詳情請參閱動畫說明文件。 類型：數字
預設：0
|
| 動畫 |
套用至動畫的加/減速函式。可用選項如下所示：
類型：字串
預設值：「Linear」
|
| 動畫.startup |
用於決定圖表是否在初始繪圖時呈現動畫效果。如果設為 類型：布林值
Default 否
|
| 軸標題位置 |
與圖表區域比較的軸標題。支援的值：
類型：字串
預設值：「out」
|
| backgroundColor |
圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串，例如 類型：字串或物件
預設：「white」
|
| 背景色彩 |
圖表邊框的顏色，以 HTML 顏色字串表示。 類型：字串
預設值：「#666」
|
| 背景色彩.筆寬度 |
框線寬度 (單位為像素)。 類型：數字
預設：0
|
| background..fill |
圖表會以 HTML 色彩字串填入顏色。 類型：字串
預設：「white」
|
| bar.groupWidth |
一組蠟燭的寬度，以下列任一格式指定：
類型：數字或字串
預設值：黃金比例，約為「61.8%」。
|
| Candlestick.hollowIsRising |
如為 true，則上升蠟燭會顯示中空的，而蠟燭則會下降，反之則與情況相反。 類型：布林值
預設：否 (稍後會變更為 true)
|
| candlestick.fallingColor.fill |
掉落蠟燭的填滿顏色，做為 HTML 色彩字串。 類型：字串
預設：自動 (取決於系列顏色和 hollowIsRising)
|
| 燭台.fallingColor.rip |
掉落蠟燭的筆劃顏色，以 HTML 色彩字串表示。 類型：字串
預設：自動 (系列顏色)
|
| 燭台.fallingColor.strokeWidth |
掉落蠟燭的筆劃寬度，以 HTML 色彩字串表示。 類型：2
預設：數字
|
| candlestick.risingColor.fill |
燭台的填滿顏色，做為 HTML 顏色字串。 類型：字串
預設：自動 (白色或系列顏色，視 lowlowIsRising 而定)
|
| Candlestick.risingColor.rip |
以蠟燭表示上升的蠟燭，以 HTML 色彩字串表示。 類型：字串
預設：自動 (系列顏色或白色，視 lowlowIsRising 而定)
|
| 燭台 |
燭台的筆劃寬度，為 HTML 色彩字串。 類型：數字
預設：2
|
| 圖表區域 |
擁有成員可設定圖表區域位置和大小的物件 (繪製圖表本身的位置，不含軸和圖例)。系統支援數字格式：範例： 類型：物件
預設值：空值
|
| 圖表區域 |
圖表區域背景顏色。使用字串時，可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時，您可以提供下列屬性：
類型：字串或物件
預設：「white」
|
| 圖表區域 |
從左框線繪製圖表的程度。 類型：數字或字串
預設：自動
|
| 排行榜區域 |
從上方邊框繪製圖表的程度。 類型：數字或字串
預設：自動
|
| 圖表區域 |
圖表區域寬度。 類型：數字或字串
預設：自動
|
| 圖表區域 |
圖表區域高度。 類型：數字或字串
預設：自動
|
| 顏色 |
圖表元素的顏色。字串陣列，其中每個元素都是 HTML 顏色字串，例如： 類型：字串陣列
預設：預設顏色
|
| 啟用互動功能 |
圖表是否擲回了以使用者為主的事件或回應使用者互動。設為 False 時，圖表不會擲回「選取」或其他以互動為基礎的事件 (但會「擲出就緒」或「錯誤」的事件)，而且不會顯示使用者的文字，或是隨著使用者輸入的內容而改變。 類型：布林值
預設：是
|
| 焦點目標 |
滑鼠遊標懸停時接收焦點的實體類型。也會影響滑鼠點擊時選取的實體，以及與事件相關聯的資料表元素。可能是下列其中一個值：
在 FocusTarget「category」中，工具提示會顯示所有類別的值。這在比較不同系列的值時相當實用。 類型：字串
預設值：「datum」
|
| 字型大小 |
圖表中所有文字的預設字型大小 (以像素為單位)。您可以使用特定圖表元素的屬性覆寫這項設定。 類型：數字
預設：自動
|
| 字型名稱 |
圖表中所有文字的預設字型。您可以使用特定圖表元素的屬性覆寫這項設定。 類型：字串
預設：「Arial」
|
| ForceIFrame |
在內嵌頁框中繪製圖表。(請注意，在 IE8 中，系統會忽略此選項；所有 IE8 圖表都會以 i-frames 繪製)。 類型：布林值
預設值：false
|
| HAXis |
擁有成員可設定各種水平軸元素的物件。若要指定此物件的屬性，您可以使用物件常值標記法，如下所示：
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
類型：物件
預設值：空值
|
| hAxis.baseline |
水平軸的基準線。 這個選項僅適用於 類型：數字
預設：自動
|
| hAxis.baselineColor |
水平軸的基準色彩。可以是任何 HTML 顏色字串，例如 這個選項僅適用於 類型：數字
預設：'black'
|
| HXX.Direction |
沿著水平軸值的增長方向。如要指定值的順序，請指定 類型：1 或 -1
預設：1
|
| hAxis.format |
數字或日期軸標籤的格式字串。
對於數字軸標籤，這是小數格式的 ICU 模式集子集。舉例來說，
對於日期軸標籤，這是日期格式 ICU 模式集的子集。舉例來說， 標籤套用的實際格式設定衍生自 API 的載入地區。詳情請參閱使用特定語言代碼載入圖表。
在計算刻點值和格線時，系統會考慮所有相關格線選項的數個替代組合，如果格式化的刻點標籤重複或重疊，系統會拒絕其他的替代組合。因此，如果您只想要顯示整數刻點值，請指定
這個選項僅適用於 類型：字串
預設：自動
|
| hAxis.gridlines |
物件，包含具有設定在軸軸上的格線。請注意，水平軸格線是垂直繪製的。若要指定此物件的 屬性，您可以使用物件常值標記法，如下所示： {color: '#333', minSpacing: 20}
這個選項僅適用於 類型：物件
預設值：空值
|
| hAxis.gridlines.color |
圖表區域內水平格線的顏色。請指定有效的 HTML 色彩字串。 類型：字串
預設值：「#CCC」
|
| hAxis.gridlines.count |
圖表區域內水平格線的概略數量。如果為 類型：數字
預設值：-1
|
| hAxis.gridlines.interval |
相鄰網格之間的大小陣列 (以資料值而非像素)。這個選項目前僅適用於數字軸，但與只用於日期和時間的 類型：介於 1 到 10 之間的數字 (不含 10)。
預設值：經過計算
|
| hAxis.gridlines.minSpacing |
hAxis 主要格線之間的最小螢幕空間 (以像素為單位)。主要格線的預設值為 類型：數字
預設值：經過計算
|
| hAxis.gridlines.multiple |
所有格線和刻點值必須是這個選項值的倍數。請注意，有別於間隔，系統不會將倍數乘以倍數的倍數。
因此，您可以透過指定 類型：數字
預設：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*/]},
}
}
詳情請參閱日期和時間。 類型：物件
預設值：空值
|
| hAxis.minorGridlines |
擁有類似 hAxis.gridlines 選項，成員可在水平軸上設定次要格線的物件。
這個選項僅適用於 類型：物件
預設值：空值
|
| hAxis.minorGridlines.color |
圖表區域內水平次要格線的色彩。請指定有效的 HTML 色彩字串。 類型：字串
預設：格線和背景顏色的混合
|
| hAxis.minorGridlines.interval |
smallGridlines.interval 選項與主要格線間隔選項類似，但選擇的間隔一律是主要格線間隔的除數。線性資源調度的預設時間間隔為 類型：數字
預設：1
|
| hAxis.minorGridlines.minSpacing |
相鄰的小格線之間以及次要與主要格線之間，所必需的最小空間 (以像素為單位)。預設值為 1/2 的 1/2 線性比例 (線性線性線條) 和 1/5 (最小對數)。 類型：數字
預設值：經過計算
|
| hAxis.minorGridlines.multi |
與主要 類型：數字
預設：1
|
| hAxis.minorGridlines.count |
類型：數字
預設：1
|
| hAxis.minorGridlines.units |
與日期計算的 minGridlines 圖表搭配使用時，將日期/日期/時間資料類型的各種層面覆寫預設格式。允許輸入年、月、日、小時、分鐘、秒和毫秒的格式。 一般格式為：
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*/]},
}
}
詳情請參閱日期和時間。 類型：物件
預設值：空值
|
| hAxis.logScale |
這個選項僅適用於 類型：布林值
預設值：false
|
| hAxis.scaleType |
這個選項僅適用於 類型：字串
預設：空值
|
| hAxis.textPosition |
水平軸文字相對於圖表區域的位置。支援的值：「out」、「in」、「in」。 類型：字串
預設值：「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 |
類型：字串
預設值：空值
|
| hAxis.titleText 樣式 |
指定水平軸標題文字樣式的物件。物件具有以下格式：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
類型：物件
預設：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.allowContainerBoundaryTextCutoff |
設為 False 時，系統會隱藏最外層的標籤，而不會允許圖表容器裁剪標籤。如為 true，將允許裁剪標籤。 這個選項僅適用於 類型：布林值
預設值：false
|
| hAxis.slantedText |
如為 true，則以一個角度繪製水平軸文字，以便在軸上容納更多文字；如果設為 false，則請直立水平軸文字。預設行為是讓文字在垂直繪製時無法配合調整。請注意，只有在 類型：布林值
預設：自動
|
| hAxis.slantedTextAngle |
水平軸文字的斜角 (如果所繪製的話)。如果 類型：數字，-90 - 90
預設：30
|
| hAxis.maxAlternation |
水平軸文字的最大層級。如果軸文字標籤過量擁擠，伺服器可能會向上或向下移動相鄰的標籤，以便將標籤貼得更近。這個值會指定要使用的最高層級；如果標籤能在不重疊的情況下符合，則伺服器使用的層級數就會減少。如果是日期和時間，預設值為 1。 類型：數字
預設：2
|
| hAxis.maxText 行 |
文字標籤的行數上限。如果標籤過長，標籤可以跨越多個行。根據預設，行數預設為可用空間有限。 類型：數字
預設：自動
|
| hAxis.minTextSpacing |
兩個相鄰文字標籤之間的水平間距下限 (以像素為單位)。如果標籤的間距過於冗長，或是標籤過長，則會將間距拉低到這個門檻以下，這時系統會套用其中一個的標籤拆解措施 (例如，截斷標籤或捨棄部分標籤)。 類型：數字
預設值：
hAxis.textStyle.fontSize 的值 |
| hAxis.showTextEvery |
要顯示的水平軸標籤數，其中 1 表示顯示每個標籤，2 代表所有其他標籤，依此類推。預設設定是盡可能顯示最多的標籤，不要重疊。 類型：數字
預設：自動
|
| hAxis.maxValue 值 |
將水平軸的最大值移至指定值；在大多數圖表中，這會是向右的。如果設定的值小於資料的最大 x 值，系統會忽略這個屬性。
這個選項僅適用於 類型：數字
預設：自動
|
| hAxis.minValue |
將水平軸的最小值移到指定值；在大多數圖表中是左側。如果設定的值大於資料的最低 X 值，系統會忽略這個值。
這個選項僅適用於 類型：數字
預設：自動
|
| hAxis.viewWindowMode |
指定如何縮放水平軸以在圖表區域中顯示值。系統支援下列字串值：
這個選項僅適用於 類型：字串
預設值：等同於「美屬」；不過如果使用的話，系統會優先採用
haxis.viewWindow.min 和 haxis.viewWindow.max。
|
| hAxis.viewWindow |
指定水平軸的裁剪範圍。 類型：物件
預設值：空值
|
| hAxis.viewWindow.max |
「 類型：數字
預設：自動
|
| hAxis.viewWindow.min |
「 類型：數字
預設：自動
|
| height |
圖表的高度，以像素為單位。 類型：數字
預設：所含元素的高度
|
| 傳說 |
包含成員，用於設定圖例各個層面的物件。若要指定此物件的屬性，您可以使用物件常值標記法，如下所示： {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
類型：物件
預設值：空值
|
| 圖例.alignment |
圖例的對齊方式。可能是下列其中一項：
起始、置中和結束點與圖例的樣式 (垂直或水平) 有關。舉例來說，在「右」圖例中，「start」和「end」分別位於頂端和底部；如果是「top」圖例，「start」和「end」將分別位於該地區的左側和右側。 預設值取決於圖例的位置。如果是「bottom」圖例，預設值為「center」，其他圖例預設為「start」。 類型：字串
預設：自動
|
| 圖例.maxLines |
圖例所含行數上限。請將這個值設為大於一的數字，在圖例中新增線條。注意事項：用於判斷實際行數的確切邏輯仍處於通量。 這個選項目前僅適用於圖例的「top」為「top」。 類型：數字
預設：1
|
| 圖例.pageIndex |
圖例的初始頁面索引初始初始值。 類型：數字
預設：0
|
| 圖例.position |
圖例的位置。可能是下列其中一項：
類型：字串
預設值：「right」
|
| 圖例.textStyle |
指定圖例文字樣式的物件。物件採用以下格式：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
類型：物件
預設：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| 方向 |
圖表的方向。設為 類型：字串
預設：「水平」
|
| 反向類別 |
如果設為 true，系統會從右到左繪製序列。預設為從左到右繪製。 類型：布林值
預設值：false
|
| 選項模式 |
當 類型：字串
預設值：「Single」
|
| series |
物件陣列，每個物件都描述圖表中對應的序列格式。如要對序列使用預設值，請指定空白物件 {}。如果未指定係列或值，系統會使用全域值。每個物件都支援下列屬性：
您可以指定物件陣列，每個物件都按指定順序套用至系列；您也可以指定一個物件，其中每個子項都有一個數字索引鍵，指示其套用哪個序列。舉例來說，以下兩個宣告相同，且將第一個系列宣告為圖例且不提供圖例，而第四層宣告為紅色且不含圖例：
series: [
{color: 'black', visibleInLegend: false}, {}, {},
{color: 'red', visibleInLegend: false}
]
series: {
0:{color: 'black', visibleInLegend: false},
3:{color: 'red', visibleInLegend: false}
}
類型：物件陣列，或包含巢狀物件的物件
預設： {}
|
| 主題 |
主題是一組預先定義的選項值，可共同運作以達到特定的圖表行為或視覺效果。目前只有一個主題：
類型：字串
預設值：空值
|
| title |
圖表上方顯示的文字。 類型：字串
預設：無標題
|
| 標題位置 |
圖表標題與圖表區域的比較位置。支援的值：
類型：字串
預設值：「out」
|
| 標題文字樣式 |
指定標題文字樣式的物件。物件採用以下格式：
{ 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，在工具提示中的系列資訊旁邊顯示彩色正方形。當 類型：布林值
預設：自動
|
| 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」
|
| VAX |
如果圖表具有多個垂直軸，則可指定個別軸軸的屬性。每個子物件都是
如要指定具有多個垂直軸的圖表，請先使用
{
series: {
2: {
targetAxisIndex:1
}
},
vAxes: {
1: {
title:'Losses',
textStyle: {color: 'red'}
}
}
}
這個屬性可以是物件或陣列： 物件為物件集合，而每個物件都有一個數字標籤，用來定義其定義的軸；這是上述格式；陣列是物件陣列，每個軸各為一個陣列。例如，以下陣列樣式標記與上述
vAxes: [
{}, // Nothing specified for axis 0
{
title:'Losses',
textStyle: {color: 'red'} // Axis 1
}
]
類型：物件陣列或包含子物件的物件
預設值：空值
|
| VAXis |
擁有成員可設定各種垂直軸元素的物件。若要指定此物件的屬性，您可以使用物件常值標記法，如下所示： {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
類型：物件
預設值：空值
|
| vAxis.baseline |
類型：數字
預設：自動
|
| vAxis.baselineColor |
指定垂直軸的基準色彩。可以是任何 HTML 顏色字串，例如 類型：數字
預設：'black'
|
| vAxis.direction |
垂直軸值的增加方向。根據預設，低數值會顯示在圖表底部。如要指定值的順序，請指定 類型：1 或 -1
預設：1
|
| vAxis.format |
數字軸標籤的格式字串。這是 ICU 模式集的子集。舉例來說，
標籤套用的實際格式設定衍生自 API 的載入地區。詳情請參閱使用特定語言代碼載入圖表。
在計算刻點值和格線時，系統會考慮所有相關格線選項的數個替代組合，如果格式化的刻點標籤重複或重疊，系統會拒絕其他的替代組合。因此，如果您只想要顯示整數刻點值，請指定 類型：字串
預設：自動
|
| vAxis.gridlines |
所含物件，用於設定垂直軸上的格線。 請注意，垂直軸格線是水平繪製。若要指定此物件的屬性，您可以使用物件常值標記法，如下所示： {color: '#333', minSpacing: 20}
類型：物件
預設值：空值
|
| vAxis.gridlines.color |
圖表區域中的垂直格線顏色。請指定有效的 HTML 色彩字串。 類型：字串
預設值：「#CCC」
|
| vAxis.gridlines.count |
圖表區域內水平格線的概略數量。如果為 類型：數字
預設值：-1
|
| vAxis.gridlines.interval |
相鄰網格之間的大小陣列 (以資料值而非像素)。這個選項目前僅適用於數字軸，但與只用於日期和時間的 類型：介於 1 到 10 之間的數字 (不含 10)。
預設值：經過計算
|
| vAxis.gridlines.minSpacing |
hAxis 主要格線之間的最小螢幕空間 (以像素為單位)。主要格線的預設值為 類型：數字
預設值：經過計算
|
| vAxis.gridlines.multiple |
所有格線和刻點值必須是這個選項值的倍數。請注意，有別於間隔，系統不會將倍數乘以倍數的倍數。
因此，您可以透過指定 類型：數字
預設：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*/]}
}
}
詳情請參閱日期和時間。 類型：物件
預設值：空值
|
| vAxis.minorGridlines |
擁有類似 vAxis.gridlines 選項，且設有垂直軸設定次要格線的物件。 類型：物件
預設值：空值
|
| vAxis.minorGridlines.color |
圖表區域中的垂直次要格線顏色。請指定有效的 HTML 色彩字串。 類型：字串
預設：格線和背景顏色的混合
|
| vAxis.minorGridlines.count |
smallGridlines.count 選項大多已淘汰，除了將計數設定為 0 來停用次要格線。次要格線的數目取決於主要格線 (請參閱 vAxis.gridlines.interval) 和最低空間需求 (請參閱 vAxis.minorGridlines.minSpacing) 之間的間隔時間。 類型：數字
預設：1
|
| vAxis.minorGridlines.interval |
smallGridlines.interval 選項與主要格線間隔選項類似，但選擇的間隔一律是主要格線間隔的除數。線性資源調度的預設時間間隔為 類型：數字
預設：1
|
| vAxis.minorGridlines.minSpacing |
相鄰的小格線之間以及次要與主要格線之間，所必需的最小空間 (以像素為單位)。預設值為 1/2 的 1/2 線性比例 (線性線性線條) 和 1/5 (最小對數)。 類型：數字
預設值：經過計算
|
| vAxis.minorGridlines.multi |
與主要 類型：數字
預設：1
|
| vAxis.minorGridlines.units |
與日期計算的 minGridlines 圖表搭配使用時，將日期/日期/時間資料類型的各種層面覆寫預設格式。允許輸入年、月、日、小時、分鐘、秒和毫秒的格式。 一般格式為：
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*/]},
}
}
詳情請參閱日期和時間。 類型：物件
預設值：空值
|
| vAxis.logScale |
如為 true，則垂直軸為對數比例。注意：所有的值都必須是正數。 類型：布林值
預設值：false
|
| vAxis.scaleType |
這個選項僅適用於 類型：字串
預設值：空值
|
| vAxis.textPosition (vAxis.textPosition) |
垂直軸文字相對於圖表區域的位置。支援的值：「out」、「in」、「in」。 類型：字串
預設值：「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.titleText 樣式 |
指定垂直軸標題文字樣式的物件。物件採用以下格式：
{ 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 值，系統會忽略這個值。
類型：數字
預設值：空值
|
| vAxis.viewWindowMode |
指定如何縮放垂直軸以在圖表區域中顯示值。系統支援下列字串值：
類型：字串
預設值：等同於「美屬」；不過如果使用的話，系統會優先採用
vaxis.viewWindow.min 和 vaxis.viewWindow.max。
|
| vAxis.viewWindow |
指定垂直軸的裁剪範圍。 類型：物件
預設值：空值
|
| vAxis.viewWindow.max |
要顯示的垂直資料值上限。 「 類型：數字
預設：自動
|
| vAxis.viewWindow.min |
要顯示的最小垂直資料值。 「 類型：數字
預設：自動
|
| 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() |
清除圖表並釋出其分配的所有資源。 傳回類型：無
|
活動
如要進一步瞭解如何使用這些事件，請參閱基本互動、處理事件和觸發事件。
| 名稱 | |
|---|---|
animationfinish |
轉換動畫播放時觸發。 屬性：無
|
click |
使用者點選圖表時觸發。可用於識別標題、資料元素、圖例項目、軸、軸線或標籤的點選時間。 屬性：targetID
|
error |
嘗試轉譯圖表時發生錯誤。 屬性：ID、訊息
|
legendpagination |
使用者點選圖例分頁時觸發。傳回目前圖例為零的頁面索引和網頁總數。 屬性：currentPageIndex、totalPages
|
onmouseover |
當使用者將滑鼠遊標移到視覺實體上時觸發。傳回對應資料表元素的列索引和欄索引。蠟燭與資料表中的儲存格相關，與資料欄的圖例項目 (資料列索引為空值) 與資料列類別 (資料欄索引為空值) 相關聯。 屬性：資料列、資料欄
|
onmouseout |
當使用者離開視覺實體時觸發。傳回對應資料表元素的列索引和欄索引。蠟燭與資料表中的儲存格相關，與資料欄的圖例項目 (資料列索引為空值) 與資料列類別 (資料欄索引為空值) 相關聯。 屬性：資料列、資料欄
|
ready |
圖表可供外部方法呼叫使用。如果您想要與圖表互動，並在繪製圖表後呼叫方法，請先為這個事件設定監聽器，然後再呼叫 屬性：無
|
select |
使用者點選視覺實體時觸發。如要瞭解所選項目，請呼叫 屬性：無
|
資料政策
系統會處理所有程式碼和資料，並在瀏覽器中顯示。系統不會將資料傳送至任何伺服器。