如何在Angular仪表板中展示Gravis库生成的Python可视化？

核心思路 #

Gravis支持导出HTML/SVG、生成D3兼容配置，结合Angular的特性，可从后端生成可视化资源或前端复用D3配置两个方向实现集成，以下是具体可行方案：

方案一：后端生成HTML片段，Angular安全嵌入（最直接） #

利用Gravis的export_html()生成完整可视化HTML，后端通过API提供，Angular请求后用DomSanitizer处理后嵌入页面。

步骤1：后端服务（Flask示例）

编写接口运行Gravis代码，返回HTML字符串：

from flask import Flask, jsonify
import gravis as gv

app = Flask(__name__)

# 解决跨域问题
from flask_cors import CORS
CORS(app)

@app.route('/generate-graph')
def generate_graph():
    graph1 = {
        'graph':{
            'directed': True,
            'metadata': {
                'arrow_size': 5,
                'background_color': 'black',
                'edge_size': 3,
                'edge_label_size': 14,
                'edge_label_color': 'white',
                'node_size': 15,
                'node_color': 'white',
            },
            'nodes': {
                1: {'metadata': {'shape': 'rectangle', 'y': 200}},
                2: {},
                3: {},
                4: {'metadata': {'shape': 'rectangle', 'y': 200}},
                5: {'metadata': {'shape': 'hexagon', 'y': 0}},
            },
            'edges': [
                {'source': 1, 'target': 2, 'metadata': {'color': '#d73027', 'de': 'Das',   'en': 'This'}},
                {'source': 2, 'target': 3, 'metadata': {'color': '#f46d43', 'de': 'ist',   'en': 'is'}},
                {'source': 3, 'target': 1, 'metadata': {'color': '#fdae61', 'de': 'das',   'en': 'the'}},
                {'source': 1, 'target': 4, 'metadata': {'color': '#fee08b', 'de': 'Haus',  'en': 'house'}},
                {'source': 4, 'target': 3, 'metadata': {'color': '#d9ef8b', 'de': 'vom',   'en': 'of'}},
                {'source': 3, 'target': 5, 'metadata': {'color': '#a6d96a', 'de': 'Ni-.',  'en': 'San-'}},
                {'source': 5, 'target': 2, 'metadata': {'color': '#66bd63', 'de': 'ko-',   'en': 'ta'}},
                {'source': 2, 'target': 4, 'metadata': {'color': '#1a9850', 'de': 'laus.', 'en': 'Claus.'}},
            ],
        }
    }
    # 修正原代码中的graph2为graph1
    fig = gv.d3(graph1, use_node_size_normalization=True, node_size_normalization_max=30,
                use_edge_size_normalization=True, edge_size_data_source='weight', edge_curvature=0.3)
    html_content = fig.export_html()
    return jsonify({'html': html_content})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

步骤2：Angular前端实现

请求后端接口，处理HTML并嵌入：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-graph-viewer',
  template: `<div [innerHTML]="safeGraphHtml" style="width: 100%; height: 600px;"></div>`,
})
export class GraphViewerComponent implements OnInit {
  safeGraphHtml: SafeHtml | undefined;

  constructor(private http: HttpClient, private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    this.http.get<any>('http://localhost:5000/generate-graph').subscribe(res => {
      this.safeGraphHtml = this.sanitizer.bypassSecurityTrustHtml(res.html);
    });
  }
}

方案二：后端返回D3配置数据，Angular原生渲染（更灵活） #

Gravis的gv.d3()本质是生成D3可识别的配置与数据，后端返回核心数据后，前端用D3直接渲染，适配Angular组件化需求。

步骤1：后端接口修改

返回Gravis处理后的D3数据结构：

@app.route('/generate-graph-data')
def generate_graph_data():
    # 复用上述graph1定义
    fig = gv.d3(graph1, ...)
    graph_data = fig.to_dict()
    return jsonify(graph_data)

步骤2：Angular集成D3渲染

安装D3后，自定义渲染逻辑：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as d3 from 'd3';

@Component({
  selector: 'app-d3-graph',
  template: `<div #graphContainer style="width: 100%; height: 600px;"></div>`,
})
export class D3GraphComponent implements OnInit {
  @ViewChild('graphContainer') graphContainer!: ElementRef;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<any>('http://localhost:5000/generate-graph-data').subscribe(graphData => {
      this.renderGraph(graphData);
    });
  }

  private renderGraph(graphData: any): void {
    const container = this.graphContainer.nativeElement;
    const svg = d3.select(container)
      .append('svg')
      .attr('width', '100%')
      .attr('height', '100%')
      .style('background-color', graphData.graph.metadata.background_color);

    // 参考Gravis的D3渲染逻辑，实现节点、边的绘制与交互
    // 可直接复用Gravis开源代码中的D3渲染部分
  }
}

方案三：FastAPI替代Flask（更适配API场景） #

若偏好现代异步框架，用FastAPI实现后端接口，逻辑与Flask一致，仅接口定义不同：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
import gravis as gv

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:4200"],  # 生产环境替换为Angular域名
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/generate-graph")
async def generate_graph():
    # 复用上述graph1与Gravis处理逻辑
    fig = gv.d3(graph1, ...)
    return {"html": fig.export_html()}

避坑提示 #

• 跨域问题：后端必须配置CORS，允许Angular域名的请求，否则会被浏览器拦截
• PyScript局限性：Gravis依赖的底层库无法在浏览器环境稳定运行，后端方案更可靠
• Django集成：用Django REST Framework编写API视图，返回HTML或数据，Angular调用方式与Flask/FastAPI完全一致

内容的提问来源于stack exchange，提问作者ludwigf235