總覽
這張圖表可讓您在下列清單中將各個序列算繪為不同的標記類型:折線、面積、長條、K 線和階梯狀區域。
如要指派序列的預設標記類型,請指定 seriesType
屬性。請使用 series
屬性個別指定每個序列的屬性。
範例
<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(drawVisualization); function drawVisualization() { // Some raw data (not necessarily accurate) var data = google.visualization.arrayToDataTable([ ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'], ['2004/05', 165, 938, 522, 998, 450, 614.6], ['2005/06', 135, 1120, 599, 1268, 288, 682], ['2006/07', 157, 1167, 587, 807, 397, 623], ['2007/08', 139, 1110, 615, 968, 215, 609.4], ['2008/09', 136, 691, 629, 1026, 366, 569.6] ]); var options = { title : 'Monthly Coffee Production by Country', vAxis: {title: 'Cups'}, hAxis: {title: 'Month'}, seriesType: 'bars', series: {5: {type: 'line'}} }; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
載入中
google.charts.load
套件名稱為 "corechart"
google.charts.load("current", {packages: ["corechart"]});
視覺呈現的類別名稱為 google.visualization.ComboChart
var visualization = new google.visualization.ComboChart(container);
資料格式
資料列:表格中的每一列都代表具有相同 x 軸位置的一組資料點。
資料欄:
第 0 欄 | 第 1 欄 | ... | 第 N 欄 | |
---|---|---|---|---|
用途: |
|
第 1 行的值 | ... | 第 N 行值 |
資料類型: | 號碼 | ... | 號碼 | |
角色: | 網域 | 資料 | ... | 資料 |
選用的資料欄角色: | ... |
設定選項
名稱 | |
---|---|
aggregationTarget |
系統會將多個選取的資料彙整成工具提示:
aggregationTarget 通常會與 selectionMode 和 tooltip.trigger 搭配使用,例如:var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; 類型:字串
預設:「auto」
|
animation.duration |
此為動畫的時間長度,以毫秒為單位。詳情請參閱動畫說明文件。 類型:數字
預設值:0
|
animation.easing |
套用至動畫的加/減速功能。可用選項如下所示:
類型:字串
預設:「線性」
|
animation.startup |
指定圖表是否會在初次繪圖時顯示動畫。如果設為 類型:布林值
預設 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
|
areaOpacity |
面積圖系列下方彩色區域的預設不透明度,其中 0.0 表示完全透明,1.0 表示完全不透明。如要指定個別序列的不透明度,請在 類型:數字,0.0–1.0
預設值:0.3
|
axisTitlesPosition |
比較軸標題和圖表區域的位置。支援的值:
類型:字串
預設值:「out」
|
backgroundColor |
圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串 (例如 類型:字串或物件
預設:「white」
|
backgroundColor.stroke |
圖表邊框顏色,以 HTML 顏色字串表示。 類型:字串
預設值:「#666」
|
backgroundColor.strokeWidth |
邊框寬度 (以像素為單位)。 類型:數字
預設值:0
|
backgroundColor.fill |
圖表填滿顏色,以 HTML 顏色字串表示。 類型:字串
預設:「white」
|
bar.groupWidth |
一組長條的寬度,可使用下列任一格式指定:
類型:數字或字串
預設:黃金比例,約 61.8%。
|
candlestick.hollowIsRising |
如果設為 true,漸進式蠟燭將以空心顯示,下降的蠟燭會以堅實的方式呈現,否則相反地。 類型:布林值
Default:否 (之後會變更為 true)
|
candlestick.fallingColor.fill |
蠟燭的填滿顏色,以 HTML 顏色字串表示。 類型:字串
預設:自動 (取決於系列顏色和中空的)
|
candlestick.fallingColor.stroke |
蠟燭的筆劃顏色,為 HTML 顏色字串。 類型:字串
預設:自動 (系列顏色)
|
candlestick.fallingColor.strokeWidth |
蠟燭的筆劃寬度,以 HTML 顏色字串表示。 類型:2
預設:數字
|
candlestick.risingColor.fill |
漸進式蠟燭的填滿顏色,以 HTML 顏色字串表示。 類型:字串
預設:自動 (白色或數列顏色,視血糖值而定)
|
candlestick.risingColor.stroke |
漸進式蠟燭的筆劃顏色,以 HTML 顏色字串表示。 類型:字串
預設:自動 (系列顏色或白色,視中長度變化而定)
|
candlestick.risingColor.strokeWidth |
上升蠟燭的筆劃寬度,以 HTML 顏色字串表示。 類型:數字
預設值:2
|
chartArea |
此物件可讓成員設定圖表區域的位置和大小 (繪製圖表時不含軸和圖例)。系統支援兩種格式:一個數字,或後接 % 的數字。簡單數字是以像素為單位的值,數字後面加上 % 代表百分比。範例: 類型:物件
預設值:null
|
chartArea.backgroundColor |
圖表區域背景顏色。使用字串時,可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時,可以提供下列屬性:
類型:字串或物件
預設:「white」
|
chartArea.left |
從左框線繪製圖表的時間長度。 類型:數字或字串
預設:自動
|
chartArea.top |
圖表與上框線的繪製距離。 類型:數字或字串
預設:自動
|
chartArea.width |
圖表區域寬度。 類型:數字或字串
預設:自動
|
chartArea.height |
圖表區域高度。 類型:數字或字串
預設:自動
|
顏色 |
圖表元素要使用的顏色。字串陣列,其中每個元素都是 HTML 顏色字串,例如: 類型:字串陣列
預設:預設顏色
|
十字瞄準線 |
包含圖表的 crosshair 屬性的物件。 類型:物件
預設值:null
|
crosshair.color |
十字瞄準線顏色,以顏色名稱 (例如「blue」) 或是 RGB 值 (例如「#adf」)。 類型:字串
類型:default
|
crosshair.focused |
焦點位於時,包含十字瞄準線屬性的物件。 類型:物件
預設:預設值
|
crosshair.opacity |
十字瞄準線的不透明度, 類型:數字
預設值:1.0
|
crosshair.orientation |
十字瞄準線,可以是「垂直」代表垂直髮,「水平」代表只有水平,「兩者」代表傳統十字。 類型:字串
預設:「secondary」
|
crosshair.selected |
包含選取時交叉線屬性的物件。 類型:物件
預設:預設值
|
crosshair.trigger |
顯示十字瞄準線的時機:在 類型:字串
預設:「secondary」
|
curveType |
控制線條寬度不為零時的線條曲線。可以是下列任一值:
類型:字串
預設:「無」
|
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.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 |
當 類型:數字
預設:自動
|
高度 |
圖表的高度,以像素為單位。 類型:數字
預設:所含元素的高度
|
interpolateNulls |
是否猜測遺漏分數的價值。如果為 true,則會根據相鄰點猜測任何遺漏資料的值。如果為 false,系統會在不明點的行中留下休息時間。
提供 類型:布林值
預設值:false
|
isStacked |
如果設為 True,相同類型的系列元素就會堆疊在一起。只會影響長條圖、資料欄和區域序列。 類型:布林值
預設值: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>}
|
lineDashStyle |
虛線的開關模式。舉例來說, 類型:數字陣列
預設值:null
|
lineWidth |
資料線條寬度 (以像素為單位)。使用 0 即可隱藏所有線條,只顯示點。您可以使用 類型:數字
預設值:2
|
方向 |
圖表方向。如果設為 類型:字串
預設:「Horizontal」
|
pointShape |
個別資料元素的形狀:「圓形」、「三角形」、「正方形」、「鑽石」、「星星」或「多邊形」。如需範例,請參閱 點數說明文件 。 類型:字串
預設:「circle」
|
pointSize |
顯示點的直徑 (以像素為單位)。輸入 0 即可隱藏所有點。您可以使用 類型:數字
預設值:0
|
pointsVisible |
決定是否顯示點。設為
您也可以使用 類型:布林值
預設值:true
|
reverseCategories |
如果設為 true,則是由右至左繪製序列。預設為從左到右繪製。 類型:布林值
預設值:false
|
selectionMode |
當 類型:字串
預設:「single」
|
系列叢書 |
物件的陣列,每個物件都會說明圖表中對應序列的格式。如要使用時間序列的預設值,請指定空白物件 {}。如未指定序列或值,則會使用全域值。每個物件都支援下列屬性:
您可以指定物件的陣列,其中每個陣列都會依指定順序套用至系列,或者您可以指定各子項一個數字鍵,代表要套用哪個序列。舉例來說,以下兩個宣告皆相同,並將第一個序列宣告為來自圖例,第 4 個是紅色且從圖例中消失: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } 類型:物件陣列,或含有巢狀物件的物件
預設:{}
|
seriesType |
未在 類型:字串
預設:「line」
|
主題 |
主題是一組預先定義的選項值,可搭配運作來達成特定圖表行為或視覺效果。目前只有一個主題:
類型:字串
預設值: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」
|
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 |
在使用者點選視覺實體時觸發。如要瞭解已選取的項目,請呼叫 屬性:無
|
資料政策
所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。