總覽
柱狀圖是在瀏覽器中使用 SVG 或 VML 顯示的垂直長條圖，視使用者瀏覽器而定。如同所有 Google 圖表，柱狀圖會在使用者將滑鼠遊標懸停在資料上時顯示工具提示。如需此圖表的水平版本，請參閱長條圖。
示例
為資料欄上色
讓我們繪製四個貴金屬的密度：
上面所有顏色預設為藍色。這是因為這些系列都屬於同一系列；如有第二個序列，則會呈現紅色。我們可以利用樣式角色自訂這些顏色：
選擇顏色有三種不同方式，資料表會展示這三種顏色：RGB 值、英文顏色名稱，以及類 CSS 宣告：
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333'], // RGB value
['Silver', 10.49, 'silver'], // English color name
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
]);
資料欄樣式
樣式角色可讓您透過類似 CSS 的宣告，控制資料欄外觀的幾個層面：
coloropacityfill-colorfill-opacitystroke-colorstroke-opacitystroke-width
我們不建議在圖表中隨意混合樣式，只要挑選樣式並用上去，但想要實際示範所有樣式屬性，可以參考以下取樣器：
前兩欄各自使用特定的 color (第一個使用英文名稱，第二個使用 RGB 值)。因此未選擇 opacity，因此會使用預設值 1.0 (完全不透明)，因此第二個資料欄會遮蔽後方的格線。在第三欄中，使用 0.2 的 opacity 來顯示格線。在第 4 版中，系統會使用三個樣式屬性：stroke-color 和 stroke-width 繪製邊框，而使用 fill-color 指定矩形內部的顏色。最右欄也會使用 stroke-opacity 和 fill-opacity 來選擇邊框和填滿的不透明度：
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Visitations', { role: 'style' } ],
['2010', 10, 'color: gray'],
['2020', 14, 'color: #76A7FA'],
['2030', 16, 'opacity: 0.2'],
['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
]);
為資料欄加上標籤
圖表中有多種標籤，例如工具提示中的刻點標籤、圖例標籤和標籤。在本節中，我們將說明如何在柱狀圖中的資料欄內 (或附近) 加入標籤。
假設我們想讓各欄加註合適的化學符號，方法是使用 annotation 角色：
在資料表中，我們使用 { role:
'annotation' } 定義一個新資料欄，用來存放資料欄標籤：
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
['Copper', 8.94, '#b87333', 'Cu' ],
['Silver', 10.49, 'silver', 'Ag' ],
['Gold', 19.30, 'gold', 'Au' ],
['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
]);
雖然使用者可以將遊標懸停在資料欄上來查看資料值，但還是建議您在資料欄中加入這些資料：
這比實際程序稍微複雜，因為我們建立了 DataView 來指定各欄的註解。
<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([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>
為了要採用不同的格式設定值，我們可以定義 formatter 並包裝到一個函式中，如下所示：
function getValueAt(column, dataTable, row) {
return dataTable.getFormattedValue(row, column);
}
接著，我們可以用 calc: getValueAt.bind(undefined, 1) 呼叫此函式。
如果標籤太大，無法完全放入資料欄內，系統會在外部顯示：
堆疊柱狀圖
堆疊柱狀圖是一種柱狀圖，可將相關值放在一起。如有任何負值，系統會在圖表基準下方以反向順序堆疊。通常用於類別自然分割為元件的情況。舉例來說，假設有幾本假想圖書銷售，按類別和時間比較：
您可將 isStacked 選項設為 true，以建立堆疊柱狀圖：
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
'Western', 'Literature', { role: 'annotation' } ],
['2010', 10, 24, 20, 32, 18, 5, ''],
['2020', 16, 22, 23, 30, 16, 9, ''],
['2030', 28, 19, 29, 30, 12, 13, '']
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
};
堆疊柱狀圖也支援 100% 堆疊，每個網域值的元素堆疊會經過重新縮放，增加至總和達到 100%。這個選項的選項包括 isStacked: 'percent'，可將每個值的格式設定為 100% 的百分比，而 isStacked: 'relative' 則將每個值的格式設定為 1 的分數。還有 isStacked: 'absolute' 選項，其功能相當於 isStacked: true。
請注意，在右側 100% 堆疊圖表中，刻度值採用相對 0 到 1 的比例做為分數 1，但軸值會顯示為百分比。這是因為百分比軸刻點是套用「#.##%」的格式來搭配相對 0-1 尺度值的結果。使用 isStacked: 'percent' 時，請務必使用相對的 0 至 1 尺度指定任何刻點/軸值。
var options_stacked = {
isStacked: true,
height: 300,
legend: {position: 'top', maxLines: 3},
vAxis: {minValue: 0}
};
var options_fullStacked = {
isStacked: 'percent',
height: 300,
legend: {position: 'top', maxLines: 3},
vAxis: {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
建立 Material 柱狀圖
Google 在 2014 年發布了相關規範，針對在 Google 平台上執行的各項資源和應用程式 (例如 Android 應用程式)，支援一般外觀和風格。這種做法稱為「質感設計」。我們將提供所有核心圖表的「Material」版本；如果您需要，歡迎繼續使用。
建立材質欄圖表的做法與建立「傳統」柱狀圖類似，您會載入 Google Visualization API (雖然使用 'bar' 套件而非 'corechart' 套件)、定義資料表，然後建立物件 (但類別不是 google.charts.Bar，而不是 google.visualization.ColumnChart)。
由於長條圖和柱狀圖基本上相同，但為了取向方向，我們都會呼叫 Material Bar Charts，無論長條是垂直 (傳統、柱狀圖) 還是水平 (長條圖)，都是如此。在 Material 中，唯一的差別在於 bars 選項。設為 'horizontal' 時，方向會與傳統的傳統長條圖類似，否則長條會呈垂直。
注意：質感圖表不適用於舊版 Internet Explorer。(Material 圖表需要的 SVG 除外，IE8 及更舊版本並不支援 SVG)。
相較於傳統資料欄圖表，材質欄圖表有多項小幅改善，包括改善的調色盤、圓角、標籤格式更清晰、序列之間的預設間距、更柔和的格線與標題 (以及新增字幕)。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
</body>
</html>
Material 圖表目前為 Beta 版。外觀和互動功能基本上是最終版本，但許多傳統圖表尚未提供可用選項。如需目前不支援的選項清單，請參閱這個問題。
此外，宣告選項的方式尚未定案，因此如果你使用的是任何傳統選項，就必須將以下這行取代為 Material 選項：
chart.draw(data, options);
...包含以下內容：
chart.draw(data, google.charts.Bar.convertOptions(options));
使用 google.charts.Bar.convertOptions() 可讓您利用特定功能，例如 hAxis/vAxis.format 預設選項。
2-Y 圖表
有時候，您會想在柱狀圖中顯示兩個序列，有兩個獨立的 Y 軸：一個序列的左軸，另一個序列的右軸則用於另一個序列：
請注意，我們的兩個 Y 軸名稱不同 (「parsecs」與「apparent magnitude」) 以及各自獨立的縮放比例和格線。如要自訂這項行為，請使用 vAxis.gridlines 選項。
在下方程式碼中，axes 和 series 選項會同時指定圖表的雙 Y 外觀。series 選項會指定每個項目要使用的軸 ('distance' 和 'brightness'；不需要與資料表中的資料欄名稱建立任何關係)。接著，axes 選項會將這張圖表設為雙 Y 圖表，將 'distance' 軸放在左側 (已加上「parsecs」標籤)，右側則是 'brightness' 軸 (標示為「apparent magnitude」)。
<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', 'bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var materialOptions = {
width: 900,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
y: {
distance: {label: 'parsecs'}, // Left y-axis.
brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
}
}
};
var classicOptions = {
width: 900,
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
title: 'Nearby galaxies - distance on the left, brightness on the right',
vAxes: {
// Adds titles to each axis.
0: {title: 'parsecs'},
1: {title: 'apparent magnitude'}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Bar(chartDiv);
materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawMaterialChart();
};
</script>
</head>
<body>
<button id="change-chart">Change to Classic</button>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>
</body>
</html>
「Top-X」圖表
注意：Top-X 軸僅適用於 Material 圖表 (也就是含有 bar 套件的軸)。
如果您想將 X 軸標籤和標題放在圖表頂端而非底部，可以使用 axes.x 選項在 Material 圖表中執行這項操作：
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
width: 800,
legend: { position: 'none' },
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
axes: {
x: {
0: { side: 'top', label: 'White to move'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(options));
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 800px; height: 600px;"></div>
</body>
</html>
載入中
google.charts.load 套件名稱為 "corechart"。視覺呈現的類別名稱為 google.visualization.ColumnChart。
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ColumnChart(container);
材質欄圖表的 google.charts.load 套件名稱為 "bar"。(並非錯字：材質長條圖會處理這兩種方向)。視覺呈現的類別名稱為 google.charts.Bar。(而不是錯字：材質長條圖會處理這兩種方向)。
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
資料格式
表格中的每一列都代表一組相鄰的長條。
列：表格中的每一列都代表一組長條。
資料欄：
| 第 0 欄 | 第 1 欄 | ... | 第 N 欄 | |
|---|---|---|---|---|
| 用途： |
|
這個群組中的第 1 列值 | ... | 這個群組中的長條 N 值 |
| 資料類型： | 號碼 | ... | 號碼 | |
| 角色： | 網域 | 資料 | ... | 資料 |
| 選用的資料欄角色： | ... |
設定選項
| 名稱 | |
|---|---|
| animation.duration |
此為動畫的時間長度，以毫秒為單位。詳情請參閱動畫說明文件。 類型：數字
預設值：0
|
| animation.easing |
套用至動畫的加/減速功能。可用選項如下所示：
類型：字串
預設：「線性」
|
| animation.startup |
指定圖表是否會在初次繪圖時顯示動畫。如果設為 類型：布林值
預設 false
|
| annotations.alwaysOutside |
在長條圖和
資料欄圖表中，如果設為 類型：布林值
預設值：false
|
| annotations.boxStyle |
如果圖表支援註解，
var options = {
annotations: {
boxStyle: {
// Color of the box outline.
stroke: '#888',
// Thickness of the box outline.
strokeWidth: 1,
// x-radius of the corner curvature.
rx: 10,
// y-radius of the corner curvature.
ry: 10,
// Attributes for linear gradient fill.
gradient: {
// Start color for gradient.
color1: '#fbf6a7',
// Finish color for gradient.
color2: '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
}
}
}
};
這個選項目前支援區域、長條圖、柱狀圖、組合圖、折線圖和散佈圖。註解圖表不支援此功能。 類型：物件
預設值：null
|
| annotations.datum |
如果圖表支援註解，
annotations.datum 物件可讓您覆寫 Google 圖表為個別資料元素提供的註解 (例如長條圖上每個長條顯示的值)。您可以使用 annotations.datum.stem.color 控制顏色，使用 annotations.datum.stem.length 控製字根長度，並使用 annotations.datum.style 控制樣式。類型：物件
預設：顏色為「黑色」，長度為 12，樣式為「點」。
|
| annotations.domain |
如果圖表支援註解，
annotations.domain 物件可讓您覆寫 Google 圖表針對網域提供的註解 (圖表的主要軸，例如一般折線圖上的 X 軸)。您可以使用 annotations.domain.stem.color 控制顏色，使用 annotations.domain.stem.length 控製字根長度，並使用 annotations.domain.style 控制樣式。類型：物件
預設：顏色為「黑色」，長度為 5，樣式為「點」。
|
| annotations.highContrast |
如果圖表支援註解，您可以使用
annotations.highContrast 布林值覆寫 Google 圖表的註解顏色選項。根據預設，annotations.highContrast 為 true，因此圖表會選取對比度良好的註解顏色：深色背景使用淺色，淺色背景則為深色。如果將 annotations.highContrast 設為 false，且未指定自己的註解顏色，Google 圖表會為註解使用預設的系列顏色：類型：布林值
預設值：true
|
| annotations.stem |
如果圖表支援註解，您可以使用
annotations.stem 物件覆寫 Google 圖表的 Stem 樣式選項。您可以使用 annotations.stem.color 和字根長度annotations.stem.length控制顏色。請注意，詞幹長度選項對具有 'line' 樣式的註解沒有影響：針對 'line' Daatum 註解，詞幹長度一律與文字相同；如果是 'line' 網域註解，詞幹延伸至整個圖表。類型：物件
預設：顏色為「黑色」；網域註解的長度為 5，Datum 註解則為 12。
|
| annotations.style |
類型：字串
預設：「point」
|
| annotations.textStyle |
如果圖表支援註解，
annotations.textStyle 物件會控制註解文字的外觀：
var options = {
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
// The color of the text.
color: '#871b47',
// The color of the text outline.
auraColor: '#d799ae',
// The transparency of the text.
opacity: 0.8
}
}
};
這個選項目前支援區域、長條圖、柱狀圖、組合圖、折線圖和散佈圖。 註解圖表 不支援此功能。 類型：物件
預設值：null
|
| axisTitlesPosition |
比較軸標題和圖表區域的位置。支援的值：
類型：字串
預設值：「out」
|
| backgroundColor |
圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串 (例如 類型：字串或物件
預設：「white」
|
| backgroundColor.stroke |
圖表邊框顏色，以 HTML 顏色字串表示。 類型：字串
預設值：「#666」
|
| backgroundColor.strokeWidth |
邊框寬度 (以像素為單位)。 類型：數字
預設值：0
|
| backgroundColor.fill |
圖表填滿顏色，以 HTML 顏色字串表示。 類型：字串
預設：「white」
|
| bar.groupWidth |
一組長條的寬度，可使用下列任一格式指定：
類型：數字或字串
預設：黃金比例，約 61.8%。
|
| 長條 |
Material 長條圖中的長條是垂直或水平。這個選項不會影響傳統長條圖或傳統柱狀圖。 類型：「Horizontal」或「vertical」
預設：「vertical」
|
| chartArea |
此物件可讓成員設定圖表區域的位置和大小 (繪製圖表時不含軸和圖例)。系統支援兩種格式：一個數字，或後接 % 的數字。簡單數字是以像素為單位的值，數字後面加上 % 代表百分比。範例： 類型：物件
預設值：null
|
| chartArea.backgroundColor |
圖表區域背景顏色。使用字串時，可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時，可以提供下列屬性：
類型：字串或物件
預設：「white」
|
| chartArea.left |
從左框線繪製圖表的時間長度。 類型：數字或字串
預設：自動
|
| chartArea.top |
圖表與上框線的繪製距離。 類型：數字或字串
預設：自動
|
| chartArea.width |
圖表區域寬度。 類型：數字或字串
預設：自動
|
| chartArea.height |
圖表區域高度。 類型：數字或字串
預設：自動
|
| chart.subtitle |
在質感設計圖表中，此選項可指定字幕。只有質感圖表支援字幕。 類型：字串
預設值：null
|
| chart.title |
在質感設計圖表中，此選項可指定標題。 類型：字串
預設值：null
|
| 顏色 |
圖表元素要使用的顏色。字串陣列，其中每個元素都是 HTML 顏色字串，例如： 類型：字串陣列
預設：預設顏色
|
| dataOpacity |
資料點的透明度，1.0 表示完全不透明，0.0 則完全透明。 在散佈圖、直方圖、長條圖和柱狀圖中，這是指可見資料：散佈圖中的圓點和其他矩形中的矩形。在選取資料的圖表中，系統會建立圓點 (例如折線和面積圖)，指的是懸停或選取時顯示的圓形。組合圖同時呈現出兩種行為，而這個選項對其他圖表沒有影響。(如要變更趨勢線的不透明度，請參閱 趨勢線不透明度 相關說明)。 類型：數字
預設值：1.0
|
| 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
|
| focusTarget |
可接收滑鼠遊標懸停動作的實體類型。這也會影響滑鼠點選時所選取的實體，以及與事件相關聯的資料表元素。可以是下列其中一項：
在 FocusTarget 的「類別」中，工具提示會顯示所有類別值。適合用於比較不同序列的值。 類型：字串
預設：「datum」
|
| 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 模式集
的一部分。舉例來說，
如為日期軸標籤，這是日期格式
ICU 模式集
的一部分。舉例來說， 套用至標籤的實際格式是衍生自載入 API 時使用的語言代碼。詳情請參閱「 載入特定語言代碼的圖表 」。
計算刻點值和格線時，系統會考慮所有相關格線選項的幾種替代組合，如果格式化的刻點標籤重複或重疊，系統會拒絕替代組合。因此，如果您只想顯示整數刻點值，則可以指定
這個選項僅支援 類型：字串
預設：自動
|
| hAxis.gridlines |
具有屬性，可設定水平軸格線的物件。請注意，水平軸格線是垂直繪製的。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示： {color: '#333', minSpacing: 20}
這個選項僅支援 類型：物件
預設值：null
|
| hAxis.gridlines.color |
圖表區域中的水平格線顏色。指定有效的 HTML 顏色字串。 類型：字串
預設：「#CCC」
|
| hAxis.gridlines.count |
圖表區域中的水平格線約略數量。
如果為 類型：數字
預設：-1
|
| hAxis.gridlines.interval |
相鄰格線之間的大小陣列 (做為資料值，而非像素) 陣列。此選項目前只適用於數字軸，但類似於僅適用於日期和時間的 類型：介於 1 到 10 之間的數字 (不含 10)。
預設：已計算
|
| hAxis.gridlines.minSpacing |
介於 hAxis 主要格線之間的最小螢幕空間 (以像素為單位)。
主要格線比例預設為 類型：數字
預設：已計算
|
| hAxis.gridlines.multiple |
所有格線值和刻度值都必須是這個選項值的倍數。請注意，與間隔不同，10 倍的次方不會考量倍數。因此，您可以指定 類型：數字
預設值：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.interval |
小 Gridlines.interval 選項與主要格線間隔選項類似，但所選的間隔一律為主要格線間隔的偶數除數。線性比例的預設時間間隔為 類型：數字
預設值：1
|
| hAxis.minorGridlines.minSpacing |
相鄰次要格線之間，以及小型和主要格線之間至少需要的空間 (以像素為單位)。以線性比例尺度來說，主要格線的 minSpacing 為 1/2，對對數比例而言則為 minSpacing 為 1/5。 類型：數字
預設：經過計算
|
| hAxis.minorGridlines.multiple |
與主要 類型：數字
預設值：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.allowContainerBoundaryTextCutoff |
設為 false 時，可隱藏最外的標籤，以免圖表容器遭到裁剪。如為 true，則可裁剪標籤。 這個選項僅適用於 類型：布林值
預設值：false
|
| hAxis.slantedText |
如果設為 true，沿著特定角度繪製水平軸文字，有助於在軸上容納更多文字；如果為 false，則向右繪製水平軸文字。如果繪製時無法完全容納斜體文字，系統會預設行為。請注意，只有在 類型：布林值
預設：自動
|
| hAxis.slantedTextAngle |
水平軸文字的角度 (如果繪製的話)。如果 類型：數字，- -90—90
預設值：30 個
|
| hAxis.maxAlternation |
水平軸文字層級數量上限。如果軸的文字標籤太擁擠，伺服器可能會將鄰近標籤向上或向下移動，以便將標籤放在較近的位置。這個值會指定最多要使用的層級數；如果標籤可容納不重疊，伺服器可以使用較少的層級。日期和時間的預設值為 1。 類型：數字
預設值：2
|
| hAxis.maxTextLines |
文字標籤的行數上限。如果標籤過長，標籤可以橫跨多行。行數預設為可用空間的高度限制。 類型：數字
預設：自動
|
| 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 |
指定水平軸的裁剪範圍。 類型：物件
預設值：null
|
| hAxis.viewWindow.max |
當 類型：數字
預設：自動
|
| hAxis.viewWindow.min |
當 類型：數字
預設：自動
|
| 高度 |
圖表的高度，以像素為單位。 類型：數字
預設：所含元素的高度
|
| isStacked |
如果設為 True，系統就會在每個網域值中堆疊所有序列的元素。 注意：在「Column」、「Area」和「SteppedArea」圖表中，Google 圖表會反向排序圖例項目的順序，使其與序列元素的堆疊更一致 (例如，0 系列是最底部的圖例項目)。這項「不」 適用於長條圖圖表。
如果是 100% 堆疊，每個元素的計算值會顯示在工具提示中的實際值之後。
根據預設，目標軸的刻度值是以相對 0-1 尺度為準，亦即
100% 堆疊僅支援 類型：布林值/字串
預設值：false
|
| 傳說 |
由成員組成的物件，可設定圖例的各個層面。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示： {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
類型：物件
預設值：null
|
| legend.pageIndex |
已為圖例預先選取零開始頁面索引。 類型：數字
預設值：0
|
| legend.position |
圖例位置。可以是下列其中一項：
類型：字串
預設值：「right」
|
| legend.alignment |
圖例的對齊。可以是下列其中一項：
起點、中心和結束點是以圖例的樣式 (垂直或水平) 為準。舉例來說，在「右側」圖例中，「start」和「end」分別位於頂端和底部。如果是「頂端」圖例，「start」和「end」則分別位於區域的左側和右側。 預設值取決於圖例位置。「bottom」圖例的預設值為「center」，其他圖例則預設為「start」。 類型：字串
預設：自動
|
| legend.textStyle |
指定圖例文字樣式的物件。物件的格式如下：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
類型：物件
預設：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| 方向 |
圖表方向。如果設為 類型：字串
預設：「Horizontal」
|
| reverseCategories |
如果設為 true，則是由右至左繪製序列。預設為從左到右繪製。 類型：布林值
預設值：false
|
| 系列叢書 |
物件的陣列，每個物件都會說明圖表中對應序列的格式。如要使用時間序列的預設值，請指定空白物件 {}。如未指定序列或值，則會使用全域值。每個物件都支援下列屬性：
您可以指定物件的陣列，其中每個陣列都會依指定順序套用至系列，或者您可以指定各子項一個數字鍵，代表要套用哪個序列。舉例來說，以下兩個宣告皆相同，並將第一個序列宣告為來自圖例，第 4 個是紅色且從圖例中消失：
series: [
{color: 'black', visibleInLegend: false}, {}, {},
{color: 'red', visibleInLegend: false}
]
series: {
0:{color: 'black', visibleInLegend: false},
3:{color: 'red', visibleInLegend: false}
}
類型：物件陣列，或含有巢狀物件的物件
預設：{}
|
| 主題 |
主題是一組預先定義的選項值，可搭配運作來達成特定圖表行為或視覺效果。目前只有一個主題：
類型：字串
預設值：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.ignoreBounds |
如果設為 注意：這僅適用於 HTML 工具提示。透過 SVG 工具提示啟用這項功能時，系統會裁剪圖表邊界外的所有溢位。詳情請參閱「自訂工具提示內容」一文。 類型：布林值
預設值：false
|
| tooltip.isHtml |
如果設為 true，將使用 HTML 算繪 (而非 SVG 算繪) 的工具提示。詳情請參閱「自訂工具提示內容」一文。 注意：泡泡圖圖表「不」支援透過工具提示欄資料角色自訂 HTML 工具提示內容。 類型：布林值
預設值：false
|
| tooltip.showColorCode |
如為 true，則在工具提示中的系列資料旁邊顯示彩色方塊。在 類型：布林值
預設：自動
|
| 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」
|
| 趨勢線 |
在支援圖表的圖表中顯示
趨勢線
。根據預設，系統會使用線性趨勢線，但您可以使用
趨勢線是以個別系列為依據，因此您的選項在大部分時間看起來會像這樣：
var options = {
trendlines: {
0: {
type: 'linear',
color: 'green',
lineWidth: 3,
opacity: 0.3,
showR2: true,
visibleInLegend: true
}
}
}
類型：物件
預設值：null
|
| trendlines.n.color |
趨勢線 的顏色，以英文顏色名稱或十六進位字串表示。 類型：字串
預設：預設系列顏色
|
| trendlines.n.degree |
針對 類型：數字
預設值：3
|
| trendlines.n.labelInLegend |
設定後， 趨勢線 會以這個字串顯示在圖例中。 類型：字串
預設值：null
|
| trendlines.n.lineWidth |
趨勢線 的線條寬度 (以像素為單位)。 類型：數字
預設值：2
|
| trendlines.n.opacity |
趨勢線 的透明度，從 0.0 (透明) 到 1.0 (不透明)。 類型：數字
預設值：1.0
|
| trendlines.n.pointSize |
趨勢線
是指在圖表上戳出許多圓點；這個很少需要的選項可讓您自訂圓點的大小。趨勢線的 類型：數字
預設值：1
|
| trendlines.n.pointsVisible |
趨勢線
會在圖表中戳許多圓點。趨勢線的 類型：布林值
預設值：true
|
| trendlines.n.showR2 |
是否在圖例或趨勢線工具提示中顯示 決定係數 。 類型：布林值
預設值：false
|
| trendlines.n.type |
趨勢線
是否為 類型：字串
預設：線性
|
| trendlines.n.visibleInLegend |
是否在圖例中顯示 趨勢線 。(顯示在趨勢線的工具提示中)。 類型：布林值
預設值：false
|
| vAxes |
如果圖表有多個垂直軸，請指定個別垂直軸的屬性。每個子項物件都是
如要指定包含多個垂直軸的圖表，請先使用
{
series: {
2: {
targetAxisIndex:1
}
},
vAxes: {
1: {
title:'Losses',
textStyle: {color: 'red'}
}
}
}
這個屬性可以是物件或陣列：物件是物件的集合，每個物件都會有指定所定義軸的數值標籤，也就是上述格式；陣列是物件的陣列，每個軸代表一個物件。舉例來說，下列陣列樣式標記法與上述
vAxes: [
{}, // Nothing specified for axis 0
{
title:'Losses',
textStyle: {color: 'red'} // Axis 1
}
]
類型：物件陣列，或含子項物件的物件
預設值：null
|
| 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.interval |
相鄰格線之間的大小陣列 (做為資料值，而非像素) 陣列。此選項目前只適用於數字軸，但類似於僅適用於日期和時間的 類型：介於 1 到 10 之間的數字 (不含 10)。
預設：已計算
|
| vAxis.gridlines.minSpacing |
介於 hAxis 主要格線之間的最小螢幕空間 (以像素為單位)。
主要格線比例預設為 類型：數字
預設：已計算
|
| vAxis.gridlines.multiple |
所有格線值和刻度值都必須是這個選項值的倍數。請注意，與間隔不同，10 倍的次方不會考量倍數。因此，您可以指定 類型：數字
預設值：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.interval |
小 Gridlines.interval 選項與主要格線間隔選項類似，但所選的間隔一律為主要格線間隔的偶數除數。線性比例的預設時間間隔為 類型：數字
預設值：1
|
| vAxis.minorGridlines.minSpacing |
相鄰次要格線之間，以及小型和主要格線之間至少需要的空間 (以像素為單位)。以線性比例尺度來說，主要格線的 minSpacing 為 1/2，對對數比例而言則為 minSpacing 為 1/5。 類型：數字
預設：經過計算
|
| vAxis.minorGridlines.multiple |
與主要 類型：數字
預設值：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 |
在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 屬性：無
|
資料政策
所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。