素食圖表

  1. Overview
  2. 簡易範例
  3. 載入中
  4. 資料格式
  5. 設定選項
  6. 方法
  7. 事件
  8. 資料政策

總覽

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);
使用 Vega 內嵌資料
        // 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

此物件可讓成員設定圖表區域的位置和大小 (繪製圖表時不含軸和圖例)。系統支援兩種格式：一個數字，或後接 % 的數字。簡單數字是以像素為單位的值，數字後面加上 % 代表百分比。範例：chartArea:{left:20,top:0,width:'50%',height:'75%'}

類型：物件
預設值：null
chartArea.bottom

圖表與下框線的繪製距離。

類型：數字或字串
預設：自動
chartArea.left

從左框線繪製圖表的時間長度。

類型：數字或字串
預設：自動
chartArea.right

從右框線繪製圖表的距離。

類型：數字或字串
預設：自動
chartArea.top

圖表與上框線的繪製距離。

類型：數字或字串
預設：自動
chartArea.width

圖表區域寬度。

類型：數字或字串
預設：自動
chartArea.height

圖表區域高度。

類型：數字或字串
預設：自動
高度

圖表的高度，以像素為單位。

類型：數字
預設：所含元素的高度
寬度

圖表的寬度，以像素為單位。

類型：數字
預設：所含元素的寬度

方法

方法
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()。

屬性：無

資料政策

所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。