Trang này được dịch bởi Cloud Translation API.

VegaChart

Tổng quan
Ví dụ đơn giản
Đang tải
Định dạng dữ liệu
Các lựa chọn cấu hình
Phương thức
Sự kiện
Chính sách về dữ liệu

Tổng quan

VegaChart là một trong nhiều hình ảnh trực quan mà bạn có thể tạo ra bằng cách sử dụng Ngữ pháp trực quan hoá Vega, một ngôn ngữ khai báo để tạo, lưu và chia sẻ các thiết kế trực quan mang tính tương tác. Với Vega, bạn có thể mô tả giao diện trực quan và hành vi tương tác của hình ảnh trực quan ở định dạng JSON, đồng thời tạo các chế độ xem dựa trên nền tảng web bằng cách sử dụng Canvas hoặc SVG.

Khi vẽ VegaChart, bạn phải đưa vào trong các tùy chọn một nội dung đặc tả về cách tạo biểu đồ theo ngữ pháp của hình ảnh Vega. Một vài ví dụ về những thông số kỹ thuật đó được bao gồm bên dưới và một vài ví dụ khác có thể được tìm thấy trên trang Ví dụ về VegaChart.

Lưu ý: Mặc dù VegaChart của Google Biểu đồ có thể vẽ bất kỳ biểu đồ Vega nào mà bạn có thể chỉ định bằng Thông số kỹ thuật JSON Vega (bao gồm mọi nội dung trong Thư viện mẫu), nhưng các tính năng bổ sung yêu cầu lệnh gọi đến API Vega chưa được cung cấp.

Một ví dụ đơn giản: Biểu đồ thanh

Dưới đây là một ví dụ đơn giản về VegaChart vẽ Biểu đồ thanh. (Xem ví dụ ban đầu, hướng dẫn chi tiết và Biểu đồ thanh trong trình chỉnh sửa biểu đồ Vega.)

Mặc dù đây là một cách khác để tạo biểu đồ thanh trong Google Biểu đồ, nhưng chúng tôi dự định tích hợp tất cả tính năng của các biểu đồ Thanh và Biểu đồ cột khác vào cách triển khai mới dựa trên VegaChart này.

Trong ví dụ này, hãy lưu ý rằng tuỳ chọn "data" được thay thế bằng thành phần sau, sử dụng "datatable" do lệnh gọi vẽ cung cấp làm "source" cho một đối tượng dữ liệu khác có tên là "table" và "table" (bảng) được dùng trong phần còn lại của quy cách Vega.

  'data': [{'name': 'table', 'source': 'datatable'}],

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);
      }

<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>

Đang tải

Tên gói google.charts.load là "vegachart".

google.charts.load("current", {packages: ["vegachart"]});

Tên lớp của hình ảnh trực quan là google.visualization.VegaChart.

var visualization = new google.visualization.VegaChart(container);

Định dạng dữ liệu

Dữ liệu có thể được chuyển vào VegaChart theo cách rất giống với các Biểu đồ khác của Google bằng cách sử dụng DataTable (hoặc DataView). Điểm khác biệt chính là thay vì dựa vào thứ tự của các cột để xác định cách sử dụng các cột đó, VegaChart sẽ dựa vào mã nhận dạng của mỗi cột giống với mã dự kiến cho hình ảnh Vega cụ thể mà bạn chỉ định. Ví dụ: DataTable sau đây được tạo với các cột có mã nhận dạng cho 'category' và 'amount', đồng thời các mã nhận dạng đó được dùng trong tuỳ chọn "vega" để tham chiếu đến những cột này.

Có DataTable

        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);

Với dữ liệu cùng dòng 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);

Tuy nhiên, chỉ một DataTable như vậy có thể được chuyển vào VegaChart theo cách này, trong khi một số biểu đồ Vega yêu cầu nhiều bảng dữ liệu. Chúng tôi sẽ giải quyết hạn chế này trong bản phát hành Google Biểu đồ trong tương lai.

Trong thời gian chờ đợi, bạn có thể chỉ định mọi dữ liệu bổ sung cần sử dụng trong tuỳ chọn 'vega' 'data', bằng cách đặt nội tuyến dữ liệu đó hoặc tải dữ liệu từ một URL. Bạn có thể xem ví dụ về cả hai cách này bên dưới.

Các lựa chọn cấu hình

