簡介
「直方圖」可將數字資料分組為特徵分塊,並以 bin 顯示區隔。用來描述資料集的分佈情形,也就是值落在範圍內的頻率。
Google 圖表會自動為您選擇集數。所有 bin 的寬度都相同,且高度與 bin 中的資料點數量成正比。在其他方面,直方圖則會與柱狀圖類似。
範例
以下是恐龍長度的直方圖:
直方圖顯示,最常見的 bin 小於 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>
您可以省略標籤 (這裡是指恐龍名稱),此時工具提示只會顯示數值。
控制顏色
以下是國家人口的直方圖:
人口超過 200 人,人口少於 100 萬人,之後又面臨嚴重的斷網。
這個直方圖使用 colors
選項以綠色繪製資料:
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['green'], };
和所有 Google 圖表一樣,您可以將顏色指定為英文名稱或十六進位值。
控制值區
根據預設,Google 圖表會自動根據已知的直方圖演算法選擇值區的大小。但有時您會需要覆寫,而上圖為範例。由於第一個值區中有太多國家/地區,不容易在其他國家/地區檢查。
在這類情況下,直方圖會提供兩個選項:histogram.bucketSize
會覆寫演算法大小並對其硬式編碼進行硬式編碼;以及 histogram.lastBucketPercentile
。第二個選項需要更多說明:這會變更值區大小的運算,並忽略高於或低於剩餘值的值 (以您指定的百分比表示)。這些值仍包含在直方圖中,但不會影響到值區的建立方式。如果您不想讓離群值到達自己的值區,這項功能就非常實用。系統會改用第一個或最後一個值區來分組。
在上圖中,我們在計算值區大小時忽略了前 5% 和前 5% 的值。這些值仍會以圖表呈現;唯一的變更是值區大小,但使得直方圖更容易閱讀。
此範例說明如何將垂直軸的縮放比例變更為使用「鏡像記錄」縮放比例,這也有助於在繪製具有小值的長尾資料時進行繪製。
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['#e7711c'], histogram: { lastBucketPercentile: 5 }, vAxis: { scaleType: 'mirrorLog' } };
如您所見,移除前 5% 的頂部和底部 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 } };
多個系列
根據 Standard Model (標準模型) 而定,子原子粒的收費直方圖如下:
上圖有一連串的全貌。 子原子粒子可分為四個群組:海上、子獅和骨子。讓我們將自己視為各自的系列:
在此圖表中,我們會使用四種子基底粒子中的各種類型 (因此會選擇顏色)。我們明確將 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, ...], ... ]);
目前,直方圖不支援選用的資料欄角色。
設定選項
名稱 | |
---|---|
動畫.duration |
動畫的時間長度 (以毫秒為單位)。詳情請參閱動畫說明文件。 類型:數字
預設:0
|
動畫 |
套用至動畫的加/減速函式。可用選項如下所示:
類型:字串
預設值:「Linear」
|
動畫.startup |
用於決定圖表是否在初始繪圖時呈現動畫效果。如果設為 類型:布林值
Default 否
|
軸標題位置 |
與圖表區域比較的軸標題。支援的值:
類型:字串
預設值:「out」
|
backgroundColor |
圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串,例如 類型:字串或物件
預設:「white」
|
背景色彩 |
圖表邊框的顏色,以 HTML 顏色字串表示。 類型:字串
預設值:「#666」
|
背景色彩.筆寬度 |
框線寬度 (單位為像素)。 類型:數字
預設:0
|
background..fill |
圖表會以 HTML 色彩字串填入顏色。 類型:字串
預設:「white」
|
bar.groupWidth |
長條的寬度,以下列任一格式指定:
類型:數字或字串
預設值:黃金比例,約為「61.8%」。
|
圖表區域 |
擁有成員可設定圖表區域位置和大小的物件 (繪製圖表本身的位置,不含軸和圖例)。系統支援數字格式:範例: 類型:物件
預設值:空值
|
圖表區域 |
圖表區域背景顏色。使用字串時,可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時,您可以提供下列屬性:
類型:字串或物件
預設:「white」
|
圖表區域 |
從左框線繪製圖表的程度。 類型:數字或字串
預設:自動
|
排行榜區域 |
從上方邊框繪製圖表的程度。 類型:數字或字串
預設:自動
|
圖表區域 |
圖表區域寬度。 類型:數字或字串
預設:自動
|
圖表區域 |
圖表區域高度。 類型:數字或字串
預設:自動
|
顏色 |
圖表元素的顏色。字串陣列,其中每個元素都是 HTML 顏色字串,例如: 類型:字串陣列
預設:預設顏色
|
資料不透明度 |
資料點的透明度,1.0 表示完全不透明,0.0 則是完全透明。在散佈圖、直方圖、長條圖和柱狀圖中,您可以看到可見資料:散佈圖中的點和其他的矩形。在選取資料的情況下建立包含點的圖表 (例如折線圖和面積圖),指的是滑鼠遊標懸停時所顯示的圓圈。組合圖顯示兩種行為,這個選項對其他圖表沒有影響。(如要變更趨勢線的不透明度,請參閱「趨勢線透明度」一節)。 類型:數字
預設值:1.0
|
啟用互動功能 |
圖表是否擲回了以使用者為主的事件或回應使用者互動。設為 False 時,圖表不會擲回「選取」或其他以互動為基礎的事件 (但會「擲出就緒」或「錯誤」的事件),而且不會顯示使用者的文字,或是隨著使用者輸入的內容而改變。 類型:布林值
預設:是
|
焦點目標 |
滑鼠遊標懸停時接收焦點的實體類型。也會影響滑鼠點擊時選取的實體,以及與事件相關聯的資料表元素。可能是下列其中一個值:
在 FocusTarget「category」中,工具提示會顯示所有類別的值。這在比較不同系列的值時相當實用。 類型:字串
預設值:「datum」
|
字型大小 |
圖表中所有文字的預設字型大小 (以像素為單位)。您可以使用特定圖表元素的屬性覆寫這項設定。 類型:數字
預設:自動
|
字型名稱 |
圖表中所有文字的預設字型。您可以使用特定圖表元素的屬性覆寫這項設定。 類型:字串
預設:「Arial」
|
ForceIFrame |
在內嵌頁框中繪製圖表。(請注意,在 IE8 中,系統會忽略此選項;所有 IE8 圖表都會以 i-frames 繪製)。 類型:布林值
預設值:false
|
HAXis |
擁有成員可設定各種水平軸元素的物件。若要指定此物件的屬性,您可以使用物件常值標記法,如下所示: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } 類型:物件
預設值:空值
|
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.count |
類型:數字
預設:1
|
hAxis.minorGridlines.interval |
smallGridlines.interval 選項與主要格線間隔選項類似,但選擇的間隔一律是主要格線間隔的除數。線性資源調度的預設時間間隔為 類型:數字
預設:1
|
hAxis.minorGridlines.minSpacing |
相鄰的小格線之間以及次要與主要格線之間,所必需的最小空間 (以像素為單位)。預設值為 1/2 的 1/2 線性比例 (線性線性線條) 和 1/5 (最小對數)。 類型:數字
預設值:經過計算
|
hAxis.minorGridlines.multi |
與主要 類型:數字
預設: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.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.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.viewWindowMode |
指定如何縮放水平軸以在圖表區域中顯示值。系統支援下列字串值:
類型:字串
預設值:等同於「美屬」;不過如果使用的話,系統會優先採用
haxis.viewWindow.min 和 haxis.viewWindow.max 。
|
hAxis.viewWindow |
指定水平軸的裁剪範圍。 類型:物件
預設值:空值
|
hAxis.viewWindow.max |
裁剪資料列的零資料列資料列索引。此索引及更高級別的資料點將會遭到裁剪。此屬性與 「 類型:數字
預設:自動
|
hAxis.viewWindow.min |
裁剪列從零開始計算的列索引。系統會捨棄低於這個指標的資料點。此屬性與 「 類型:數字
預設:自動
|
Hitogram.bucketSize |
對每個直方圖長條的大小進行硬式編碼,而非由演算法決定。 類型:數字
預設:自動
|
Hitogram.hideBucketItems |
省略直方圖區塊之間的細分,讓它成為一連串的實心長條。 類型:布林值
預設值:false
|
Hitogram.lastBucketPercentile |
在計算直方圖的值區大小時,請忽略頂端和底端 類型:數字
預設:0
|
Hitogram.minValue |
展開值區範圍以納入這個值。 類型:數字
預設:自動 - 使用數據用量下限
|
Hitogram.maxValue |
展開值區範圍以納入這個值。 類型:數字
預設:自動 - 使用數據用量上限
|
Hitogram.numBucketsRule |
如何計算預設值區數量。可能的值包括:
類型:字串
預設:
'sqrt' |
height |
圖表的高度,以像素為單位。 類型:數字
預設:所含元素的高度
|
InterpolateNulls |
是否要猜測遺漏點的值。如為 true,則會根據鄰近點猜測任何遺漏的資料值。如為 false,則會在未知位置排隊。
含有 類型:布林值
預設值:false
|
已堆疊 |
如果設為 true,系統會在每個網域值堆疊所有系列的元素。注意:在資料欄、區域和步驟 8 中,Google 圖表會反轉圖例項目的順序,以更妥善地對應到系列元素的堆疊 (例如係列 0 為最下方的圖例項目)。這並不適用於長條圖圖表。
如果是 100% 的堆疊,每個元素計算的值會顯示在其實際值之後的工具提示中。
目標軸將根據相對 0-1 縮放 (例如
100% 堆疊功能只支援 類型:布林值/字串
預設值:false
|
傳說 |
包含成員,用於設定圖例各個層面的物件。若要指定此物件的屬性,您可以使用物件常值標記法,如下所示: {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
|
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.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 |
使用者點選視覺實體時觸發。如要瞭解所選項目,請呼叫 屬性:無
|
資料政策
系統會處理所有程式碼和資料,並在瀏覽器中顯示。系統不會將資料傳送至任何伺服器。