概要
VegaChart は、Vega Visualization Grammar を使用して作成できるさまざまな可視化手法の一つで、インタラクティブな可視化設計を作成、保存、共有するための宣言型言語です。Vega では、ビジュアリゼーションの視覚的な外観とインタラクティブな動作を JSON 形式で記述し、Canvas または SVG を使用してウェブベースのビューを生成できます。
VegaChart を描画するときは、Vega 可視化文法でグラフを作成する方法を仕様のオプションに含める必要があります。このような仕様の例を以下に示します。VegaChart の例ページにもいくつか例があります。
注: Google Chart の VegaChart は、Vega JSON 仕様（サンプル ギャラリーのすべての内容を含む）で指定できるすべての Vega グラフを描画できますが、 Vega API の呼び出しを必要とする追加機能はまだ利用できません。
棒グラフの簡単な例
以下に、棒グラフを描画する VegaChart の簡単な例を示します。（元の例、詳細なチュートリアル、Vega グラフエディタの棒グラフをご覧ください）。
これは、Google チャートで棒グラフを作成するもう一つの方法ですが、この VegaChart に基づいた他の棒グラフと縦棒グラフのすべての機能を新しい実装に統合する予定です。
この例では、「data」オプションは次のように置き換えられます。これは、「draw」呼び出しで提供される「datatable」を、「table」という別のデータ オブジェクトの「source」として使用し、「Vetable」は残りの 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）を使用して、他の Google Chart と同じように VegaChart に渡すことができます。主な違いは、VegaChart では列の順序によって列の使い方が決まるのではなく、各列の ID が特定の Vega ビジュアリゼーションで期待される ID と同じになるということです。たとえば、次の DataTable は、'category' と 'amount' の ID を持つ列で作成されています。「vega」オプション内ではこれらの列を参照するために同じ ID が使用されています。
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 に渡すことができる DataTable は 1 つだけですが、一部の Vega グラフには複数のデータテーブルが必要です。この制限については、Google Chart の今後のリリースで対処する予定です。
それまでの間は、必要なデータを 'vega' 'data' オプションの中で指定するには、インライン化するか、URL から読み込みます。それぞれの例を以下に示します。
構成オプション
| 名前 | |
|---|---|
| グラフ領域 |
メンバーがグラフ領域の配置とサイズを設定するためのオブジェクト（グラフ自体が描画される軸と凡例を除く）。数字と、それに続く % の 2 つの形式がサポートされています。単純な数値はピクセル単位で表される値であり、数値の後に % が続く率がパーセンテージです。例: タイプ: オブジェクト
デフォルト: null
|
| グラフ領域 |
グラフの下部枠線からの距離。 タイプ: 数値または文字列
デフォルト: 自動
|
| ChartArea.left |
グラフの左枠線からの距離。 タイプ: 数値または文字列
デフォルト: 自動
|
| ChartArea.right |
右枠線からグラフを描画する距離。 タイプ: 数値または文字列
デフォルト: 自動
|
| ChartArea.top |
グラフの上枠線からの距離。 タイプ: 数値または文字列
デフォルト: 自動
|
| ChartArea.width |
グラフの領域の幅。 タイプ: 数値または文字列
デフォルト: 自動
|
| ChartArea.height |
グラフの領域の高さ。 タイプ: 数値または文字列
デフォルト: 自動
|
| 高さ |
グラフの高さ（ピクセル単位）。 タイプ: 数値
デフォルト: 要素を格納する高さ
|
| width |
グラフの幅（ピクセル単位）です。 タイプ: 数値
デフォルト: 含まれる要素の幅
|
メソッド
| メソッド | |
|---|---|
draw(data, options) |
グラフを描画します。グラフでは、 戻り値の型: なし
|
getAction(actionID) |
リクエストされた 戻り値の型: オブジェクト
|
getBoundingBox(id) |
グラフ要素
値はグラフのコンテナを基準にしています。これは、グラフが描画された後に呼び出します。 戻り値の型: オブジェクト
|
getChartAreaBoundingBox() |
グラフのコンテンツの左側、上部、幅、高さを含むオブジェクトを返します（ラベルと凡例を除く）。
値はグラフのコンテナを基準にしています。これは、グラフが描画された後に呼び出します。 戻り値の型: オブジェクト
|
getChartLayoutInterface() |
グラフの画面上の配置とその要素に関する情報を含むオブジェクトを返します。 返されたオブジェクトで次のメソッドを呼び出すことができます。
グラフを描画した後に呼び出します。 戻り値の型: オブジェクト
|
getHAxisValue(xPosition, optional_axis_index) |
チャート コンテナの左端からのピクセル オフセットである （例: グラフを描画した後に呼び出します。 戻り値の型: number
|
getImageURI() |
画像 URI としてシリアル化されたグラフを返します。 グラフを描画した後に呼び出します。 PNG グラフを印刷するをご覧ください。 戻り値の型: 文字列
|
getSelection() |
選択したグラフ エンティティの配列を返します。このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: 選択要素の配列
|
getVAxisValue(yPosition, optional_axis_index) |
縦方向のデータ値を （例: グラフを描画した後に呼び出します。 戻り値の型: number
|
getXLocation(dataValue, optional_axis_index) |
グラフのコンテナの左端からの （例: グラフを描画した後に呼び出します。 戻り値の型: number
|
getYLocation(dataValue, optional_axis_index) |
グラフのコンテナの上端からの （例: グラフを描画した後に呼び出します。 戻り値の型: number
|
removeAction(actionID) |
リクエストされた 戻り値の型:
none |
setAction(action) |
ユーザーがアクション テキストをクリックしたときに実行されるツールチップ アクションを設定します。
グラフの 戻り値の型:
none |
setSelection() |
指定されたグラフのエンティティを選択します。以前の選択をすべてキャンセルします。
このグラフでは、一度に 1 つのエンティティしか選択できません。
戻り値の型: なし
|
clearChart() |
グラフをクリアし、割り当てられているすべてのリソースを解放します。 戻り値の型: なし
|
イベント
これらのイベントの使用方法について詳しくは、基本的なインタラクティビティ、イベントの処理、配信イベントをご覧ください。
| 名前 | |
|---|---|
animationfinish |
遷移アニメーションが完了すると呼び出されます。 プロパティ: なし
|
click |
ユーザーがグラフ内をクリックすると呼び出されます。タイトル、データ要素、凡例のエントリ、軸、グリッド線、ラベルがクリックされたタイミングを識別するために使用できます。 プロパティ: targetID
|
error |
グラフのレンダリング中にエラーが発生しました。 プロパティ: ID、メッセージ
|
legendpagination |
ユーザーが凡例のページ分け矢印をクリックすると呼び出されます。現在の凡例にあるゼロベースのページ インデックスと、ページの総数を返します。 プロパティ: currentPageIndex、totalPages
|
onmouseover |
ユーザーがビジュアル エンティティにカーソルを合わせると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。 プロパティ: 行、列
|
onmouseout |
ユーザーがビジュアル エンティティからマウスアウトすると呼び出されます。対応するデータテーブル要素の行インデックスと列インデックスを返します。 プロパティ: 行、列
|
ready |
外部メソッド呼び出しのグラフの準備が完了しました。グラフを描画し、描画後にメソッドを呼び出す場合は、 プロパティ: なし
|
select |
ユーザーがビジュアル エンティティをクリックすると呼び出されます。選択内容を確認するには、 プロパティ: なし
|
データポリシー
すべてのコードとデータはブラウザで処理され、レンダリングされます。データがサーバーに送信されることはありません。