Tên
chartArea	Một đối tượng có các thành phần để định cấu hình vị trí và kích thước của vùng biểu đồ (trong đó biểu đồ được vẽ, ngoại trừ các trục và chú giải). Có hai định dạng được hỗ trợ: số hoặc số theo sau là %. Số đơn giản là giá trị tính bằng pixel; số theo sau là % là tỷ lệ phần trăm. Ví dụ: `chartArea:{left:20,top:0,width:'50%',height:'75%'}` Loại: đối tượng Mặc định: rỗng
chartArea.bottom	Khoảng cách để vẽ biểu đồ từ đường viền dưới cùng. Loại: số hoặc chuỗi Mặc định: tự động
chartArea.left	Khoảng cách để vẽ biểu đồ từ đường viền trái. Loại: số hoặc chuỗi Mặc định: tự động
chartArea.right	Khoảng cách để vẽ biểu đồ từ đường viền phải. Loại: số hoặc chuỗi Mặc định: tự động
chartArea.top	Khoảng cách để vẽ biểu đồ từ đường viền trên. Loại: số hoặc chuỗi Mặc định: tự động
chartArea.width	Chiều rộng vùng biểu đồ. Loại: số hoặc chuỗi Mặc định: tự động
chartArea.height	Chiều cao của vùng biểu đồ. Loại: số hoặc chuỗi Mặc định: tự động
độ cao	Chiều cao của biểu đồ, tính bằng pixel. Loại: số Mặc định: chiều cao của phần tử chứa
chiều rộng	Chiều rộng của biểu đồ, tính bằng pixel. Loại: số Mặc định: chiều rộng của phần tử chứa

Phương thức

Phương thức
`draw(data, options)`	Vẽ biểu đồ. Biểu đồ này chỉ chấp nhận các lệnh gọi phương thức khác sau khi kích hoạt sự kiện `ready`. `Extended description`. Loại trả lại: không có
`getAction(actionID)`	Trả về đối tượng hành động trong chú giải công cụ với `actionID` được yêu cầu. Loại dữ liệu trả về: đối tượng
`getBoundingBox(id)`	Trả về một đối tượng chứa bên trái, trên cùng, chiều rộng và chiều cao của phần tử biểu đồ `id`. Định dạng của `id` chưa được ghi nhận (chúng là các giá trị trả về của trình xử lý sự kiện), nhưng sau đây là một số ví dụ: `var cli = chart.getChartLayoutInterface();` Chiều cao của vùng biểu đồ `cli.getBoundingBox('chartarea').height` Chiều rộng của thanh thứ ba trong chuỗi đầu tiên của biểu đồ thanh hoặc biểu đồ cột `cli.getBoundingBox('bar#0#2').width` Hộp giới hạn của hình chêm thứ năm của biểu đồ hình tròn `cli.getBoundingBox('slice#4')` Hộp giới hạn cho dữ liệu biểu đồ của một biểu đồ dọc (ví dụ: cột): `cli.getBoundingBox('vAxis#0#gridline')` Hộp giới hạn cho dữ liệu biểu đồ của biểu đồ ngang (ví dụ: biểu đồ thanh): `cli.getBoundingBox('hAxis#0#gridline')` Các giá trị liên quan đến vùng chứa của biểu đồ. Gọi lệnh này sau khi biểu đồ được vẽ. Loại dữ liệu trả về: đối tượng
`getChartAreaBoundingBox()`	Trả về một đối tượng chứa bên trái, trên cùng, chiều rộng và chiều cao của nội dung biểu đồ (tức là không bao gồm nhãn và chú giải): `var cli = chart.getChartLayoutInterface();` `cli.getChartAreaBoundingBox().left` `cli.getChartAreaBoundingBox().top` `cli.getChartAreaBoundingBox().height` `cli.getChartAreaBoundingBox().width` Các giá trị liên quan đến vùng chứa của biểu đồ. Gọi lệnh này sau khi biểu đồ được vẽ. Loại dữ liệu trả về: đối tượng
`getChartLayoutInterface()`	Trả về một đối tượng chứa thông tin về vị trí trên màn hình của biểu đồ và các phần tử của biểu đồ đó. Bạn có thể gọi các phương thức sau trên đối tượng được trả về: `getBoundingBox` `getChartAreaBoundingBox` `getHAxisValue` `getVAxisValue` `getXLocation` `getYLocation` Gọi lệnh này sau khi biểu đồ được vẽ. Loại dữ liệu trả về: đối tượng
`getHAxisValue(xPosition, optional_axis_index)`	Trả về giá trị dữ liệu theo chiều ngang tại `xPosition`. Giá trị này là một giá trị bù trừ pixel tính từ cạnh trái của vùng chứa biểu đồ. Có thể là giá trị âm. Ví dụ: `chart.getChartLayoutInterface().getHAxisValue(400)` Gọi lệnh này sau khi biểu đồ được vẽ. Loại trả về: số
`getImageURI()`	Trả về biểu đồ được chuyển đổi tuần tự dưới dạng URI hình ảnh. Gọi lệnh này sau khi biểu đồ được vẽ. Xem In biểu đồ PNG. Loại dữ liệu trả về: chuỗi
`getSelection()`	Trả về một mảng gồm các thực thể biểu đồ đã chọn. Đối với biểu đồ này, bạn chỉ có thể chọn một thực thể tại một thời điểm bất kỳ. `Extended description` . Loại dữ liệu trả về: Mảng gồm các phần tử lựa chọn
`getVAxisValue(yPosition, optional_axis_index)`	Trả về giá trị dữ liệu ngành dọc tại `yPosition`. Giá trị này là một giá trị bù trừ pixel xuống từ cạnh trên của vùng chứa biểu đồ. Có thể là giá trị âm. Ví dụ: `chart.getChartLayoutInterface().getVAxisValue(300)` Gọi lệnh này sau khi biểu đồ được vẽ. Loại trả về: số
`getXLocation(dataValue, optional_axis_index)`	Trả về toạ độ x của điểm ảnh `dataValue` tương ứng với cạnh trái của vùng chứa biểu đồ. Ví dụ: `chart.getChartLayoutInterface().getXLocation(400)` Gọi lệnh này sau khi biểu đồ được vẽ. Loại trả về: số
`getYLocation(dataValue, optional_axis_index)`	Trả về toạ độ pixel y của `dataValue` tương ứng với cạnh trên cùng của vùng chứa biểu đồ. Ví dụ: `chart.getChartLayoutInterface().getYLocation(300)` Gọi lệnh này sau khi biểu đồ được vẽ. Loại trả về: số
`removeAction(actionID)`	Xoá hành động trong chú giải công cụ với `actionID` được yêu cầu khỏi biểu đồ. Loại trả lại hàng: `none`
`setAction(action)`	Đặt một hành động trong chú giải công cụ cần thực thi khi người dùng nhấp vào văn bản hành động. Phương thức `setAction` lấy một đối tượng làm tham số hành động. Đối tượng này phải chỉ định 3 thuộc tính: `id` – mã nhận dạng của hành động đang được đặt, `text` – văn bản sẽ xuất hiện trong phần chú thích cho hành động và `action` – hàm sẽ được chạy khi người dùng nhấp vào văn bản hành động. Bạn phải đặt mọi thao tác trong chú thích công cụ trước khi gọi phương thức `draw()` của biểu đồ. Nội dung mô tả mở rộng. Loại trả lại hàng: `none`
`setSelection()`	Chọn các thực thể biểu đồ đã chỉ định. Huỷ mọi lựa chọn trước đó. Đối với biểu đồ này, mỗi lần bạn chỉ có thể chọn một thực thể. `Extended description` . Loại trả lại: không có
`clearChart()`	Xoá biểu đồ và giải phóng tất cả tài nguyên đã phân bổ của biểu đồ đó. Loại trả lại: không có

