簡介
散佈圖會在圖表上繪製點。當使用者將遊標懸停在各個點時,工具提示會顯示更多資訊。
視瀏覽器功能而定,Google 散佈圖會使用 SVG 或 VML 在瀏覽器中顯示。
範例
<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([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
變更圖案及建立動畫
根據預設,散佈圖是用資料集來呈現圓圈的元素。您可以使用 pointShape
選項指定其他形狀,詳情請參閱自訂點說明文件。
和大多數其他 Google 圖表一樣,您可以使用事件建立動畫。您可以為第一個 ready
事件新增事件監聽器,並在完成必要修改後重新繪製圖表。在第一個 ready
事件之後,您可以監聽 animationfinish
事件以重複整個流程,進而產生連續的動畫。animation
選項可控制重新繪製的方式:立即 (無動畫) 或平滑處理,以及如果流暢性和運作行為如何快速。
var options = { legend: 'none', colors: ['#087037'], pointShape: 'star', pointSize: 18, animation: { duration: 200, easing: 'inAndOut', } }; // Start the animation by listening to the first 'ready' event. google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event. google.visualization.events.addListener(chart, 'animationfinish', randomWalk); ... function randomWalk() { ... }
<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 = new google.visualization.DataTable(); data.addColumn('number'); data.addColumn('number'); var radius = 100; for (var i = 0; i < 6.28; i += 0.1) { data.addRow([radius * Math.cos(i), radius * Math.sin(i)]); } // Our central point, which will jiggle. data.addRow([0, 0]); var options = { legend: 'none', colors: ['#087037'], pointShape: 'star', pointSize: 18, animation: { duration: 200, easing: 'inAndOut', } }; var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div')); // Start the animation by listening to the first 'ready' event. google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event. google.visualization.events.addListener(chart, 'animationfinish', randomWalk); chart.draw(data, options); function randomWalk() { var x = data.getValue(data.getNumberOfRows() - 1, 0); var y = data.getValue(data.getNumberOfRows() - 1, 1); x += 5 * (Math.random() - 0.5); y += 5 * (Math.random() - 0.5); if (x * x + y * y > radius * radius) { // Out of bounds. Bump toward center. x += Math.random() * ((x < 0) ? 5 : -5); y += Math.random() * ((y < 0) ? 5 : -5); } data.setValue(data.getNumberOfRows() - 1, 0, x); data.setValue(data.getNumberOfRows() - 1, 1, y); chart.draw(data, options); } } </script> </head> <body> <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div> </body> </html>
建立質感圖圖
2014 年,Google 公布了相關規範,以在各項 Google 平台的屬性和應用程式 (例如 Android 應用程式) 中,為大眾提供一致的外觀和風格。這就是所謂的質感設計。我們會為所有核心圖表提供「質感設計」版本;如有需要,歡迎使用這些圖表。
建立 Material 散佈圖的方式與建立「傳統」散佈圖類似。您載入的 Google 視覺化 API (雖然使用 'scatter'
套件而非 'corechart'
套件) 定義了資料表,然後建立物件 (但是 google.charts.Scatter
類別,而不是 google.visualization.ScatterChart
類別)。
注意:舊版的 Internet Explorer 不支援質感設計圖表。(IE8 及更舊版本不支援 Material Chart 所需的 SVG。)
與傳統散佈圖相比,材質散佈圖經過許多改善,包括可調整的不透明度,以便呈現重疊點的清晰度、改善調色盤、更清晰的標籤格式、更緊密的預設間距、更寬的格線和標題 (加上字幕)。
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)); }
材質圖表目前仍為 Beta 版。外觀和互動性大多為最終版,但傳統版圖表尚未提供許多可用選項。您可以在這個問題中找到尚未支援的選項清單。
此外,宣告選項的方式尚未定案,因此如果使用任何傳統選項,就必須用以下這一行取代「傳統」選項:
chart.draw(data, options);
...用以下方式:
chart.draw(data, google.charts.Scatter.convertOptions(options));
雙年度圖表
有時您會想在散佈圖中顯示兩個系列,其中有兩個不同的 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(); };
熱門 X 圖表
注意:Top X 軸僅適用於材質圖表 (即包含 scatter
套件的軸)。
如要將 X 軸標籤和標題放在圖表頂端 (而非底部),請在質感圖表中使用 axes.x
選項進行此操作:
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 | 空值 | 75 |
20 | 空值 | 18 |
33 | 空值 | 22 |
55 | 16 | 空值 |
14 | 61 | 空值 |
48 | 3 | 空值 |
設定選項
名稱 | |
---|---|
匯總目標 |
如何將多個資料匯總至工具提示:
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」
|
動畫.duration |
動畫的時間長度 (以毫秒為單位)。詳情請參閱動畫說明文件。 類型:數字
預設:0
|
動畫 |
套用至動畫的加/減速函式。可用選項如下所示:
類型:字串
預設值:「Linear」
|
動畫.startup |
用於決定圖表是否在初始繪圖時呈現動畫效果。如果設為 類型:布林值
Default 否
|
annotation.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 } } } }; 這個選項目前適用於區域、長條圖、柱狀圖、組合圖、折線圖和散佈圖。註解圖表不支援這項操作。 類型:物件
預設值:空值
|
annotation.datum |
對於支援註解的圖表,
annotations.datum 物件可覆寫 Google 圖表針對各個資料元素提供的註解 (例如長條圖中每個長條顯示的值)。您可以使用 annotations.datum.stem.color 控制顏色,使用 annotations.datum.stem.length 加上幹線長度,並使用 annotations.datum.style 設定樣式。類型:物件
預設:顏色為「黑色」,長度為 12;樣式為「點」。
|
annotation.domain |
對於支援註解的圖表,
annotations.domain 物件可讓您針對 Google 為網域提供的註解覆寫圖表 (圖表的主要主軸,如一般折線圖中的 X 軸)。您可以使用 annotations.domain.stem.color 控制顏色,使用 annotations.domain.stem.length 加上幹線長度,並使用 annotations.domain.style 設定樣式。類型:物件
預設:顏色為「黑色」,長度為 5;樣式為「點」。
|
annotation.highContrast |
如果圖表支援註解,您可以使用
annotations.highContrast 布林值覆寫 Google 圖表的註解顏色。annotations.highContrast 預設為 true,因此圖表會選擇具有適當對比度的註解顏色:深色背景上的淺色顏色,以及淺色上的深色顏色。如果將 annotations.highContrast 設為 false,而且未指定自己的註解顏色,Google 圖表將會使用註解的預設系列顏色:類型:布林值
預設:是
|
comments.stem |
對於支援註解的圖表,
annotations.stem 物件可讓您覆寫 Google 圖表對幹線樣式的選擇。您可以使用 annotations.stem.color 控制顏色,使用 annotations.stem.length 控制把手長度。請注意,幹段長度選項對樣式為 'line' 的註解沒有任何影響:如果是 'line' Datum 註解,則幹數長度一律與文字相同,而對 'line' 網域註解而言,這個虛設常式會持續擴展至整張圖表。類型:物件
預設:顏色為「黑色」,網域註解的長度為 5,Datum 註解則是 12。
|
comments.style |
類型:字串
預設值:「point」
|
annotation.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 } } }; 這個選項目前適用於區域、長條圖、柱狀圖、組合、折線圖和散佈圖。註解圖表不支援這項功能。 類型:物件
預設值:空值
|
軸標題位置 |
與圖表區域比較的軸標題。支援的值:
類型:字串
預設值:「out」
|
backgroundColor |
圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串,例如 類型:字串或物件
預設:「white」
|
背景色彩 |
圖表邊框的顏色,以 HTML 顏色字串表示。 類型:字串
預設值:「#666」
|
背景色彩.筆寬度 |
框線寬度 (單位為像素)。 類型:數字
預設:0
|
background..fill |
圖表會以 HTML 色彩字串填入顏色。 類型:字串
預設:「white」
|
圖表標題 |
如為 Material 圖表,這個選項會指定標題。 類型:字串
預設值:空值
|
圖表.subtitles |
如為「材質」,這個選項會指定字幕。只有 Material 圖表支援字幕。 類型:字串
預設值:空值
|
圖表區域 |
擁有成員可設定圖表區域位置和大小的物件 (繪製圖表本身的位置,不含軸和圖例)。系統支援數字格式:範例: 類型:物件
預設值:空值
|
圖表區域 |
圖表區域背景顏色。使用字串時,可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時,您可以提供下列屬性:
類型:字串或物件
預設:「white」
|
圖表區域 |
從左框線繪製圖表的程度。 類型:數字或字串
預設:自動
|
排行榜區域 |
從上方邊框繪製圖表的程度。 類型:數字或字串
預設:自動
|
圖表區域 |
圖表區域寬度。 類型:數字或字串
預設:自動
|
圖表區域 |
圖表區域高度。 類型:數字或字串
預設:自動
|
顏色 |
圖表元素的顏色。字串陣列,其中每個元素都是 HTML 顏色字串,例如: 類型:字串陣列
預設:預設顏色
|
Crosshair |
包含圖表 crosshair 屬性的物件。 類型:物件
預設值:空值
|
crosshair.color |
十字線顏色,以顏色名稱 (例如「藍色」) 或 RGB 值 (例如「#adf」)。 類型:字串
類型:預設值
|
crosshair.聚焦 |
聚焦於十字瞄準線屬性的物件。 類型:物件
預設:預設值
|
crosshair.opacity |
十字架透明度, 類型:數字
預設值:1.0
|
crosshair.orientation |
十字瞄準線方向可以是「直髮」(垂直直髮),「水平」代表水平髮型,「並」代表傳統十字髮型。 類型:字串
預設:「兩者」
|
crosshair.selected |
內含所選十字瞄準線屬性的物件。 類型:物件
預設:預設值
|
crosshair.trigger |
顯示跨海域的時機:在 類型:字串
預設:「兩者」
|
曲線類型 |
控制線條寬度不是零的線條曲線。可以是下列任一值:
類型:字串
預設:「無」
|
資料不透明度 |
資料點的透明度,1.0 表示完全不透明,0.0 則是完全透明。在散佈圖、直方圖、長條圖和柱狀圖中,您可以看到可見資料:散佈圖中的點和其他的矩形。在選取資料的情況下建立包含點的圖表 (例如折線圖和面積圖),指的是滑鼠遊標懸停時所顯示的圓圈。組合圖顯示兩種行為,這個選項對其他圖表沒有影響。(如要變更趨勢線的不透明度,請參閱「趨勢線透明度」一節)。 類型:數字
預設值:1.0
|
啟用互動功能 |
圖表是否擲回了以使用者為主的事件或回應使用者互動。設為 False 時,圖表不會擲回「選取」或其他以互動為基礎的事件 (但會「擲出就緒」或「錯誤」的事件),而且不會顯示使用者的文字,或是隨著使用者輸入的內容而改變。 類型:布林值
預設:是
|
explorer |
這項功能仍在實驗階段,將於日後推出的版本中變更。 注意:多層檢視僅適用於連續軸 (例如數字或日期)。 類型:物件
預設值:空值
|
Explorer.actions |
Google Charts Explorer 支援以下三種動作:
類型:字串陣列
預設值:['dragToPan', 'rightClickToReset']
|
Explorer:軸 |
根據預設,使用 類型:字串
預設:水平平移和垂直平移
|
Explorer.keepInBounds |
根據預設,無論資料的所在位置為何,使用者都能平移。如要確保使用者不會平移原始圖表,請使用 類型:布林值
預設值:false
|
Explorer.maxZoomIn |
探險家可放大的最大值。根據預設,使用者可以放大畫面,只看到原始檢視畫面的 25%。設定 類型:數字
預設:0.25
|
Explorer.maxZoomOut |
探險家可縮小的最大值。根據預設,使用者可以大幅縮小地圖,使圖表只佔可用空間的 1/4。設定 類型:數字
預設:4
|
Explorer.zoomDelta |
當使用者放大或縮小時, 類型:數字
預設:1.5
|
字型大小 |
圖表中所有文字的預設字型大小 (以像素為單位)。您可以使用特定圖表元素的屬性覆寫這項設定。 類型:數字
預設:自動
|
字型名稱 |
圖表中所有文字的預設字型。您可以使用特定圖表元素的屬性覆寫這項設定。 類型:字串
預設:「Arial」
|
ForceIFrame |
在內嵌頁框中繪製圖表。(請注意,在 IE8 中,系統會忽略此選項;所有 IE8 圖表都會以 i-frames 繪製)。 類型:布林值
預設值:false
|
HAXis |
擁有成員可設定各種水平軸元素的物件。若要指定此物件的屬性,您可以使用物件常值標記法,如下所示: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } 類型:物件
預設值:空值
|
hAxis.baseline |
水平軸的基準線。 類型:數字
預設:自動
|
hAxis.baselineColor |
水平軸的基準色彩。可以是任何 HTML 顏色字串,例如 類型:數字
預設:'black'
|
HXX.Direction |
沿著水平軸值的增長方向。如要指定值的順序,請指定 類型:1 或 -1
預設:1
|
hAxis.format |
數字軸標籤的格式字串。這是 ICU 模式集的子集。舉例來說,
標籤套用的實際格式設定衍生自 API 的載入地區。詳情請參閱使用特定語言代碼載入圖表。
在計算刻點值和格線時,系統會考慮所有相關格線選項的數個替代組合,如果格式化的刻點標籤重複或重疊,系統會拒絕其他的替代組合。因此,如果您只想要顯示整數刻點值,請指定 類型:字串
預設:自動
|
hAxis.gridlines |
物件,包含具有設定在軸軸上的格線。請注意,水平軸格線是垂直繪製的。若要指定此物件的 屬性,您可以使用物件常值標記法,如下所示: {color: '#333', minSpacing: 20} 類型:物件
預設值:空值
|
hAxis.gridlines.color |
圖表區域內水平格線的顏色。請指定有效的 HTML 色彩字串。 類型:字串
預設值:「#CCC」
|
hAxis.gridlines.count |
圖表區域內水平格線的概略數量。如果為 類型:數字
預設值:-1
|
hAxis.gridlines.units |
與日期計算的格線搭配使用日期/日期/時間/資料類型時,會覆寫不同格式的預設格式。允許輸入年、月、日、小時、分鐘、秒和毫秒的格式。 一般格式為: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } 詳情請參閱日期和時間。 類型:物件
預設值:空值
|
hAxis.minorGridlines |
擁有類似 hAxis.gridlines 選項,成員可在水平軸上設定次要格線的物件。 類型:物件
預設值:空值
|
hAxis.minorGridlines.color |
圖表區域內水平次要格線的色彩。請指定有效的 HTML 色彩字串。 類型:字串
預設:格線和背景顏色的混合
|
hAxis.minorGridlines.count |
類型:數字
預設: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.logScale |
類型:布林值
預設值:false
|
hAxis.scaleType |
類型:字串
預設:空值
|
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.ticks |
將自動產生的 X 軸刻點替換為指定的陣列。陣列的每個元素都必須是有效的刻點值 (例如數字、日期、日期或時間單位) 或物件。如果是物件,則應具有刻點值的
除非您指定要覆寫的 範例:
類型:元素陣列
預設:自動
|
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.maxValue 值 |
將水平軸的最大值移至指定值;在大多數圖表中,這會是向右的。如果設定的值小於資料的最大 x 值,系統會忽略這個屬性。
類型:數字
預設:自動
|
hAxis.minValue |
將水平軸的最小值移到指定值;在大多數圖表中是左側。如果設定的值大於資料的最低 X 值,系統會忽略這個值。
類型:數字
預設:自動
|
hAxis.viewWindowMode |
指定如何縮放水平軸以在圖表區域中顯示值。系統支援下列字串值:
類型:字串
預設值:等同於「美屬」;不過如果使用的話,系統會優先採用
haxis.viewWindow.min 和 haxis.viewWindow.max 。
|
hAxis.viewWindow |
指定水平軸的裁剪範圍。 類型:物件
預設值:空值
|
hAxis.viewWindow.max |
可顯示的最大水平資料值。 「 類型:數字
預設:自動
|
hAxis.viewWindow.min |
要顯示的最小水平資料值。 「 類型:數字
預設:自動
|
height |
圖表的高度,以像素為單位。 類型:數字
預設:所含元素的高度
|
傳說 |
包含成員,用於設定圖例各個層面的物件。若要指定此物件的屬性,您可以使用物件常值標記法,如下所示: {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>}
|
線條寬度 |
線條寬度 (單位為像素)。使用 0 可隱藏所有線條,只顯示線條。 類型:數字
預設:0
|
方向 |
圖表的方向。設為 類型:字串
預設:「水平」
|
PointShape |
個別資料元素的形狀:「圓形」、「三角形」、「正方形」、「菱形」、「星星」或「多邊形」。請參閱分數說明文件中的範例。 類型:字串
預設:「circle」
|
PointSize |
資料點的寬度,以像素為單位。使用 0 可隱藏所有點。您可以使用 類型:數字
預設:7
|
可見 |
設定是否要顯示點。如要隱藏所有點,請將值設為
您也可以使用 類型:布林值
預設:是
|
選項模式 |
當 類型:字串
預設值:「Single」
|
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.ignoreBounds |
如果設為 注意:這僅適用於 HTML 工具提示。如果您透過 SVG 工具提示啟用此功能,系統會忽略圖表邊界以外的溢位。詳情請參閱自訂工具提示內容。 類型:布林值
預設值:false
|
tooltip.isHtml |
設為 True 時,請使用 HTML 轉譯 (而非 SVG 轉譯) 工具提示。詳情請參閱自訂工具提示內容。 注意:「說明圖示圖表」不支援透過工具提示資料欄資料角色自訂 HTML 工具提示內容。 類型:布林值
預設值:false
|
tooltip.showColorCode |
如果為 true,在工具提示中的系列資訊旁邊顯示彩色正方形。 類型:布林值
預設值:false
|
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」
|
趨勢線 |
在支援圖表的圖表中顯示趨勢線。根據預設,系統會使用線性趨勢線,但您可以使用
系統是根據每個序列來指定趨勢線,因此您在大多數情況下都會選擇如下所示: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } 類型:物件
預設值:空值
|
趨勢線.n.color |
趨勢線的顏色,以英文顏色名稱或十六進位字串表示。 類型:字串
預設:預設系列顏色
|
Trendslines.n.degree |
針對 類型:數字
預設:3
|
趨勢線.n.labelInLegend |
如有設定,趨勢線就會在圖例中顯示為這個字串。 類型:字串
預設值:空值
|
趨勢線.n.lineWidth |
趨勢線的線條寬度 (以像素為單位)。 類型:數字
預設:2
|
趨勢線.n.opacity |
趨勢線的透明度,從 0.0 (透明) 到 1.0 (不透明)。 類型:數字
預設值:1.0
|
趨勢線.n.pointSize |
趨勢線會填入圖表中的許多點,藉此形成趨勢;這種罕見的選項可讓您自訂圓點的大小。通常我們會優先採用趨勢線的 類型:數字
預設:1
|
趨勢線.n.points 可見 |
趨勢線會由圖表中的許多圓點組成,藉此構成。趨勢線的 類型:布林值
預設:是
|
趨勢線.n.showR2 |
是否要在圖例或趨勢線工具提示中顯示決定的係數。 類型:布林值
預設值:false
|
趨勢線.n.type |
說明趨勢線是 類型:字串
預設:線性
|
趨勢線.n.visibleInLegend |
圖例中是否出現趨勢線。(會顯示在趨勢線工具提示中)。 類型:布林值
預設值:false
|
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.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.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 |
使用者點選視覺實體時觸發。如要瞭解所選項目,請呼叫 屬性:無
|
資料政策
系統會處理所有程式碼和資料,並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。