Question

我正在寻找图表Javascript库来为我的角度项目创建某种顶级动态框图。任何人都可以告诉我，如果mermaid与Angular 4兼容吗？如果有任何其他好的图表库可以使用，请告诉我。谢谢！

Answer 1

它非常容易使用。

将美人鱼添加到您的项目中：npm i mermaid
在视图中，您要使用美人鱼，导入美人鱼并调用init方法

示例：

import { Component, OnInit } from "@angular/core";
import * as mermaid from "mermaid";

@Component({
    selector: "MermaidTest",
    template: `
        <div class="mermaid">
            graph LR
            A-->B
        </div>`
})
export class MermaidTest implements OnInit {    

    public ngOnInit(): void {
        mermaid.initialize({
            theme: "forest"
        });
    }
}

在这种情况下，你必须转义像{。如果您碰巧将图形内容作为字符串，则可以改为使用mermaidAPI：

import { AfterContentInit, Component, ViewChild } from "@angular/core";
import * as mermaid from "mermaid";

@Component({
    selector: "MermaidTest",
    template: `<div #mermaid></div>`
})
export class MermaidTestimplements AfterContentInit {

    @ViewChild("mermaid")
    public mermaidDiv;

    public ngAfterContentInit(): void {
        mermaid.initialize({
            theme: "dark"
        });

        const element: any = this.mermaidDiv.nativeElement;
        const graphDefinition = "graph TB\na-->b";
        mermaid.render("graphDiv", graphDefinition, (svgCode, bindFunctions) => {
            element.innerHTML = svgCode;
        });
    }
}

有关详细信息，请参阅https://mermaidjs.github.io/mermaidAPI.html

Answer 2

不能说美人鱼，但建议你试试ngx-charts https://swimlane.gitbooks.io/ngx-charts/content/它确实支持Angular

Answer 3

尝试也基于d3的ngx-graph，类似于ngx-chart，但专注于图，尤其是DAG https://github.com/swimlane/ngx-graph

Angular 4与Mermaid js兼容？

3 个答案: