總覽
Google 長條圖會使用 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 來顯示格線。在第四個列中，會使用三個樣式屬性：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">
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.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
<div id="barchart_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},
hAxis: {minValue: 0}
};
var options_fullStacked = {
isStacked: 'percent',
height: 300,
legend: {position: 'top', maxLines: 3},
hAxis: {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
建立 Material 長條圖
Google 在 2014 年發布了相關規範，針對在 Google 平台上執行的各項資源和應用程式 (例如 Android 應用程式)，支援一般外觀和風格。這種做法稱為「質感設計」。我們將提供所有核心圖表的「Material」版本；如果您需要，歡迎繼續使用。
建立質感長條圖與建立概念類似，現在我們稱為「經典」長條圖。您會載入 Google Visualization API (雖然使用 'bar' 套件而非 'corechart' 套件)、定義資料表，然後建立物件 (但類別不是 google.charts.Bar，而不是 google.visualization.BarChart)。
注意：質感圖表不適用於舊版 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',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; 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 預設選項。
Dual-X 圖表
注意：Dual-X 軸僅適用於 Material 圖表 (也就是含有 bar 套件的圖表)。
有時候，您會想在長條圖中顯示兩個序列，並且有兩個獨立的 X 軸：一個序列的頂部，另一個是另一個序列的底部軸：
請注意，兩個 x 軸標記不同 (「parsecs」與「apparent magnitude」)，並各自有專屬的縮放比例和格線。如要自訂這項行為，請使用 hAxis.gridlines 選項。
在下方程式碼中，axes 和 series 選項會同時指定圖表的雙 X 外觀。series 選項會指定每個項目要使用的軸 ('distance' 和 'brightness'；不需要與資料表中的資料欄名稱建立任何關係)。接著，axes 選項會將這張圖表設為雙 X 圖表，將 'apparent magnitude' 軸置於頂端，且 'parsecs' 軸在底部。
<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([
['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 options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'horizontal', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="dual_x_div" style="width: 900px; 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([
['Opening 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 = {
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
載入中
google.charts.load 套件名稱為 "corechart"。視覺呈現的類別名稱為 google.visualization.BarChart。
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.BarChart(container);
對於 Material 長條圖，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.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.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.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
|
| hAxes |
如果圖表有多個水平軸，請指定個別水平軸的屬性。每個子項物件都是
如要指定包含多個水平軸的圖表，請先使用
這個屬性可以是物件或陣列：物件是物件的集合，每個物件都會有指定所定義軸的數值標籤，也就是上述格式；陣列是物件的陣列，每個軸代表一個物件。舉例來說，下列陣列樣式標記法與上述
hAxes: {
{}, // Nothing specified for axis 0
{
title:'Losses',
textStyle: {
color: 'red'
}
} // Axis 1
類型：物件陣列，或含子項物件的物件
預設值：null
|
| 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.textStyle |
這個物件會指定水平軸文字樣式。物件的格式如下：
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
類型：物件
預設：
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.textPosition |
橫軸文字相對於圖表區域的位置。支援的值：「out」、「in」、「none」。 類型：字串
預設值：「out」
|
| 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 |
要顯示的水平資料最小值。 當 類型：數字
預設：自動
|
| 高度 |
圖表的高度，以像素為單位。 類型：數字
預設：所含元素的高度
|
| 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>}
|
| reverseCategories |
如果設為 true，則會由下往上繪製序列。預設為由上至下繪製。 類型：布林值
預設值：false
|
| 方向 |
圖表方向。如果設為 類型：字串
預設：「Horizontal」
|
| 系列叢書 |
物件的陣列，每個物件都會說明圖表中對應序列的格式。如要使用時間序列的預設值，請指定空白物件 {}。如未指定序列或值，則會使用全域值。每個物件都支援下列屬性：
您可以指定物件的陣列，其中每個陣列都會依指定順序套用至系列，或者您可以指定各子項一個數字鍵，代表要套用哪個序列。舉例來說，以下兩個宣告皆相同，並將第一個序列宣告為來自圖例，第 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
|
| vAxis |
包含成員的物件，可設定各種垂直軸元素。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示： {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
類型：物件
預設值：null
|
| vAxis.baseline |
這個選項僅支援 類型：數字
預設：自動
|
| vAxis.baselineColor |
指定縱軸的基準顏色。可以是任何 HTML 顏色字串，例如
這個選項僅支援 類型：數字
預設：「black」
|
| vAxis.direction |
垂直軸值成長的方向。根據預設，低值會顯示在圖表底部。指定 類型：1 或 -1
預設值：1
|
| vAxis.format |
數字或日期軸標籤的格式字串。
如為數字軸標籤，這是十進位格式
ICU 模式集
的一部分。舉例來說，
如為日期軸標籤，這是日期格式
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 |
在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 屬性：無
|
資料政策
所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。