總覽
VegaChart 是可能使用 Vega Visualization Grammar 完成的眾多視覺呈現方式之一；透過 Vega Visualization Grammar，這是用於建立、儲存及分享互動式視覺設計設計的宣告式語言。 您可以透過 Vega 以 JSON 格式描述圖表的視覺外觀和互動行為，並使用 Canvas 或 SVG 產生網頁式檢視畫面。
繪製 VegaChart 時，您必須在選項規格中加入如何在 Vega 視覺化文法中製作圖表。以下列舉幾個這類規格的範例，如需更多範例，請參閱 VegaChart 範例頁面。
注意事項：雖然 Google Charts VegaChart 可以繪製任何 Vega 圖表，方便您用 Vega JSON 規格 (包括 範例庫中的所有內容) 指定，但目前尚未提供需要呼叫 Vega API 的其他功能。
長條圖範例：長條圖
以下是用來繪製長條圖的 VegaChart 的簡單範例。(請參閱原始範例、詳細教學課程和 Vega 圖表編輯器中的長條圖)。
雖然這是另一種在 Google 圖表中產生長條圖的方法，但我們計劃根據這個 VegaChart 將其他長條圖和柱狀圖的所有功能，整合至新的實作中。
請注意，在本例中，「data」選項會替換為以下內容，該選項使用繪製呼叫提供的「資料表」做為另一個名為「table」的資料物件的「來源」，而「table」則會在 Vega 規格的其餘部分使用。
'data': [{'name': 'table', 'source': 'datatable'}],
<html>
<head>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<script>
google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);
function drawChart() {
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', 'id': 'category'});
dataTable.addColumn({type: 'number', 'id': 'amount'});
dataTable.addRows([
['A', 28],
['B', 55],
['C', 43],
['D', 91],
['E', 81],
['F', 53],
['G', 19],
['H', 87],
]);
const options = {
"vega": {
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 500,
"height": 200,
"padding": 5,
'data': [{'name': 'table', 'source': 'datatable'}],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
};
const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="chart-div" style="width: 700px; height: 250px;"></div>
</body>
</html>
載入中
google.charts.load 套件名稱為 "vegachart"。
google.charts.load("current", {packages: ["vegachart"]});
視覺呈現的類別名稱為 google.visualization.VegaChart。
var visualization = new google.visualization.VegaChart(container);
資料格式
透過 DataTable (或 DataView)，資料傳送到 VegaChart 的方式與其他 Google 圖表非常相似。主要差異在於，VegaChart 不需要依據資料欄的順序判斷資料的使用方式，而是以每個資料欄的 ID 為準，與您指定的特定 Vega 視覺化呈現要求相同。舉例來說，建立下列資料表時，資料表含有具有 'category' 和 'amount' ID 的資料欄，而相同的 ID 會在「vega」選項中使用來參照這些資料欄。
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', 'id': 'category'});
dataTable.addColumn({type: 'number', 'id': 'amount'});
dataTable.addRows([
['A', 28],
['B', 55],
['C', 43],
]);
const options = {
'vega': {
...
// Here we create the Vega data object named 'datatable',
// which will be passed in via the draw() call with a DataTable.
'data': {'name': 'datatable'},
'scales': [
{
'name': 'yscale',
// Here is an example of how to use the 'amount' field from 'datatable'.
'domain': {'data': 'datatable', 'field': 'amount'},
}
]
}
};
const chart = new google.visualization.VegaChart(
document.getElementById('chart-div'));
chart.draw(dataTable, options);
// A DataTable is required, but it may be empty.
const dataTable = new google.visualization.DataTable();
const options = {
'vega': {
// Here the data is specified inline in the Vega specification.
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
]
}
],
'scales': [
{
'name': 'yscale',
// Here is how Vega normally uses the 'amount' field from 'table'.
"domain": {"data": "table", "field": "category"},
}
]
}
};
const chart = new google.visualization.VegaChart(
document.getElementById('chart-div'));
chart.draw(dataTable, options);
不過，這種資料表只能以這種方式傳入 VegaChart，但有些 Vega 圖表需要多個資料表。我們會在日後推出的 Google 圖表版本中解決這項限制。
與此同時，您可以在 'vega' 'data' 選項中指定要使用的任何其他資料，方法包括將資料內嵌，或從網址載入資料。
以下提供兩項範例。
設定選項
| 名稱 | |
|---|---|
| chartArea |
此物件可讓成員設定圖表區域的位置和大小 (繪製圖表時不含軸和圖例)。系統支援兩種格式：一個數字，或後接 % 的數字。簡單數字是以像素為單位的值，數字後面加上 % 代表百分比。範例： 類型：物件
預設值：null
|
| chartArea.bottom |
圖表與下框線的繪製距離。 類型：數字或字串
預設：自動
|
| chartArea.left |
從左框線繪製圖表的時間長度。 類型：數字或字串
預設：自動
|
| chartArea.right |
從右框線繪製圖表的距離。 類型：數字或字串
預設：自動
|
| chartArea.top |
圖表與上框線的繪製距離。 類型：數字或字串
預設：自動
|
| chartArea.width |
圖表區域寬度。 類型：數字或字串
預設：自動
|
| chartArea.height |
圖表區域高度。 類型：數字或字串
預設：自動
|
| 高度 |
圖表的高度，以像素為單位。 類型：數字
預設：所含元素的高度
|
| 寬度 |
圖表的寬度，以像素為單位。 類型：數字
預設：所含元素的寬度
|
方法
| 方法 | |
|---|---|
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 |
在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 屬性：無
|
資料政策
所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。