視覺化:散佈圖 (original) (raw)
哈囉,排行榜!
圖表類型
如何繪製圖表
進階用法
與圖表互動
圖表資料
視覺化:散佈圖
透過集合功能整理內容 你可以依據偏好儲存及分類內容。
總覽
散佈圖會在圖表上標出資料點。使用者將遊標懸停在資料點上時,系統就會顯示工具提示,並提供更多資訊。
視瀏覽器功能而定,Google 散佈圖會在瀏覽器中使用 SVG 或 VML 算繪。
範例
建立 Material 散佈圖
Google 在 2014 年公布了相關規範,讓 Google 平台提供的各種資源和應用程式 (例如 Android 應用程式) 能夠提供一致的外觀和風格。這項作業稱為「_Material Design_」。我們將提供所有核心圖表的「Material」版本;如果您需要,歡迎繼續使用。
建立材質散佈圖表與建立「傳統」散佈圖的做法類似,您會載入 Google Visualization API (雖然使用 'scatter'
套件而非 'corechart'
套件)、定義資料表,然後建立物件 (但類別不是 google.charts.Scatter
,而不是 google.visualization.ScatterChart
)。
注意:舊版 Internet Explorer 不支援 Material 圖表。(IE8 以下版本不支援 SVG,Material 圖表需要此格式)。
與傳統散佈圖相比,「材質散佈圖表」有多項小幅改善,包括可因應重疊點的可變透明度、改善調色盤、標籤格式更清晰、預設間距、更柔和的格線和標題 (以及新增字幕)。
google.charts.load('current', {'packages':['scatter']});
google.charts.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Hours Studied');
data.addColumn('number', 'Final');
data.addRows([
[0, 67], [1, 88], [2, 77],
[3, 93], [4, 85], [5, 91],
[6, 71], [7, 78], [8, 93],
[9, 80], [10, 82],[0, 75],
[5, 80], [3, 90], [1, 72],
[5, 75], [6, 68], [7, 98],
[3, 82], [9, 94], [2, 79],
[2, 95], [2, 86], [3, 67],
[4, 60], [2, 80], [6, 92],
[2, 81], [8, 79], [9, 83],
[3, 75], [1, 80], [3, 71],
[3, 89], [4, 92], [5, 85],
[6, 92], [7, 78], [6, 95],
[3, 81], [0, 64], [4, 85],
[2, 83], [3, 96], [4, 77],
[5, 89], [4, 89], [7, 84],
[4, 92], [9, 98]
]);
var options = {
width: 800,
height: 500,
chart: {
title: 'Students\' Final Grades',
subtitle: 'based on hours studied'
},
hAxis: {title: 'Hours Studied'},
vAxis: {title: 'Grade'}
};
var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
}
Material 圖表目前為 Beta 版。外觀和互動功能基本上是最終版本,但許多傳統圖表尚未提供可用選項。如需目前不支援的選項清單,請參閱這個問題。
此外,宣告選項的方式尚未定案,因此如果你使用的是任何傳統選項,就必須將以下行取代為 Material 選項:
chart.draw(data, options);
...包含以下內容:
chart.draw(data, **google.charts.Scatter.convertOptions(options));**
2-Y 圖表
有時您會想在散佈圖中顯示兩個序列,其中包含兩個獨立的 Y 軸:一個序列的左軸,另一個則用右軸:
請注意,我們不僅是兩個 Y 軸不同的標記 (「期末成績」和「受訓時數」),也分別有各自的評分標準和格線。如要自訂這項行為,請使用 vAxis.gridlines
選項。
在下方程式碼中,axes
和 series
選項會指定圖表的雙 Y 外觀。series
選項會指定每個座標要使用的軸 ('final grade'
和 'hours studied'
;不需要與資料表中的資料欄名稱建立任何關係)。接著,axes
選項會將這張圖表設為雙 Y 圖表,將 'Final Exam Grade'
軸放在左側和右側 'Hours Studied'
軸。
google.charts.load('current', {'packages':['corechart', 'scatter']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('number', 'Student ID');
data.addColumn('number', 'Hours Studied');
data.addColumn('number', 'Final');
data.addRows([
[0, 0, 67], [1, 1, 88], [2, 2, 77],
[3, 3, 93], [4, 4, 85], [5, 5, 91],
[6, 6, 71], [7, 7, 78], [8, 8, 93],
[9, 9, 80], [10, 10, 82], [11, 0, 75],
[12, 5, 80], [13, 3, 90], [14, 1, 72],
[15, 5, 75], [16, 6, 68], [17, 7, 98],
[18, 3, 82], [19, 9, 94], [20, 2, 79],
[21, 2, 95], [22, 2, 86], [23, 3, 67],
[24, 4, 60], [25, 2, 80], [26, 6, 92],
[27, 2, 81], [28, 8, 79], [29, 9, 83]
]);
var materialOptions = {
chart: {
title: 'Students\' Final Grades',
subtitle: 'based on hours studied'
},
width: 800,
height: 500,
series: {
0: {axis: 'hours studied'},
1: {axis: 'final grade'}
},
axes: {
y: {
'hours studied': {label: 'Hours Studied'},
'final grade': {label: 'Final Exam Grade'}
}
}
};
var classicOptions = {
width: 800,
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
title: 'Students\' Final Grades - based on hours studied',
vAxes: {
// Adds titles to each axis.
0: {title: 'Hours Studied'},
1: {title: 'Final Exam Grade'}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Scatter(chartDiv);
materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions));
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.ScatterChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawMaterialChart();
};
「Top-X」圖表
注意:Top-X 軸僅適用於 Material 圖表 (也就是含有 scatter
套件的軸)。
如果您想將 X 軸標籤和標題置於圖表頂端而非底部,可以使用 axes.x
選項在 Material 圖表中執行這項操作:
google.charts.load('current', {'packages':['scatter']});
google.charts.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Hours Studied');
data.addColumn('number', 'Final');
data.addRows([
[0, 67], [1, 88], [2, 77],
[3, 93], [4, 85], [5, 91],
[6, 71], [7, 78], [8, 93],
[9, 80], [10, 82], [0, 75],
[5, 80], [3, 90], [1, 72],
[5, 75], [6, 68], [7, 98],
[3, 82], [9, 94], [2, 79],
[2, 95], [2, 86], [3, 67],
[4, 60], [2, 80], [6, 92],
[2, 81], [8, 79], [9, 83],
[3, 75], [1, 80], [3, 71],
[3, 89], [4, 92], [5, 85],
[6, 92], [7, 78], [6, 95],
[3, 81], [0, 64], [4, 85],
[2, 83], [3, 96], [4, 77],
[5, 89], [4, 89], [7, 84],
[4, 92], [9, 98]
]);
var options = {
width: 800,
height: 500,
chart: {
title: 'Students\' Final Grades',
subtitle: 'based on hours studied'
},
axes: {
x: {
0: {side: 'top'}
}
}
};
var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
}
載入中
google.charts.load
套件名稱為 "corechart"
,視覺化的類別名稱為 google.visualization.ScatterChart
。
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ScatterChart(container);
質感散佈圖表,google.charts.load
套件名稱為 "scatter"
,視覺化的類別名稱為 google.charts.Scatter
。
google.charts.load("current", {packages: ["scatter"]});
var visualization = new google.charts.Scatter(container);
資料格式
資料列:表格中的每一列都代表一組 x 軸值相同的資料點。
資料欄:
| | 第 0 欄 | 第 1 欄 | ... | 第 N 欄 | | | -------------------------------------------------------------------------------------------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 用途: | 資料點 X 值 | 序列 1 Y 值 | ... | 序列 N Y 值 | | 資料類型: | 字串、數字或日期/日期/時間/時間 | 字串、數字或日期/日期/時間/時間 | ... | 字串、數字或日期/日期/時間/時間 | | 角色: | 資料 | 資料 | ... | 資料 | | 選用的資料欄角色: | 無 | 強調 範圍 工具提示 | ... | 強調 範圍 風格 工具提示 |
如要指定多個序列,請指定兩個以上的 Y 軸欄,且只在一個 Y 欄中指定 Y 值:
X 值 | 序列 1 Y 值 | 序列 2 Y 值 |
---|---|---|
10 | null | 75 |
20 | null | 18 |
33 | null | 22 |
55 | 16 | null |
14 | 61 | null |
48 | 3 | null |
設定選項
名稱 | |
---|---|
aggregationTarget | 系統會將多個選取的資料彙整成工具提示: 'category':按照 x 值將所選資料分組。 'series':按照序列將所選資料分組。 'auto':如果所有選項都具有相同的 x 值,請依 x 值分組所選資料,否則會依序列分組。 'none':每個選取項目只顯示一個工具提示。 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 | 套用至動畫的加/減速功能。可用選項如下所示: 「線性」- 固定速度。 「in」 - 減輕 - 開始緩慢並加快速度。 'out' - 簡化 - 啟動並放慢速度。 「inAndOut」- 加速進出,先放慢速度、放慢速度再放慢。 類型:字串 預設:「線性」 |
animation.startup | 指定圖表是否會在初次繪圖時顯示動畫。如果設為 true,圖表會從基準開始,並動畫呈現最終狀態。 類型:布林值 預設 false |
annotations.boxStyle | 如果圖表支援註解,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 | 如果圖表支援註解,您可以使用 annotations.style 選項覆寫 Google 圖表的註解類型選項。可以是 'line' 或 'point'。 類型:字串 預設:「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 顏色字串 (例如 'red' 或 '#00cc00'),或具有下列屬性的物件。 類型:字串或物件 預設:「white」 |
backgroundColor.stroke | 圖表邊框顏色,以 HTML 顏色字串表示。 類型:字串 預設值:「#666」 |
backgroundColor.strokeWidth | 邊框寬度 (以像素為單位)。 類型:數字 預設值:0 |
backgroundColor.fill | 圖表填滿顏色,以 HTML 顏色字串表示。 類型:字串 預設:「white」 |
chart.title | 在質感設計圖表中,此選項可指定標題。 類型:字串 預設值:null |
chart.subtitle | 在質感設計圖表中,此選項可指定字幕。只有質感圖表支援字幕。 類型:字串 預設值:null |
chartArea | 此物件可讓成員設定圖表區域的位置和大小 (繪製圖表時不含軸和圖例)。系統支援兩種格式:一個數字,或後接 % 的數字。簡單數字是以像素為單位的值,數字後面加上 % 代表百分比。範例:chartArea:{left:20,top:0,width:'50%',height:'75%'} 類型:物件 預設值:null |
chartArea.backgroundColor | 圖表區域背景顏色。使用字串時,可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時,可以提供下列屬性: stroke:以十六進位字串或英文顏色名稱提供的顏色。 strokeWidth:如有提供,會在指定寬度的圖表區域 (以及 stroke 的顏色) 周圍繪製邊框。 類型:字串或物件 預設:「white」 |
chartArea.left | 從左框線繪製圖表的時間長度。 類型:數字或字串 預設:自動 |
chartArea.top | 圖表與上框線的繪製距離。 類型:數字或字串 預設:自動 |
chartArea.width | 圖表區域寬度。 類型:數字或字串 預設:自動 |
chartArea.height | 圖表區域高度。 類型:數字或字串 預設:自動 |
顏色 | 圖表元素要使用的顏色。字串陣列,其中每個元素都是 HTML 顏色字串,例如:colors:['red','#004411']。 類型:字串陣列 預設:預設顏色 |
十字瞄準線 | 包含圖表的 crosshair 屬性的物件。 類型:物件 預設值:null |
crosshair.color | 十字瞄準線顏色,以顏色名稱 (例如「blue」) 或是 RGB 值 (例如「#adf」)。 類型:字串 類型:default |
crosshair.focused | 焦點位於時,包含十字瞄準線屬性的物件。例如:crosshair: { focused: { color: '#3bc', opacity: 0.8 } } 類型:物件 預設:預設值 |
crosshair.opacity | 十字瞄準線的不透明度,0.0 表示完全透明,且 1.0 完全不透明。 類型:數字 預設值:1.0 |
crosshair.orientation | 十字瞄準線,可以是「垂直」代表垂直髮,「水平」代表只有水平,「兩者」代表傳統十字。 類型:字串 預設:「secondary」 |
crosshair.selected | 包含選取時交叉線屬性的物件。例如:crosshair: { selected: { color: '#3bc', opacity: 0.8 } } 類型:物件 預設:預設值 |
crosshair.trigger | 顯示十字瞄準線的時機:在 'focus'、'selection' 或 'both' 上。 類型:字串 預設:「secondary」 |
curveType | 控制線條寬度不為零時的線條曲線。可以是下列任一值: 「無」- 沒有曲線的直線。 函式 - 線條角度會平滑。 類型:字串 預設:「無」 |
dataOpacity | 資料點的透明度,1.0 表示完全不透明,0.0 則完全透明。 在散佈圖、直方圖、長條圖和柱狀圖中,這是指可見資料:散佈圖中的圓點和其他矩形中的矩形。在_選取資料_的圖表中,系統會建立圓點 (例如折線和面積圖),指的是懸停或選取時顯示的圓形。組合圖同時呈現出兩種行為,而這個選項對其他圖表沒有影響。(如要變更趨勢線的不透明度,請參閱 趨勢線不透明度相關說明)。 類型:數字 預設值:1.0 |
enableInteractivity | 圖表是否會擲回以使用者為基礎的事件,或是對使用者互動做出反應。如果設為 False,圖表不會擲回「select」或其他互動型事件 (但「會」擲回已就緒或錯誤的事件),且不會顯示懸停文字,或根據使用者輸入內容而變更。 類型:布林值 預設值:true |
explorer | explorer 選項可讓使用者平移及縮放 Google 圖表。explorer: {} 提供預設的探索工具行為,讓使用者可透過拖曳來水平和垂直平移,以及捲動畫面來縮放畫面。 這項功能仍在實驗階段,未來版本可能會有所異動。 注意:多層檢視僅適用於連續軸 (例如數字或日期)。 類型:物件 預設值:null |
explorer.actions | Google 圖表探索工具支援三種操作: dragToPan:拖曳即可水平和垂直平移圖表。如要僅沿著水平軸平移,請使用 explorer: { axis: 'horizontal' }。垂直軸也很類似。 dragToZoom:探索工具的預設行為是在使用者捲動畫面時放大和縮小。如果使用 explorer: { actions: ['dragToZoom', 'rightClickToReset'] },沿著矩形區域拖曳即可放大該區域。建議您在使用 dragToZoom 時一律使用 rightClickToReset。如要自訂縮放比例,請參閱 explorer.maxZoomIn、explorer.maxZoomOut 和 explorer.zoomDelta。 rightClickToReset:在圖表上按一下滑鼠右鍵,即可將圖表恢復至原始的平移和縮放等級。 類型:字串陣列 預設:['dragToPan', 'rightClickToReset'] |
explorer.axis | 根據預設,使用 explorer 選項時,使用者可以水平和垂直平移。如果您只想橫向平移,請使用 explorer: { axis: 'horizontal' }。同樣地,explorer: { axis: 'vertical' } 會啟用僅限垂直的平移功能。 類型:字串 預設:水平和垂直平移 |
explorer.keepInBounds | 根據預設,無論資料位於何處,使用者都可以平移所有內容。如要確保使用者不會平移超出原始圖表範圍,請使用 explorer: { keepInBounds: true }。 類型:布林值 預設值:false |
explorer.maxZoomIn | 探險家可放大的上限。根據預設,使用者可以放大到足夠的畫面,只會看到原始檢視畫面的 25%。設定 explorer: { maxZoomIn: .5 } 能讓使用者只放大到夠大的程度,只看得到原始檢視畫面的一半。 類型:數字 預設值:0.25 |
explorer.maxZoomOut | 探險家可縮小的最大範圍。根據預設,使用者可以縮小到夠大的範圍,讓圖表只佔用 1/4 的可用空間。如果設定 explorer: { maxZoomOut: 8 },使用者就能縮小到圖表只佔 1/8 的可用空間。 類型:數字 預設:4 |
explorer.zoomDelta | 使用者放大或縮小時,explorer.zoomDelta 會決定其縮放的比例。數字越小,縮放效果也越流暢。 類型:數字 預設值:1.5 |
fontSize | 圖表中所有文字的預設字型大小 (以像素為單位)。您可以使用特定圖表元素的屬性覆寫這項設定。 類型:數字 預設:自動 |
fontName | 圖表中所有文字的預設字型。您可以使用特定圖表元素的屬性覆寫這項設定。 類型:字串 預設值:「trigger」 |
forceIFrame | 在內嵌頁框中繪製圖表。(請注意,在 IE8 中,系統會忽略此選項;所有 IE8 圖表都會繪製成 iFrame。) 類型:布林值 預設值:false |
hAxis | 可讓成員設定各種水平軸元素的物件。如要指定這個物件的屬性,您可以使用物件常值標記法,如下所示: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } 類型:物件 預設值:null |
hAxis.baseline | 橫軸的基準線。 類型:數字 預設:自動 |
hAxis.baselineColor | 水平軸的基準顏色。可以是任何 HTML 顏色字串,例如 'red' 或 '#00cc00'。 類型:數字 預設:「black」 |
hAxis.direction | 沿著水平軸的值成長的方向。指定 -1 將值的順序反轉。 類型:1 或 -1 預設值:1 |
hAxis.format | 數字軸標籤的格式字串。這是 ICU 模式集的子集。舉例來說,{format:'#,###%'} 會針對值 10、7.5 及 0.5,顯示「1,000%」、「750%」和「50%」。您也可以提供下列任一項目: {format: 'none'}:顯示不含格式的數字 (例如8000000 顆) {format: 'decimal'}:顯示包含千位數分隔符的數字 (例如8,000,000 人) {format: 'scientific'}:以科學記號顯示數字 (例如8e6)。 {format: 'currency'}:以當地幣別顯示數字 (例如$8,000,000.00 美元) {format: 'percent'}:以百分比顯示數字 (例如800,000,000%) {format: 'short'}:顯示縮寫數字 (例如800 萬) {format: 'long'}:將數字顯示為完整的字詞 (例如800 萬) 套用至標籤的實際格式是衍生自載入 API 時使用的語言代碼。詳情請參閱「 載入特定語言代碼的圖表」。 計算刻點值和格線時,系統會考慮所有相關格線選項的幾種替代組合,如果格式化的刻點標籤重複或重疊,系統會拒絕替代組合。因此,如果您只想顯示整數刻點值,則可以指定 format:"#",但請注意,如果沒有替代項目符合這項條件,系統就不會顯示格線或刻點。 類型:字串 預設:自動 |
hAxis.gridlines | 具有屬性,可設定水平軸格線的物件。請注意,水平軸格線是垂直繪製的。如要指定這個物件的屬性,您可以使用物件常值標記法,如下所示: {color: '#333', minSpacing: 20} 類型:物件 預設值:null |
hAxis.gridlines.color | 圖表區域中的水平格線顏色。指定有效的 HTML 顏色字串。 類型:字串 預設:「#CCC」 |
hAxis.gridlines.count | 圖表區域中的水平格線約略數量。 如果為 gridlines.count 指定正數,系統會使用該數字計算格線之間的 minSpacing。 您可以將 1 值指定為只繪製一個格線,指定 0 值則可繪製不繪製格線。指定 -1 (此為預設值),即可依據其他選項自動計算格線數量。 類型:數字 預設:-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 | minorGridlines.count 選項大部分都已淘汰,除非將計數設為 0 來停用次要格線。次要格線的數量現在完全取決於主要格線之間的間隔 (請參閱 hAxis.gridlines.interval) 和最低所需空間 (請參閱 hAxis.minorGridlines.minSpacing)。 類型:數字 預設值: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 | hAxis 屬性將水平軸設為對數尺度 (要求所有值都必須為正數)。如果為「是」,請設為 true。 類型:布林值 預設值:false |
hAxis.scaleType | hAxis 屬性,讓水平軸成為對數尺度。可以是下列任一值: null - 不執行對數縮放。 「log」:對數縮放。系統不會繪製負值和零的值。這個選項與設定 hAxis: { logscale: true } 相同。 「MirrorLog」:繪製負值和零的對數進行對數縮放。負數的繪製值是絕對值記錄檔的負數。接近 0 的值會以線性比例繪製。 類型:字串 預設值:null |
hAxis.textPosition | 橫軸文字相對於圖表區域的位置。支援的值:「out」、「in」、「none」。 類型:字串 預設值:「out」 |
hAxis.textStyle | 這個物件會指定水平軸文字樣式。物件的格式如下: { color: , fontName: , fontSize: , bold: , italic: } color 可以是任何 HTML 顏色字串,例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。 類型:物件 預設: {color: 'black', fontName: , fontSize: } |
hAxis.ticks | 將自動產生的 X 軸刻點替換為指定的陣列。陣列的每個元素應為有效的刻點值 (例如數字、日期、時間或時間) 或物件。如果是物件,則應提供用於刻點值的 v 屬性,以及選用的 f 屬性,其中含有要顯示為標籤的常值字串。 除非您指定要覆寫的 viewWindow.min 或 viewWindow.max,否則 viewWindow 會自動展開以包含最小和最大滴答。 例: hAxis: { ticks: [5,10,15,20] } hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] } hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] } hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] } 類型:元素陣列 預設:自動 |
hAxis.title | hAxis 屬性,指定橫軸的標題。 類型:字串 預設值:null |
hAxis.titleTextStyle | 這個物件會指定水平軸標題文字樣式。物件的格式如下: { color: , fontName: , fontSize: , bold: , italic: } color 可以是任何 HTML 顏色字串,例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。 類型:物件 預設: {color: 'black', fontName: , fontSize: } |
hAxis.maxValue | 將水平軸的最大值移至指定值;在多數圖表中,這個值會向右移動。如果設為值小於資料的最大 x 值,系統會忽略這項設定。hAxis.viewWindow.max 會覆寫這項屬性。 類型:數字 預設:自動 |
hAxis.minValue | 將水平軸的最小值移至指定值;在大多數圖表中,這個數字會向左移動。如果設定的值大於資料中最小值 x 值,系統會忽略這項設定。hAxis.viewWindow.min 會覆寫這項屬性。 類型:數字 預設:自動 |
hAxis.viewWindowMode | 指定如何縮放水平軸,以轉譯圖表區域中的值。支援的字串值如下: 「漂亮」:縮放水平值,讓最大和最小值在圖表區域的左右兩側顯示。ViewWindow 會展開為最接近的數字主要格線,或找出最接近日期和時間的次要格線。 「maximized」:縮放水平值,讓最大和最小值觸及圖表區域的左右兩側。這項操作會忽略 haxis.viewWindow.min 和 haxis.viewWindow.max。 「explicit」:已淘汰指定圖表區域左右比例值的選項。(已淘汰,因為 haxis.viewWindow.min 和 haxis.viewWindow.max 是多餘的值)。系統會裁剪這些值以外的資料值。您必須指定 hAxis.viewWindow 物件,說明要顯示的最大值和最小值。 類型:字串 預設值:等同於「漂亮」,但使用時優先度為 haxis.viewWindow.min 和 haxis.viewWindow.max。 |
hAxis.viewWindow | 指定水平軸的裁剪範圍。 類型:物件 預設值:null |
hAxis.viewWindow.max | 要顯示的水平資料最大值。 當 hAxis.viewWindowMode 為「漂亮」或「最大化」時,系統會忽略此值。 類型:數字 預設:自動 |
hAxis.viewWindow.min | 要顯示的水平資料最小值。 當 hAxis.viewWindowMode 為「漂亮」或「最大化」時,系統會忽略此值。 類型:數字 預設:自動 |
高度 | 圖表的高度,以像素為單位。 類型:數字 預設:所含元素的高度 |
傳說 | 由成員組成的物件,可設定圖例的各個層面。如要指定這個物件的屬性,您可以使用物件常值標記法,如下所示: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} 類型:物件 預設值:null |
legend.alignment | 圖例的對齊。可以是下列其中一項: 「開始」:與為圖例分配的區域起點對齊。 「center」:以圖例的分配區域為中心。 「end」:與圖例的分配區域結尾對齊。 起點、中心和結束點是以圖例的樣式 (垂直或水平) 為準。舉例來說,在「右側」圖例中,「start」和「end」分別位於頂端和底部。如果是「頂端」圖例,「start」和「end」則分別位於區域的左側和右側。 預設值取決於圖例位置。「bottom」圖例的預設值為「center」,其他圖例則預設為「start」。 類型:字串 預設:自動 |
legend.maxLines | 圖例中的行數上限。將這個項目設為大於一的數字,即可為圖例新增線條。請注意:決定實際算繪行數的確切邏輯仍在浮動中。 此選項目前僅適用於圖例.position 為「top」時。 類型:數字 預設值:1 |
legend.pageIndex | 已為圖例預先選取零開始頁面索引。 類型:數字 預設值:0 |
legend.position | 圖例位置。可以是下列其中一項: 「bottom」- 圖表下方。 'left' - 在圖表左側,左軸沒有任何相關的序列。 因此,如果您想在左側放置圖例,請使用 targetAxisIndex: 1 選項。 「in」 - 圖表內部 (位於圖表左上角)。 「無」- 不顯示圖例。 「right」:圖表右側。與 vAxes 選項不相容。 「top」:圖表上方。 類型:字串 預設值:「right」 |
legend.textStyle | 指定圖例文字樣式的物件。物件的格式如下: { color: , fontName: , fontSize: , bold: , italic: } color 可以是任何 HTML 顏色字串,例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。 類型:物件 預設: {color: 'black', fontName: , fontSize: } |
lineWidth | 線條寬度 (以像素為單位)。使用 0 即可隱藏所有線條,只顯示點。 類型:數字 預設值:0 |
方向 | 圖表方向。如果設為 'vertical',系統會旋轉圖表的軸線,讓柱狀圖 (例如) 柱狀圖變為長條圖,而面積圖會向右成長而非向上: 類型:字串 預設:「Horizontal」 |
pointShape | 個別資料元素的形狀:「圓形」、「三角形」、「正方形」、「鑽石」、「星星」或「多邊形」。如需範例,請參閱 點數說明文件。 類型:字串 預設:「circle」 |
pointSize | 資料點的直徑,以像素為單位。輸入 0 即可隱藏所有點。您可以使用 series 屬性覆寫個別序列的值。如果使用趨勢線,這個選項也會影響組成資料點的 pointSize,這會改變趨勢線的顯示寬度。如要避免這種情況,您可以使用 trendlines.n.pointsize 選項覆寫該設定。 類型:數字 預設:7 |
pointsVisible | 決定是否顯示點。設為 false 即可隱藏所有點。 您可以使用 series 屬性覆寫個別序列的值。如果使用趨勢線,pointsVisible 選項會影響所有趨勢線上各點的可見度,除非您使用 trendlines.n.pointsVisible 選項覆寫這個趨勢。 您也可以使用 "point {visible: true}" 格式的樣式角色覆寫這項設定。 類型:布林值 預設值:true |
selectionMode | 當 selectionMode 為 'multiple' 時,使用者可以選取多個資料點。 類型:字串 預設:「single」 |
系列叢書 | 物件的陣列,每個物件都會說明圖表中對應序列的格式。如要使用時間序列的預設值,請指定空白物件 {}。如未指定序列或值,則會使用全域值。每個物件都支援下列屬性: color - 此系列使用的顏色。指定有效的 HTML 顏色字串。 labelInLegend:要顯示在圖表圖例中的序列說明。 lineWidth:覆寫這個序列的全域 lineWidth 值。 pointShape:覆寫這個系列的全域 pointShape 值。 pointSize:覆寫這個序列的全域 pointSize 值。 pointsVisible:覆寫這個系列的全域 pointsVisible 值。 visibleInLegend - 布林值,其中 true 代表序列應有圖例項目,而 false 則表示不應。預設值為 true。 您可以指定物件的陣列,其中每個陣列都會依指定順序套用至系列,或者您可以指定各子項一個數字鍵,代表要套用哪個序列。舉例來說,以下兩個宣告皆相同,並將第一個序列宣告為來自圖例,第 4 個是紅色且從圖例中消失: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } 類型:物件陣列,或含有巢狀物件的物件 預設:{} |
主題 | 主題是一組預先定義的選項值,可搭配運作來達成特定圖表行為或視覺效果。目前只有一個主題: 「最大化」- 將圖表區域最大化,並在圖表區內繪製圖例和所有標籤。設定下列選項:chartArea: {width: '100%', height: '100%'}, legend: {position: 'in'}, titlePosition: 'in', axisTitlesPosition: 'in', hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'} 類型:字串 預設值:null |
title | 顯示在圖表上方的文字。 類型:字串 預設:無標題 |
titlePosition | 圖表標題的放置位置,與圖表區域比較。支援的值: in - 在圖表區域繪製標題。 out - 在圖表區域外繪製標題。 無 - 省略標題。 類型:字串 預設值:「out」 |
titleTextStyle | 指定標題文字樣式的物件。物件的格式如下: { color: , fontName: , fontSize: , bold: , italic: } color 可以是任何 HTML 顏色字串,例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。 類型:物件 預設: {color: 'black', fontName: , fontSize: } |
工具提示 | 可讓成員設定各種工具提示元素的物件。如要指定這個物件的屬性,您可以使用物件常值標記法,如下所示: {textStyle: {color: '#FF0000'}, showColorCode: true} 類型:物件 預設值:null |
tooltip.ignoreBounds | 如果設為 true,系統就會允許工具提示的繪圖,超出圖表任何邊的邊界。 注意:這僅適用於 HTML 工具提示。透過 SVG 工具提示啟用這項功能時,系統會裁剪圖表邊界外的所有溢位。詳情請參閱「自訂工具提示內容」一文。 類型:布林值 預設值:false |
tooltip.isHtml | 如果設為 true,將使用 HTML 算繪 (而非 SVG 算繪) 的工具提示。詳情請參閱「自訂工具提示內容」一文。 注意:泡泡圖圖表「不」支援透過工具提示欄資料角色自訂 HTML 工具提示內容。 類型:布林值 預設值:false |
tooltip.showColorCode | 如為 true,則在工具提示中的系列資料旁邊顯示彩色方塊。 類型:布林值 預設值:false |
tooltip.textStyle | 指定工具提示文字樣式的物件。物件的格式如下: { color: , fontName: , fontSize: , bold: , italic: } color 可以是任何 HTML 顏色字串,例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。 類型:物件 預設: {color: 'black', fontName: , fontSize: } |
tooltip.trigger | 觸發工具提示的使用者互動: 「焦點」- 當使用者將遊標懸停在元素上時,就會顯示工具提示。 「無」- 不會顯示工具提示。 「selection」- 使用者選取元素時,系統會顯示工具提示。 類型:字串 預設:「focus」 |
趨勢線 | 在支援圖表的圖表中顯示 趨勢線。根據預設,系統會使用線性趨勢線,但您可以使用 trendlines.n.type 選項自訂這個選項。 趨勢線是以個別系列為依據,因此您的選項在大部分時間看起來會像這樣: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } 類型:物件 預設值:null |
trendlines.n.color | 趨勢線的顏色,以英文顏色名稱或十六進位字串表示。 類型:字串 預設:預設系列顏色 |
trendlines.n.degree | 針對 type: 'polynomial' 的 趨勢線,多項式的程度 (2 代表二次方,3 代表立方體,以此類推)。(即將推出的 Google 圖表版本將預設等級從 3 變更為 2)。 類型:數字 預設值:3 |
trendlines.n.labelInLegend | 設定後, 趨勢線會以這個字串顯示在圖例中。 類型:字串 預設值:null |
trendlines.n.lineWidth | 趨勢線的線條寬度 (以像素為單位)。 類型:數字 預設值:2 |
trendlines.n.opacity | 趨勢線的透明度,從 0.0 (透明) 到 1.0 (不透明)。 類型:數字 預設值:1.0 |
trendlines.n.pointSize | 趨勢線是指在圖表上戳出許多圓點;這個很少需要的選項可讓您自訂圓點的大小。趨勢線的 lineWidth 選項通常較為理想。不過,如果您使用全域 pointSize 選項,且希望趨勢線的點大小不同,就需要這個選項。 類型:數字 預設值:1 |
trendlines.n.pointsVisible | 趨勢線會在圖表中戳許多圓點。趨勢線的 pointsVisible 選項可決定是否要顯示特定趨勢線的資料點。 類型:布林值 預設值:true |
trendlines.n.showR2 | 是否在圖例或趨勢線工具提示中顯示 決定係數。 類型:布林值 預設值:false |
trendlines.n.type | 趨勢線是否為 'linear' (預設)、'exponential' 或 'polynomial'。 類型:字串 預設:線性 |
trendlines.n.visibleInLegend | 是否在圖例中顯示 趨勢線。(顯示在趨勢線的工具提示中)。 類型:布林值 預設值:false |
vAxis | 包含成員的物件,可設定各種垂直軸元素。如要指定這個物件的屬性,您可以使用物件常值標記法,如下所示: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} 類型:物件 預設值:null |
vAxis.baseline | vAxis 屬性,指定縱軸的基準。如果基準大於最高格線大小或小於最低格線,系統會將基準線四捨五入至最接近的格線。 類型:數字 預設:自動 |
vAxis.baselineColor | 指定縱軸的基準顏色。可以是任何 HTML 顏色字串,例如 'red' 或 '#00cc00'。 類型:數字 預設:「black」 |
vAxis.direction | 垂直軸值成長的方向。根據預設,低值會顯示在圖表底部。指定 -1 將值的順序反轉。 類型:1 或 -1 預設值:1 |
vAxis.format | 數字軸標籤的格式字串。這是 ICU 模式集的子集。舉例來說,{format:'#,###%'} 會針對值 10、7.5 及 0.5,顯示「1,000%」、「750%」和「50%」。您也可以提供下列任一項目: {format: 'none'}:顯示不含格式的數字 (例如8000000 顆) {format: 'decimal'}:顯示包含千位數分隔符的數字 (例如8,000,000 人) {format: 'scientific'}:以科學記號顯示數字 (例如8e6)。 {format: 'currency'}:以當地幣別顯示數字 (例如$8,000,000.00 美元) {format: 'percent'}:以百分比顯示數字 (例如800,000,000%) {format: 'short'}:顯示縮寫數字 (例如800 萬) {format: 'long'}:將數字顯示為完整的字詞 (例如800 萬) 套用至標籤的實際格式是衍生自載入 API 時使用的語言代碼。詳情請參閱「 載入特定語言代碼的圖表」。 計算刻點值和格線時,系統會考慮所有相關格線選項的幾種替代組合,如果格式化的刻點標籤重複或重疊,系統會拒絕替代組合。因此,如果您只想顯示整數刻點值,則可以指定 format:"#",但請注意,如果沒有替代項目符合這項條件,系統就不會顯示格線或刻點。 類型:字串 預設:自動 |
vAxis.gridlines | 包含成員用來設定縱軸格線的物件。請注意,垂直軸格線是水平繪製的。如要指定這個物件的屬性,您可以使用物件常值標記法,如下所示: {color: '#333', minSpacing: 20} 類型:物件 預設值:null |
vAxis.gridlines.color | 圖表區域中的垂直格線顏色。指定有效的 HTML 顏色字串。 類型:字串 預設:「#CCC」 |
vAxis.gridlines.count | 圖表區域中的水平格線約略數量。 如果為 gridlines.count 指定正數,系統會使用該數字計算格線之間的 minSpacing。 您可以將 1 值指定為只繪製一個格線,指定 0 值則可繪製不繪製格線。指定 -1 (此為預設值),即可依據其他選項自動計算格線數量。 類型:數字 預設:-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 | vAxis 屬性,讓垂直軸成為對數尺度。可以是下列任一值: null - 不執行對數縮放。 「log」:對數縮放。系統不會繪製負值和零的值。這個選項與設定 vAxis: { logscale: true } 相同。 「MirrorLog」:繪製負值和零的對數進行對數縮放。負數的繪製值是絕對值記錄檔的負數。接近 0 的值會以線性比例繪製。 類型:字串 預設值:null |
vAxis.textPosition | 垂直軸文字相對於圖表區域的位置。支援的值:「out」、「in」、「none」。 類型:字串 預設值:「out」 |
vAxis.textStyle | 指定縱軸文字樣式的物件。物件的格式如下: { color: , fontName: , fontSize: , bold: , italic: } color 可以是任何 HTML 顏色字串,例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。 類型:物件 預設: {color: 'black', fontName: , fontSize: } |
vAxis.ticks | 將自動產生的 Y 軸刻點替換為指定陣列。陣列的每個元素應為有效的刻點值 (例如數字、日期、時間或時間) 或物件。如果是物件,則應提供用於刻點值的 v 屬性,以及選用的 f 屬性,其中含有要顯示為標籤的常值字串。 除非您指定要覆寫的 viewWindow.min 或 viewWindow.max,否則 viewWindow 會自動展開以包含最小和最大滴答。 例: vAxis: { ticks: [5,10,15,20] } vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] } vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] } vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] } 類型:元素陣列 預設:自動 |
vAxis.title | vAxis 屬性,指定縱軸的標題。 類型:字串 預設:無標題 |
vAxis.titleTextStyle | 指定縱軸標題文字樣式的物件。物件的格式如下: { color: , fontName: , fontSize: , bold: , italic: } color 可以是任何 HTML 顏色字串,例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。 類型:物件 預設: {color: 'black', fontName: , fontSize: } |
vAxis.maxValue | 將垂直軸的最大值移至指定值;在大部分的圖表中,這個值會向上移動。如果設為值小於資料的最大 y 值,系統會忽略這項設定。vAxis.viewWindow.max 會覆寫這項屬性。 類型:數字 預設:自動 |
vAxis.minValue | 將垂直軸的最小值移至指定值;在多數圖表中,這個值會向下移動。如果設定的值大於資料最小 y 值,則系統會忽略這項設定。vAxis.viewWindow.min 會覆寫這項屬性。 類型:數字 預設值:null |
vAxis.viewWindowMode | 指定如何縮放縱軸,以轉譯圖表區域中的值。支援的字串值如下: 「漂亮」- 縮放垂直值,讓最大和最小值在圖表區域底部和頂端顯示一點。ViewWindow 會展開為最接近的數字主要格線,或找出最接近日期和時間的次要格線。 「maximized」- 縮放垂直值,讓最大值和最小值觸及圖表區域的頂端和底部。這項操作會忽略 vaxis.viewWindow.min 和 vaxis.viewWindow.max。 「explicit」:已淘汰指定圖表區域頂部和底部縮放值的選項。(已淘汰,因為 vaxis.viewWindow.min 和 vaxis.viewWindow.max 是多餘的)。系統會裁剪超出這些值的資料值。您必須指定 vAxis.viewWindow 物件,說明要顯示的最大值和最小值。 類型:字串 預設值:等同於「漂亮」,但使用時優先度為 vaxis.viewWindow.min 和 vaxis.viewWindow.max。 |
vAxis.viewWindow | 指定垂直軸的裁剪範圍。 類型:物件 預設值:null |
vAxis.viewWindow.max | 要顯示的最大垂直資料值。 當 vAxis.viewWindowMode 為「漂亮」或「最大化」時,系統會忽略此值。 類型:數字 預設:自動 |
vAxis.viewWindow.min | 要顯示的垂直資料最小值。 當 vAxis.viewWindowMode 為「漂亮」或「最大化」時,系統會忽略此值。 類型:數字 預設:自動 |
寬度 | 圖表的寬度,以像素為單位。 類型:數字 預設:所含元素的寬度 |
方法
方法 | |
---|---|
draw(data, options) | 繪製圖表。只有在觸發 ready 事件後,圖表才能接受其他方法呼叫。Extended description。 傳回類型:無 |
getAction(actionID) | 傳回含有要求的 actionID 的工具提示動作物件。 傳回類型:物件 |
getBoundingBox(id) | 傳回包含圖表元素 id 左側、頂端、寬度和高度的物件。尚未記錄 id 的格式 (這些是事件處理常式的傳回值),但以下提供一些範例: var cli = chart.getChartLayoutInterface(); 圖表區域的高度 cli.getBoundingBox('chartarea').height 長條圖第一連串的第三條長條寬度 cli.getBoundingBox('bar#0#2').width 圓餅圖第五個楔形的定界框 cli.getBoundingBox('slice#4') 垂直 (例如柱狀圖) 圖表資料的定界框: cli.getBoundingBox('vAxis#0#gridline') 水平 (例如長條圖) 的圖表資料定界框: cli.getBoundingBox('hAxis#0#gridline') 值是相對於圖表容器的值。請在繪製圖表「之後」呼叫此動作。 傳回類型:物件 |
getChartAreaBoundingBox() | 傳回包含圖表內容左側、頂端、寬度和高度的物件 (即不含標籤和圖例): var cli = chart.getChartLayoutInterface(); cli.getChartAreaBoundingBox().left cli.getChartAreaBoundingBox().top cli.getChartAreaBoundingBox().height cli.getChartAreaBoundingBox().width 值是相對於圖表容器的值。請在繪製圖表「之後」呼叫此動作。 傳回類型:物件 |
getChartLayoutInterface() | 傳回包含圖表在螢幕上位置相關資訊的物件,以及其元素。 以下方法可在傳回的物件上呼叫: getBoundingBox getChartAreaBoundingBox getHAxisValue getVAxisValue getXLocation getYLocation 請在繪製圖表「之後」呼叫此動作。 傳回類型:物件 |
getHAxisValue(xPosition, optional_axis_index) | 傳回 xPosition 的水平資料值,該值是與圖表容器左側邊緣的像素偏移值。可以是負數。 範例:chart.getChartLayoutInterface().getHAxisValue(400)。 請在繪製圖表「之後」呼叫此動作。 傳回類型:數字 |
getImageURI() | 傳回已序列化為圖片 URI 的圖表。 請在繪製圖表「之後」呼叫此動作。 請參閱列印 PNG 圖表。 傳回類型:字串 |
getSelection() | 傳回所選圖表實體的陣列。 可選取的實體是點和圖例項目。 一個點對應於資料表中的儲存格,以及資料欄的圖例項目 (列索引為空值)。 在這張圖表中,無論何時都只能選取一個實體。 Extended description 。 傳回類型:選取元素的陣列 |
getVAxisValue(yPosition, optional_axis_index) | 傳回位於 yPosition 的垂直資料值,該值為與圖表容器頂部邊緣往下的像素偏移。可以是負數。 範例:chart.getChartLayoutInterface().getVAxisValue(300)。 請在繪製圖表「之後」呼叫此動作。 傳回類型:數字 |
getXLocation(dataValue, optional_axis_index) | 傳回相對於圖表容器左側邊緣的 dataValue 像素 X 座標。 範例:chart.getChartLayoutInterface().getXLocation(400)。 請在繪製圖表「之後」呼叫此動作。 傳回類型:數字 |
getYLocation(dataValue, optional_axis_index) | 傳回相對於圖表容器頂部邊緣的 dataValue 像素 y 座標。 範例:chart.getChartLayoutInterface().getYLocation(300)。 請在繪製圖表「之後」呼叫此動作。 傳回類型:數字 |
removeAction(actionID) | 從圖表中移除要求 actionID 的工具提示動作。 傳回類型: none |
setAction(action) | 設定在使用者點選動作文字時執行的工具提示動作。 setAction 方法會將物件做為動作參數。這個物件應指定 3 個屬性:id (所設定動作的 ID)、text (應顯示在動作工具提示中的文字) 和 action (使用者按一下動作文字時應執行的函式)。 請在呼叫圖表的 draw() 方法之前,設定所有及所有工具提示動作。延伸說明。 傳回類型: none |
setSelection() | 選取指定的圖表實體。取消先前選取的任何項目。 可選取的實體是點和圖例項目。 一個點對應於資料表中的儲存格,以及資料欄的圖例項目 (列索引為空值)。 在這張圖表中,一次只能選取一個實體。 Extended description 。 傳回類型:無 |
clearChart() | 清除圖表並釋出所有分配的資源。 傳回類型:無 |
事件
如要進一步瞭解如何使用這些事件,請參閱基本互動、處理事件和觸發事件。
名稱 | |
---|---|
animationfinish | 轉場動畫播放完畢時觸發。 屬性:無 |
click | 使用者點選圖表內時觸發。可用於識別使用者點選標題、資料元素、圖例項目、軸、格線或標籤的時機。 屬性: targetID |
error | 嘗試算繪圖表時發生錯誤時觸發。 屬性:ID、訊息 |
legendpagination | 使用者按一下圖例分頁箭頭時觸發。傳回目前從零開始計算的圖例索引和總頁數。 資源:currentPageIndex、totalPages |
onmouseover | 在使用者將滑鼠遊標懸停在視覺實體上時觸發。回傳對應資料表元素的列和欄索引。 屬性:列、欄 |
onmouseout | 在使用者滑鼠遊標移離視覺實體時觸發。傳回對應資料表元素的列和欄索引。 屬性:列、欄 |
ready | 圖表已可供外部方法呼叫。如果您想與圖表互動,並在繪製後呼叫方法,您應「先」設定此事件的事件監聽器,並只在事件觸發後才呼叫這些事件。draw 屬性:無 |
select | 在使用者點選視覺實體時觸發。如要瞭解已選取的項目,請呼叫 getSelection()。 屬性:無 |
資料政策
所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2024-07-10 (世界標準時間)。