簡介
VegaChart 可以採用 Vega 視覺化文法建立多種可視覺化圖表之一。 使用 Vega 時，您可以使用 JSON 格式描述視覺化外觀的視覺外觀和互動行為，並使用 Canvas 或 SVG 產生網頁式檢視畫面。
繪製 VegaChart 時，您必須在選項中納入在 Vega 視覺化文法中建構圖表的規格。以下提供幾個這類範例，您可以在 VegaChart 範例網頁上找到更多範例。
注意：雖然 Google Chart VegaChart 可以繪製任何可使用 Vega JSON 規格指定的 Vega 圖表 (包括範例庫中的所有功能)，但尚無法使用需要呼叫 Vega API 的其他功能。
簡易圖表 (長條圖)
以下是以長條圖繪製出長條圖的 VegaChart 範例。 (請參閱原始範例、詳細教學課程，以及 Vega 圖表編輯器中的長條圖)。
雖然這也代表了在 Google 圖表中產生長條圖的另一個方法，但我們也計劃將其他長條圖和柱狀圖的所有功能整合到以這個 VegaChart 為基礎的新實作中。
在這個範例中，請注意，[data] 選項替換為下列內容，其使用繪製呼叫提供的「datatable」做為另一個資料物件的「source」（另一個資料表）的「source」，而在 Vega 規格的其餘部分會使用「table」。
'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);
資料格式
將資料傳送至 VegaChart 的方式，與其他 Google 圖表類似，使用 DataTable (或 DataView)。主要差異在於， VegaChart 仰賴每個資料欄的 ID 與您指定的 Vega 視覺化視覺化內容預期相同，而非依賴資料欄的順序來決定。例如，以下 DataTable 使用 ID 為 'category' 和 'amount' 的資料欄建立而成，相同的 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' 選項，指定您需要的任何額外資料 (無論是透過內嵌方式的方式或透過網址載入資料)。以下提供這兩種範例。
設定選項
| 名稱 | |
|---|---|
| 圖表區域 |
擁有成員可設定圖表區域位置和大小的物件 (繪製圖表本身的位置，不含軸和圖例)。系統支援數字格式：範例： 類型：物件
預設值：空值
|
| 區域：圖表區域 |
從下框線繪製圖表的程度。 類型：數字或字串
預設：自動
|
| 圖表區域 |
從左框線繪製圖表的程度。 類型：數字或字串
預設：自動
|
| 圖表區域 |
從右框線繪製圖表的程度。 類型：數字或字串
預設：自動
|
| 排行榜區域 |
從上方邊框繪製圖表的程度。 類型：數字或字串
預設：自動
|
| 圖表區域 |
圖表區域寬度。 類型：數字或字串
預設：自動
|
| 圖表區域 |
圖表區域高度。 類型：數字或字串
預設：自動
|
| height |
圖表的高度，以像素為單位。 類型：數字
預設：所含元素的高度
|
| 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 |
使用者點選視覺實體時觸發。如要瞭解所選項目，請呼叫 屬性：無
|
資料政策
系統會處理所有程式碼和資料，並在瀏覽器中顯示。系統不會將資料傳送至任何伺服器。