總覽
直方圖是一種圖表，將數字資料分為多個特徵分塊，將特徵分塊顯示為區隔資料欄。可用於描繪資料集的分佈情形，也就是值成為範圍的頻率。
Google 圖表會自動選擇特徵分塊數量。 所有特徵分塊的寬度都相同，高度則與特徵分塊中資料點的數量成正比。另一方面，直方圖則與柱狀圖類似。
範例
以下是恐龍長度的直方圖：
直方圖顯示最常見的特徵分塊為 < 10 公尺，且只有一個恐龍超過 40 公尺。我們可以將滑鼠遊標懸停在長條上，就能發現這是 Seismosaurus (這可能只是個巨大的文憑，古生物學家尚未確定)。
產生此直方圖的程式碼如下所示。定義資料後 (此處使用 google.visualization.arrayToDataTable) 定義圖表後，系統會透過呼叫 google.visualization.Histogram 來定義圖表，並使用 draw 方法繪製。
<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([
['Dinosaur', 'Length'],
['Acrocanthosaurus (top-spined lizard)', 12.2],
['Albertosaurus (Alberta lizard)', 9.1],
['Allosaurus (other lizard)', 12.2],
['Apatosaurus (deceptive lizard)', 22.9],
['Archaeopteryx (ancient wing)', 0.9],
['Argentinosaurus (Argentina lizard)', 36.6],
['Baryonyx (heavy claws)', 9.1],
['Brachiosaurus (arm lizard)', 30.5],
['Ceratosaurus (horned lizard)', 6.1],
['Coelophysis (hollow form)', 2.7],
['Compsognathus (elegant jaw)', 0.9],
['Deinonychus (terrible claw)', 2.7],
['Diplodocus (double beam)', 27.1],
['Dromicelomimus (emu mimic)', 3.4],
['Gallimimus (fowl mimic)', 5.5],
['Mamenchisaurus (Mamenchi lizard)', 21.0],
['Megalosaurus (big lizard)', 7.9],
['Microvenator (small hunter)', 1.2],
['Ornithomimus (bird mimic)', 4.6],
['Oviraptor (egg robber)', 1.5],
['Plateosaurus (flat lizard)', 7.9],
['Sauronithoides (narrow-clawed lizard)', 2.0],
['Seismosaurus (tremor lizard)', 45.7],
['Spinosaurus (spiny lizard)', 12.2],
['Supersaurus (super lizard)', 30.5],
['Tyrannosaurus (tyrant lizard)', 15.2],
['Ultrasaurus (ultra lizard)', 30.5],
['Velociraptor (swift robber)', 1.8]]);
var options = {
title: 'Lengths of dinosaurs, in meters',
legend: { position: 'none' },
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
您可以省略標籤 (此處為恐龍名稱)，在此情況下，工具提示只會顯示數值。
控制顏色
以下是全國人口的直方圖：
目前有超過兩百個國家/地區的人口不到一百億，之後則有嚴重的尾巴
此直方圖使用 colors 選項以綠色繪製資料：
var options = {
title: 'Country Populations',
legend: { position: 'none' },
colors: ['green'],
};
和所有 Google 圖表一樣，顏色可以指定為英文名稱或十六進位值。
控管值區
根據預設，Google Charts 會使用知名的直方圖演算法，自動選擇值區大小。但有時候，您可能會想覆寫這項設定，上方的圖表只是範例。第一個值區中有許多國家/地區，很難逐一檢查其他國家/地區。
在這種情況下，直方圖會提供兩個選項：histogram.bucketSize，這會覆寫演算法並對值區大小進行硬式編碼；以及 histogram.lastBucketPercentile。第二個選項需要詳細說明：它會變更值區大小的計算，以忽略高於或低於指定百分比的值。這些值仍會包含在直方圖中，但不會影響值的值區分類方式。如果您不希望離群值放在所屬值區，這個方法會改以第一個或最後一個值區分組。
在上圖中，我們忽略了計算值區大小的前五%和後五%值。值仍會繪製圖表；唯一變更的項目是值區大小，但這樣可以產生更易讀的直方圖。
本範例也展示瞭如何將垂直軸的尺度變更為使用「鏡像記錄」量表，這也有助於繪製具有小尾值的長尾資料圖表。
var options = {
title: 'Country Populations',
legend: { position: 'none' },
colors: ['#e7711c'],
histogram: { lastBucketPercentile: 5 },
vAxis: { scaleType: 'mirrorLog' }
};
如您所見，將頂部和下 5% 從計算結果中移除後，值區大小會是 10,000,000，而不是 100,000,000 次。如果您知道 10,000,000 的值區大小符合需求，可以使用 histogram.bucketSize 完成以下作業：
var options = {
title: 'Country Populations',
legend: { position: 'none' },
colors: ['#e7711c'],
histogram: { bucketSize: 10000000 }
};
在下例中，我們將說明如何擴大值區範圍，並顯示更多值區，且值區之間不會有落差。maxNumBuckets 選項可用於增加預設值區數量。histogram.minValue 和 histogram.maxValue 選項會擴大值區的範圍，但請注意，如果資料在這個範圍之外，這些選項不會縮小範圍。
這個範例也顯示，您可以使用 hAxis 的明確 ticks 選項，為每個值區指定要顯示的滴答符號。這不會影響值區本身，但只會影響勾號的顯示方式。
另請注意，我們也指定 chartArea.width，如此一來，就算沒有視覺化的構件，值區數量也能更精確。這個示例的選項如下。
var options = {
title: 'Approximating Normal Distribution',
legend: { position: 'none' },
colors: ['#4285F4'],
chartArea: { width: 405 },
hAxis: {
ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
},
bar: { gap: 0 },
histogram: {
bucketSize: 0.01,
maxNumBuckets: 400,
minValue: -1,
maxValue: 1
}
};
多系列
以下是子原子粒子費用的直方圖 (根據標準模型)：
上圖中的一個系列包含所有粒子。 次原子粒子可分為四類：鯊魚、獅子和骨骼。我們可以將每個項目視為各自的系列：
在這個圖表中，我們針對四種次原子粒子分別使用不同的序列 (以及相應的顏色)。我們明確將 interpolateNulls 設為 false，以確保系統未繪製空值 (因為系列的長度不相同而需要)。我們也設定了 legend.maxLines，在圖例中新增另一行：
var data = google.visualization.arrayToDataTable([
['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
[2/3, -1, 0, 0],
[2/3, -1, 0, null],
[2/3, -1, 0, null],
[-1/3, 0, 1, null],
[-1/3, 0, -1, null],
[-1/3, 0, null, null],
[-1/3, 0, null, null]
]);
var options = {
title: 'Charges of subatomic particles',
legend: { position: 'top', maxLines: 2 },
colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
interpolateNulls: false,
};
載入中
google.charts.load 套件名稱為 "corechart"。
google.charts.load("current", {packages: ["corechart"]});
視覺呈現的類別名稱為 google.visualization.Histogram：
var visualization = new google.visualization.Histogram(container);
資料格式
填入直方圖資料表的方法有兩種。只有一系列叢書時：
var data = google.visualization.arrayToDataTable([
['Name', 'Number'],
['Name 1', number1],
['Name 2', number2],
['Name 3', number3],
...
]);
...如果有多個系列叢書：
var data = google.visualization.arrayToDataTable([
['Series Name 1', 'Series Name 2', 'Series Name 3', ...],
[series1_number1, series2_number1, series3_number1, ...],
[series1_number2, series2_number2, series3_number2, ...],
[series1_number3, series2_number3, series3_number3, ...],
...
]);
直方圖目前不支援選用欄角色。
設定選項
| 名稱 | |
|---|---|
| animation.duration |
此為動畫的時間長度，以毫秒為單位。詳情請參閱動畫說明文件。 類型：數字
預設值：0
|
| animation.easing |
套用至動畫的加/減速功能。可用選項如下所示：
類型：字串
預設：「線性」
|
| animation.startup |
指定圖表是否會在初次繪圖時顯示動畫。如果設為 類型：布林值
預設 false
|
| axisTitlesPosition |
比較軸標題和圖表區域的位置。支援的值：
類型：字串
預設值：「out」
|
| backgroundColor |
圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串 (例如 類型：字串或物件
預設：「white」
|
| backgroundColor.stroke |
圖表邊框顏色，以 HTML 顏色字串表示。 類型：字串
預設值：「#666」
|
| backgroundColor.strokeWidth |
邊框寬度 (以像素為單位)。 類型：數字
預設值：0
|
| backgroundColor.fill |
圖表填滿顏色，以 HTML 顏色字串表示。 類型：字串
預設：「white」
|
| bar.groupWidth |
一組長條的寬度，可使用下列任一格式指定：
類型：數字或字串
預設：黃金比例，約 61.8%。
|
| chartArea |
此物件可讓成員設定圖表區域的位置和大小 (繪製圖表時不含軸和圖例)。系統支援兩種格式：一個數字，或後接 % 的數字。簡單數字是以像素為單位的值，數字後面加上 % 代表百分比。範例： 類型：物件
預設值：null
|
| chartArea.backgroundColor |
圖表區域背景顏色。使用字串時，可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時，可以提供下列屬性：
類型：字串或物件
預設：「white」
|
| chartArea.left |
從左框線繪製圖表的時間長度。 類型：數字或字串
預設：自動
|
| chartArea.top |
圖表與上框線的繪製距離。 類型：數字或字串
預設：自動
|
| chartArea.width |
圖表區域寬度。 類型：數字或字串
預設：自動
|
| chartArea.height |
圖表區域高度。 類型：數字或字串
預設：自動
|
| 顏色 |
圖表元素要使用的顏色。字串陣列，其中每個元素都是 HTML 顏色字串，例如： 類型：字串陣列
預設：預設顏色
|
| dataOpacity |
資料點的透明度，1.0 表示完全不透明，0.0 則完全透明。 在散佈圖、直方圖、長條圖和柱狀圖中，這是指可見資料：散佈圖中的圓點和其他矩形中的矩形。在選取資料的圖表中，系統會建立圓點 (例如折線和面積圖)，指的是懸停或選取時顯示的圓形。組合圖同時呈現出兩種行為，而這個選項對其他圖表沒有影響。(如要變更趨勢線的不透明度，請參閱 趨勢線不透明度 相關說明)。 類型：數字
預設值：1.0
|
| enableInteractivity |
圖表是否會擲回以使用者為基礎的事件，或是對使用者互動做出反應。如果設為 False，圖表不會擲回「select」或其他互動型事件 (但「會」擲回已就緒或錯誤的事件)，且不會顯示懸停文字，或根據使用者輸入內容而變更。 類型：布林值
預設值：true
|
| focusTarget |
可接收滑鼠遊標懸停動作的實體類型。這也會影響滑鼠點選時所選取的實體，以及與事件相關聯的資料表元素。可以是下列其中一項：
在 FocusTarget 的「類別」中，工具提示會顯示所有類別值。適合用於比較不同序列的值。 類型：字串
預設：「datum」
|
| fontSize |
圖表中所有文字的預設字型大小 (以像素為單位)。您可以使用特定圖表元素的屬性覆寫這項設定。 類型：數字
預設：自動
|
| fontName |
圖表中所有文字的預設字型。您可以使用特定圖表元素的屬性覆寫這項設定。 類型：字串
預設值：「trigger」
|
| forceIFrame |
在內嵌頁框中繪製圖表。(請注意，在 IE8 中，系統會忽略此選項；所有 IE8 圖表都會繪製成 iFrame。) 類型：布林值
預設值：false
|
| hAxis |
可讓成員設定各種水平軸元素的物件。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
類型：物件
預設值：null
|
| 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.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.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.viewWindowMode |
指定如何縮放水平軸，以轉譯圖表區域中的值。支援的字串值如下：
類型：字串
預設值：等同於「漂亮」，但使用時優先度為
haxis.viewWindow.min 和 haxis.viewWindow.max。 |
| hAxis.viewWindow |
指定水平軸的裁剪範圍。 類型：物件
預設值：null
|
| hAxis.viewWindow.max |
裁剪視窗結束的位置，從零開始的資料列索引。系統會將位於這個索引以上數值的資料點遭到裁剪。會與 當 類型：數字
預設：自動
|
| hAxis.viewWindow.min |
以零為基準的列索引，這是裁剪視窗的起始位置。而索引低於這個值的資料點會遭到裁剪。加上 當 類型：數字
預設：自動
|
| histogram.bucketSize |
將每個直方圖列的大小進行硬式編碼，而非由演算法決定。 類型：數字
預設：自動
|
| histogram.hideBucketItems |
省略直方圖區塊之間的細分差，使其成為一連串實線。 類型：布林值
預設值：false
|
| histogram.lastBucketPercentile |
計算直方圖的值區大小時，請忽略頂端和底部 類型：數字
預設值：0
|
| histogram.minValue |
擴大值區範圍以納入這個值。 類型：數字
預設：自動 - 使用數據用量下限
|
| histogram.maxValue |
擴大值區範圍以納入這個值。 類型：數字
預設：自動 - 使用資料上限
|
| histogram.numBucketsRule |
如何計算預設值區數量。可能的值包括：
類型：字串
預設：
'sqrt' |
| 高度 |
圖表的高度，以像素為單位。 類型：數字
預設：所含元素的高度
|
| interpolateNulls |
是否猜測遺漏分數的價值。如果為 true，則會根據相鄰點猜測任何遺漏資料的值。如果為 false，系統會在不明點的行中留下休息時間。
提供 類型：布林值
預設值：false
|
| isStacked |
如果設為 True，系統就會在每個網域值中堆疊所有序列的元素。 注意：在「Column」、「Area」和「SteppedArea」圖表中，Google 圖表會反向排序圖例項目的順序，使其與序列元素的堆疊更一致 (例如，0 系列是最底部的圖例項目)。這項「不」 適用於長條圖圖表。
如果是 100% 堆疊，每個元素的計算值會顯示在工具提示中的實際值之後。
根據預設，目標軸的刻度值是以相對 0-1 尺度為準，亦即
100% 堆疊僅支援 類型：布林值/字串
預設值：false
|
| 傳說 |
由成員組成的物件，可設定圖例的各個層面。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示： {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>}
|
| 方向 |
圖表方向。如果設為 類型：字串
預設：「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.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」
|
| 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 |
在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 屬性：無
|
資料政策
所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。