Flutter Vega图表嵌入插件vega_embed

简介

vega_embed_flutter 是一个用于在 Flutter Web 和 Flutter 应用程序中嵌入 Vega-Lite 图表的插件。它通过 webview_flutter 实现，并且目前在 Flutter Web 上表现良好。该插件内部使用了 vega-embed JavaScript 库来通过 JavaScript 互操作和 <HTMLElementView> 嵌入这些规格。

插件状态

示例页面

一个包含不同 Vega-Embed 选项示例的演示页面可以在以下链接找到： https://abhilash-chandran.github.io/vega_embed_flutter/

此外，一个完整的带有各种图表的演示页面可以在这里找到： https://abhilash-chandran.github.io/vega_embed_flutter_demo_page/#/

注意：由于 Flutter Web 的 WebView 当前仍处于开发者预览阶段，因此 vega_embed_flutter 的 WebView 支持也应被视为开发者预览版。

致谢

此插件得以实现得益于以下项目的伟大工作：

有关如何使用 Vega-Lite 规格进行可视化的详细文档，请访问其文档页面。

通用设置步骤（针对 Flutter Web）

1. 导入 Vega 相关的 JavaScript 文件

首先，在项目中添加 Vega 相关的 JavaScript 文件。例如：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
    <title>vega_flutter</title>
  </head>
  <body>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

2. 添加 Vega-Lite 规格文件

Vega-Lite 和 Vega 使用 JSON 文件定义可视化内容。建议将这些 JSON 文件放在一个单独的文件夹中，例如 vega_lite_specs。例如：

$Project_root\vega_lite_specs
              |_ bart_chart.json
              |_ interactive_multiline_plot.json
              |_ interactive_splom.json

3. 在 `pubspec.yaml` 中添加资产条目

为了使 Web 构建能够加载 JSON 文件，将其添加到 pubspec.yaml 文件中：

flutter:
  uses-material-design: true
  # 将这些目录中的所有文件在构建过程中包含进来，并放置在 build/web/assets 文件夹下。
  assets:
    - vega_lite_specs/

4. 导入库并使用小部件

导入 vega_embed_flutter 库：

import 'package:vega_embed_flutter/vega_embed_flutter.dart';

然后创建一个普通的无状态或有状态小部件并像普通小部件一样使用它：

class BarChart extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return VegaLiteEmbedder(
      viewFactoryId: 'MyBarChart',
      vegaLiteSpecLocation: '/assets/vega_lite_specs/bar_chart.json',
    );
  }
}

通用设置步骤（针对普通 Flutter 应用）

遵循上述部分的添加 Vega-Lite 规格文件和在 pubspec.yaml 中添加资产条目。

1. 导入 WebView 特定文件并使用小部件

导入 WebView 特定的库：

import 'package:vega_embed_flutter/vega_embed_webview.dart';

然后创建一个普通的无状态或有状态小部件并像普通小部件一样使用它：

class ExampleWebViewApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Center(
          child: Column(
            children: [
              Expanded(
                child: VegaLiteWebViewEmbedder(
                  vegaLiteSpecLocation: 'vega_lite_specs/bar_chart copy.json',
                ),
              ),
              Expanded(
                child: VegaLiteWebViewEmbedder(
                  vegaLiteSpecLocation: 'vega_lite_specs/interactive_index_chart.vl.json',
                  vegaEmbedOptions: VegaEmbedOptions(theme: 'dark'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

VegaEmbed 选项 [WIP]（仅限 Web）

以下 Vega-Embed 选项已测试并作为演示页面的一部分可用。如果您需要进一步测试或启用其他选项，请提交问题，以便我可以优先处理必要的选项。

VegaEmbed 选项表

嵌入选项	状态	备注
mode	🚧	可用但未测试。
theme	💯	详细主题信息请参见此处。有效值为 [excel, ggplot2, quartz, vox, fivethirtyeight, dark, latimes, urbaninstitute, googlecharts]。
defaultStyle	✔️
renderer	✔️
logLevel	🚧
tooltip	🤔	如果需要，请告知我。
loader	❌
patch	❌
width	✔️	注意：⚠️ 规范中提到的宽度会覆盖此设置。
height	✔️	注意：⚠️ 规范中提到的高度会覆盖此设置。
padding	✔️
actions	🚧	注意：⚠️ 示例展示了如何移除操作按钮，但并未完全符合规范。
scaleFactor	✔️	注意：这是导出文件的比例因子，不是图表的比例因子。
config	🤔	如果需要，请告知我。将配置对象移植到 Dart 需要大量努力进行测试。
editorUrl	🚧	可用但未测试。
sourceHeader	🚧	可用但未测试。
sourceFooter	🚧	可用但未测试。
hover	🤔	如果需要，请告知我。
i18n	✔️
downloadFileName	✔️
formatLocale	🚧	可用但未测试。
timeFormatLocale	🚧	可用但未测试。

使用自己的图表开始

假设用户已经启用了 Flutter Web 开发所需的配置。如果尚未启用，请查看 Flutter Web 入门指南。

步骤

创建一个名为 vega_embed_test 的项目目录。
使用 flutter create . 命令创建一个 Flutter Web 项目。
编辑 pubspec.yaml 文件以安装 vega_embed_flutter 包。
- 例如：添加 vega_embed_flutter: ^0.1.0 到依赖项中。

导入 Vega 相关的 JavaScript 文件

在 index.html 文件中添加 Vega 相关的 JavaScript 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
    <title>vega_flutter</title>
  </head>
  <body>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

创建 Vega-Lite 规格 JSON 文件

例如，在 vega_lite_specs 目录下创建 bar-chart.vl.json 文件：

$Project_root\vega_lite_specs
                  |_ bar-charts.vl.json
                  |_ another-chart.vl.json

向 `bar-charts.vl.json` 添加内容

以下是一个简单的带有嵌入数据的条形图：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "width": 500,
  "data": {
    "values": [
      { "a": "A", "b": 28 },
      { "a": "B", "b": 55 },
      { "a": "C", "b": 43 },
      { "a": "D", "b": 91 },
      { "a": "E", "b": 81 },
      { "a": "F", "b": 53 },
      { "a": "G", "b": 19 },
      { "a": "H", "b": 87 },
      { "a": "I", "b": 52 }
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": { "field": "a", "type": "ordinal" },
    "y": { "field": "b", "type": "quantitative" }
  }
}

在 `pubspec.yaml` 中添加资产

为了访问上面创建的 JSON 文件作为资产，必须将其添加到 pubspec.yaml 中：

flutter:
  assets:
    - vega_lite_specs/
    - vega_lite_specs/other_vega_lite_specs/

使用 `VegaLiteEmbedder` 小部件

创建一个无状态或有状态的小部件并使用 VegaLiteEmbedder 小部件，如下面所示：

import 'package:vega_embed_flutter/vega_embed_flutter.dart';

class BarChart extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return VegaLiteEmbedder(
      viewFactoryId: 'MyBarChart',
      vegaLiteSpecLocation: '/assets/vega_lite_specs/bar_chart.json',
    );
  }
}

编辑 `main.dart`

在 main.dart 文件中，将新的 BarChart 小部件包含在其他小部件中。运行应用程序：

flutter run -d web

示例输出

运行后，您应该会看到类似以下的输出：

主题

Vega-Embed 提供了一些基本的默认主题，例如 ‘dark’、‘ggplot2’ 等。完整的预定义主题列表可以在 Vega-Themes 查看。

VegaLiteEmbedder 小部件提供了启用这些主题的选项。例如，以下条形图渲染为暗模式：

import 'package:vega_embed_flutter/vega_embed_flutter.dart';

class BarChart extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return VegaLiteEmbedder(
      viewFactoryId: 'MyBarChart',
      vegaLiteSpecLocation: '/assets/vega_lite_specs/bar_chart.json',
      vegaOptions: VegaEmbedOptions(theme: 'dark'),
    );
  }
}

使用 Vega Embed 在普通 Flutter 应用中

要在普通 Flutter 应用中使用相同的规格文件，可以使用 WebView。除了导入 index.html 的步骤外，其余步骤都可以忽略。

替换导入语句，并使用 VegaLiteWebViewEmbedder 小部件代替 VegaLitEmbedder：

import 'package:vega_embed_flutter/vega_embed_webview.dart';

class BarChart extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return VegaLiteWebViewEmbedder(
      viewFactoryId: 'MyBarChart',
      vegaLiteSpecLocation: '/assets/vega_lite_specs/bar_chart.json',
      vegaOptions: VegaEmbedOptions(theme: 'dark'),
    );
  }
}

更多关于Flutter Vega图表嵌入插件vega_embed_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 1楼

更多关于Flutter Vega图表嵌入插件vega_embed_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

vega_embed_flutter 是一个用于在 Flutter 应用中嵌入 Vega 和 Vega-Lite 图表的插件。Vega 和 Vega-Lite 是用于创建交互式数据可视化的高级语法，基于 JSON 格式的声明式语言。vega_embed_flutter 插件允许你在 Flutter 应用中轻松地渲染这些图表。

安装 `vega_embed_flutter`

首先，你需要在 pubspec.yaml 文件中添加 vega_embed_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  vega_embed_flutter: ^0.1.0

然后运行 flutter pub get 来安装依赖。

使用 `vega_embed_flutter`

以下是一个简单的示例，展示如何在 Flutter 应用中使用 vega_embed_flutter 插件来渲染一个 Vega-Lite 图表。

import 'package:flutter/material.dart';
import 'package:vega_embed_flutter/vega_embed_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Vega Embed Flutter Example'),
        ),
        body: Center(
          child: VegaEmbed(
            spec: '''
            {
              "\$schema": "https://vega.github.io/schema/vega-lite/v5.json",
              "description": "A simple bar chart with embedded data.",
              "data": {
                "values": [
                  {"a": "A", "b": 28},
                  {"a": "B", "b": 55},
                  {"a": "C", "b": 43},
                  {"a": "D", "b": 91},
                  {"a": "E", "b": 81},
                  {"a": "F", "b": 53},
                  {"a": "G", "b": 19},
                  {"a": "H", "b": 87},
                  {"a": "I", "b": 52}
                ]
              },
              "mark": "bar",
              "encoding": {
                "x": {"field": "a", "type": "ordinal"},
                "y": {"field": "b", "type": "quantitative"}
              }
            }
            ''',
          ),
        ),
      ),
    );
  }
}

Flutter Vega图表嵌入插件vega_embed_flutter的使用

简介