Sự kiện

Để biết thêm thông tin về cách sử dụng những sự kiện này, hãy xem bài viết Tương tác cơ bản, Xử lý sự kiện và Sự kiện kích hoạt.

Tên
`animationfinish`	Được kích hoạt khi ảnh động chuyển đổi hoàn tất. Thuộc tính: không có
`click`	Được kích hoạt khi người dùng nhấp vào bên trong biểu đồ. Thông tin này có thể được dùng để xác định thời điểm người dùng nhấp vào tiêu đề, phần tử dữ liệu, mục chú giải, trục, đường lưới hoặc nhãn. Tài sản: targetID
`error`	Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ. Thuộc tính: mã nhận dạng, thông báo
`legendpagination`	Được kích hoạt khi người dùng nhấp vào mũi tên phân trang của chú giải. Trả về chỉ mục trang hiện tại từ 0 của chú giải và tổng số trang. Tài sản: currentPageIndex, totalPages
`onmouseover`	Được kích hoạt khi người dùng di chuột qua một thực thể hình ảnh. Trả về các chỉ mục hàng và cột của phần tử tương ứng trong bảng dữ liệu. Tài sản: hàng, cột
`onmouseout`	Được kích hoạt khi người dùng di chuột ra khỏi một thực thể trực quan. Trả về các chỉ mục hàng và cột của phần tử tương ứng trong bảng dữ liệu. Tài sản: hàng, cột
`ready`	Biểu đồ này đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức `draw` và chỉ gọi các phương thức này sau khi sự kiện được kích hoạt. Thuộc tính: không có
`select`	Được kích hoạt khi người dùng nhấp vào một thực thể hình ảnh. Để tìm hiểu những mục đã được chọn, hãy gọi hàm `getSelection()`. Thuộc tính: không có

Chính sách về dữ liệu

Tất cả mã và dữ liệu đều được xử lý và hiển thị trong trình duyệt. Không có dữ liệu nào được gửi đến bất kỳ máy chủ nào.