flow-chart

KO | EN

gitlite — search

#typescript #machine-learning #rust #deep-learning #linux #docker #java #windows #cli #security #pytorch #ios #mcp #openai

(★ 164)

流程图工具

flow-chart 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# flow-chart
流程图工具

Demo演示：[https://lkiarest.github.io/flow-chart/demo/demo.html](https://lkiarest.github.io/flow-chart/demo/demo.html)

基于 jsplumb 封装一个使用十分简单的流程图处理类。

样式使用less处理

### 引入依赖文件
```
<link rel="stylesheet" type="text/css" href="../chart.css">
<script src="../libs/jquery.min.js"></script>
<script src="../libs/jsPlumb.min.js"></script>
<script src='../chart.js'></script>
```

### 常用操作
```
Chart.ready(() => { // 初始化
    // 创建画布
    let chart = new Chart($('#div1'), {
        onNodeClick (data) { // 点击节点时触发的事件
            console.log(data);
        }
    });

// 添加节点
    let nodeStart = chart.addNode('开始', basicX, startY, {
        class: 'node-start', // 自定义节点样式
        data: { // 节点绑定数据，在click事件中可以获取
            name: '开始',
            nodeType: 0
        }
    });
    // 添加端口
    nodeStart.addPort({
        isSource: true
    });

// 获取所有节点
    console.log(chart.getNodes());

// 序列化用以保存
    console.log(JSON.stringify(chart.toJson()));

// 删除节点 - 1
    nodeStart.dispose();
    // 删除节点 - 2
    chart.removeNode(nodeStart.getId());
});
```

flow-chart

flow-chart 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

flow-chart

flow-chart 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README