vue 에 서 는 gojs/jointjs 의 예제 코드 를 사용 합 니 다.
검색 상자 에'전단 프로 세 스 플러그 인'을 입력 하고 많은 자 료 를 찾 았 습 니 다.다음 과 같은 몇 가지 가 있 습 니 다.
flow-chart
코드 작성 이 번 거 로 워 서 json 만 해결 할 수 있 는 것 이 아니 라 효과 도 비교적 못 생 겼 습 니 다.PASS
darge-d3
github : https://github.com/dagrejs/dagre-d3
효과 도
안에 있 는 demo 를 다운로드 하고 제 이 슨 을 고치 면 됩 니 다.
// States
var states = [ "NEW", "SUBMITTED","FINISHED" ,"FAILED","DELIVER",
"CANCELED", "ABOLISHED" , "DELETED","REFUNDING","REFUNDED"];
var map = [' ',' ',' ',' '," ",
' ',' ',' ',' '," "]
// Automatically label each of the nodes
states.forEach(function(state,index) { g.setNode(state, { label: `${map[index]}(${state})`})});
// Set up the edges
g.setEdge("NEW", "FAILED", { label: " "});
g.setEdge("NEW", "SUBMITTED", { label: " " });
g.setEdge("NEW", "CANCELED", { label: " " });
g.setEdge("SUBMITTED","CANCELED", { label: " " });
g.setEdge("SUBMITTED", "ABOLISHED", { label: " 48 ，
"});
g.setEdge("ABOLISHED","DELETED", { label: " " });
g.setEdge("CANCELED", "DELETED", { label: " "});
g.setEdge("FAILED", "SUBMITTED", { label: " " });
g.setEdge("SUBMITTED", "DELIVER", { label: " " });
g.setEdge("FINISHED", "REFUNDING", { label: " " });
g.setEdge("DELIVER", "FINISHED", { label: " " });
g.setEdge("REFUNDING", "REFUNDED", { label: " " });
g.setEdge("REFUNDED", "DELETED", { label: " " });
g.setEdge("DELIVER", "REFUNDING", { label: " " });
g.setEdge("FAILED", "CANCELED", { label: " " });gojs
GoJS 는 상호작용 도표(예 를 들 어 흐름 도,트 리 도,관계 도,힘 전도 도 등)를 실현 하 는 JS 라 이브 러 리 이다.본 고 는 GoJs 의 에센스 부분 을 소개 할 것 이다.
GoJS 는 HTML 5 에 의존 하기 때문에 브 라 우 저 버 전이 HTML 5 를 지원 하 는 지 확인 하 십시오.물론 이 라 이브 러 리 를 불 러 와 야 합 니 다.
github : https://github.com/NorthwoodsSoftware/GoJS
npm install gojs -save 을 통 해 설치 가능효과 도
안에 있 는 데 모 를 보고 제 가 포장 을 했 어 요.
<template>
<div>
<p style="background-color:#d5d5d5;margin:0;padding:5px;">
<span class="tip"> </span>
<span class="tip"> </span>
<el-button type="text" v-if="show===false" @click="show=true"> </el-button>
<el-button type="text" v-else @click="show=false"> </el-button>
</p>
<div id="myDiagramDiv" v-show="show" ></div>
</div>
</template>
<style scoped>
.tip{
color:red;
font-size:0.8em;
font-weight:bold;
padding:5px;
}
#myDiagramDiv{
height: 200px;
border: solid 1px #d3d3d3;
}
</style>
<script>
window.go =require('./go.js')
var $ = go.GraphObject.make;
import datam from './data';
export default{
mixins:[datam],
data(){
return{
myDiagram:null,
show:true
}
},
mounted(){
this.load();
},
methods:{
load(){
this.init();
this.addNodeTemplate(this.User);
this.addNodeTemplate(this.Supplier);
this.layout();
},
layout() {
this.myDiagram.model = go.Model.fromJson(this.myjson);
this.myDiagram.layoutDiagram(true);
},
getOption(){
// for conciseness in defining templates
let options={
yellowgrad : $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }),
greengrad : $(go.Brush, "Linear", { 0: "#98FB98", 1: "#9ACD32" }),
bluegrad : $(go.Brush, "Linear", { 0: "#B0E0E6", 1: "#87CEEB" }),
redgrad : $(go.Brush, "Linear", { 0: "#C45245", 1: "#871E1B" }),
whitegrad : $(go.Brush, "Linear", { 0: "#F0F8FF", 1: "#E6E6FA" }),
bigfont : "bold 8pt Helvetica, Arial, sans-serif",
smallfont : "bold 6pt Helvetica, Arial, sans-serif",
}
return options;
},
textStyle(){
return {
margin: 6,
wrap: go.TextBlock.WrapFit,
textAlign: "center",
editable: true,
font: this.getOption()['bigfont']
}
},
init(){
this.myDiagram =
$(go.Diagram, "myDiagramDiv",
{
isReadOnly: true,
// have mouse wheel events zoom in and out instead of scroll up and down
"toolManager.mouseWheelBehavior": go.ToolManager.WheelNone,
initialAutoScale: go.Diagram.Uniform,
"linkingTool.direction": go.LinkingTool.ForwardsOnly,
initialContentAlignment: go.Spot.Center,
layout: $(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 50 }),
"undoManager.isEnabled": true
});
//
this.myDiagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// define the node's outer shape, which will surround the TextBlock
$(go.Shape, "Rectangle",
{ fill: this.getOption()['yellowgrad'], stroke: "black",
portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer",
toEndSegmentLength: 50, fromEndSegmentLength: 40 }),
$(go.TextBlock, "Page",
{ margin: 6,
font: this.getOption()['bigfont'],
editable: true },
new go.Binding("text", "text").makeTwoWay()));
// replace the default Link template in the linkTemplateMap
this.myDiagram.linkTemplate =
$(go.Link, // the whole link panel
new go.Binding("points").makeTwoWay(),
{ curve: go.Link.Bezier, toShortLength: 15 },
new go.Binding("curviness", "curviness"),
$(go.Shape, // the link shape
{ stroke: "#2F4F4F", strokeWidth: 2.5 }),
$(go.Shape, // the arrowhead
{ toArrow: "kite", fill: "#2F4F4F", stroke: null, scale: 2 })
);
},
/**
* options:{
* category
* shape:RoundedRectangle/Rectangle
* shapeOptions:{
* fill:bluegrad/greengrad/yellowgrad/null/redgrad/whitegrad
* stroke: "black",
* portId:""
* fromLinkable:true
* toLinkable:
* cursor:"pointer"
* fromEndSegmentLength:40
* toEndSegmentLength
* strokeWidth
*
* }
* textStyle:{
* margin: 9,
* maxSize: new go.Size(200, NaN),
* wrap: go.TextBlock.WrapFit,
* editable: true,
* textAlign: "center",
* font: smallfont
* },
*
* }
*/
addNodeTemplate(options){
let fill = this.getOption()[options.shapeOptions.fill];
options.shapeOptions.fill = fill;
this.myDiagram.nodeTemplateMap.add(options.category,
$(go.Node, "Auto",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, options.shape,options.shapeOptions),
$(go.TextBlock, this.textStyle(),
new go.Binding("text", "text").makeTwoWay())
));
},
}
}
</script>
jointjs
Dagre-D3 와 jsPlumb 에 비해 JointJS 의 API 는 상세 하고 코드 양 이 적 으 며 연결선 은 여러 가지 선택 이 있 습 니 다.자주 사용 하 는 모양 을 봉 인 했 고 그 릴 수 있 는 그림 이 많 습 니 다.공식 적 으로 demo 에 참고 할 수 있 습 니 다.
github : https://github.com/clientIO/joint
효과 도
npm install jointjs -save 을 통 해 설치 가능많은 demo 와 문 서 를 참조 하여 직사각형 을 사 용 했 지만 원 각 의 도 수 를 타원형 으로 설정 할 수 있어 서 다른 모양 은 힘 이 없어 요.
사각형 스타일 과 사각형 상자 안의 텍스트 스타일 을 사용자 정의 할 수 있 습 니 다.
//data.vue
<script>
export default {
data(){
var userClass = {// SVG
/**shapeStyle
* fill:
stroke:
strokeWidth:
rx:
ry:
*/
shapeStyle:{//
fill:{
type: 'linearGradient',
stops: [
{offset: '0%', color: '#98FB98'},
{offset: '100%', color: '#9ACD32'}
],
},
rx:150,
ry:15
},
/**
* textStyle
* fontWeight
* fontSize
*
*/
textStyle:{//
fontWeight:'bold'
}
};
return{
graphData :{
node:{
'100':{text:' ',category:userClass},
'101':{text:' ',category:userClass},
'102':{text:' ',category:userClass},
'103':{text:' ',category:userClass},
'200':{text:' '},
'201':{text:' '},
'202':{text:' '},
'203':{text:' '},
'300':{text:' '}
},
edge :{//
'100': ['200','201','103'],
'101': ['201'],
'102':[],
'103': ['100'],
'200': ['101'],
'201': ['202','300'],
'202': ['102'],
'203': ['102'],
'300': ['203'],
},
}
}
}
}
</script>
<template>
<div id="container">
<p style="background-color:#EEEEEE;margin:0;padding:5px;font-size:0.9em">
<span class="tip"> </span>
<span class="tip"> </span>
<el-button type="text" v-if="show===false" @click="show=true"> </el-button>
<el-button type="text" v-else @click="show=false"> </el-button>
</p>
<div id="myholder" v-show="show"></div>
</div>
</template>
<script>
window.joint=require('jointjs');
var Shape = joint.dia.Element.define('default.Rectangle', {
attrs: {
rect: {
refWidth: '100%',
refHeight: '100%',
//
fill:{
type: 'linearGradient',
stops: [
{offset: '0%', color: '#B0E0E6'},//
{offset: '100%', color: '#F0F8FF'}//
]
},
stroke: '#B0E0E6',
strokeWidth: 1,
rx: 5,//
ry: 5
},
text: {
refX: '50%',
refY: '50%',
textVerticalAnchor: 'middle',
textAnchor: 'middle',
fontSize: 10
}
}
},
{
markup: '<rect/><text/>',
setText: function(text) {
return this.attr('text/text', text || '');
},
setShapeStyle:function(shapeStyle){
let newstyle = Object.assign({},this.attr('rect'),shapeStyle);
return this.attr('rect',newstyle)
},
setTextStyle:function(textStyle){
let newstyle = Object.assign({},this.attr('text'),textStyle);
return this.attr('text',newstyle)
}
}
);
var Link = joint.dia.Link.define('default.Link', {
attrs: {
'.connection': {
stroke: '#2F4F4F',//
strokeWidth: 1,
pointerEvents: 'none',
targetMarker: {//
type: 'path',
fill: '#2F4F4F',//
stroke: '#2F4F4F',//
strokeWidth:'1',
d: 'M 2 -2 0 0 2 2 z'//
}
}
},
connector: {
name: 'rounded'
},
z: -1,
weight: 1,
minLen: 1,
labelPosition: 'c',
labelOffset: 10,
labelSize: {
width: 50,
height: 30
},
labels: [{
markup: '<rect/><text/>',
attrs: {
text: {
fill: 'gray',
textAnchor: 'middle',
refY: 5,
refY2: '-50%',
fontSize: 10,
cursor: 'pointer'
},
// rect: {
// fill: 'lightgray',
// stroke: 'gray',
// strokeWidth: 2,
// refWidth: '100%',
// refHeight: '100%',
// refX: '-50%',
// refY: '-50%',
// rx: 5,
// ry: 5
// }
},
size: {
width: 50, height: 10
}
}]
}, {
markup: '<path class="connection"/><g class="labels"/>',
connect: function(sourceId, targetId) {
return this.set({
source: { id: sourceId },
target: { id: targetId }
});
},
setLabelText: function(text) {
return this.prop('labels/0/attrs/text/text', text || '');
}
});
var ElementView = joint.dia.ElementView.extend({
pointerdown: function () {
// this._click = true;
// joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
},
pointermove: function(evt, x, y) {
// this._click = false;
// joint.dia.ElementView.prototype.pointermove.apply(this, arguments);
},
pointerup: function (evt, x, y) {
// if (this._click) {
// // triggers an event on the paper and the element itself
// this.notify('cell:click', evt, x, y);
// } else {
// joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
// }
}
});
var LinkView = joint.dia.LinkView.extend({
addVertex: function(evt, x, y) {},
removeVertex: function(endType) {},
pointerdown:function(evt, x, y) {}
});
export default {
data(){
return{
graph:null,
paper:null,
show:true
}
},
props:{
graphData:{
type:Object,
required:true
}
},
mounted(){
let w = document.getElementById('container').width ;
this.graph = new joint.dia.Graph;
this.paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
width: w,
height: 250,
model: this.graph,
elementView: ElementView,//
linkView:LinkView//
});
this.layout();
},
methods:{
getWidthandHeight(label){
let maxLineLength = _.max(label.split('
'), function(l) { return l.length; }).length,
// Compute width/height of the rectangle based on the number
// of lines in the label and the letter size. 0.6 * letterSize is
// an approximation of the monospace font letter width.
letterSize = 8,
width = 2 * (letterSize * (0.6 * maxLineLength + 1)),
height = 2 * ((label.split('
').length + 1) * letterSize);
return {width,height}
},
getLayoutOptions() {
return {
// setVertices: false,
// setLabels: false,
// ranker:'longer-path',//'tight-tree'/'network-simplex',
rankDir: 'LR',
align: 'UR',
rankSep:0,
edgeSep:0,
nodeSep:0,
};
},
buildGraphFromAdjacencyList(adjacencyList) {
let elements = [],links = [],obj,size,node;
const _this=this;
const map=this.graphData.node;
Object.keys(adjacencyList).forEach(function(parentId) {
// Add element
obj =map[parentId];
size = _this.getWidthandHeight(obj.text);
node =new Shape({id:parentId,size:size}).setText(obj.text);
if(obj.category&&obj.category.shapeStyle){
node = node.setShapeStyle(obj.category.shapeStyle);
}
if(obj.category&&obj.category.textStyle){
node = node.setTextStyle(obj.category.textStyle);
}
elements.push(node);
// Add links
adjacencyList[parentId].forEach(function(childId) {
links.push(
new Link().connect(parentId, childId)// .setLabelText(parentLabel + '-' + childLabel)
);
});
});
return elements.concat(links);
},
layout() {
let cells = this.buildGraphFromAdjacencyList(this.graphData.edge);
this.graph.resetCells(cells);
joint.layout.DirectedGraph.layout(this.graph, this.getLayoutOptions());
},
}
}
</script>
<style>
#myholder {
border: 1px solid lightgray;
margin-bottom:20px;
padding-left:20px
}
.tip{
color:#9ACD32;
font-size:0.9em;
font-weight:bold;
padding:5px;
}
</style>
이것 은 현재 로 서 는 그래도 만족 하 는 편 이다.
jsplumb
이것 은 홈 페이지 를 보 았 습 니 다.그다지 우호 적 이지 않 습 니 다.그리고 js 파일 만 다운로드 하고 demo 코드 가 없어 서 어떻게 해 야 할 지 모 르 겠 습 니 다.
참고 자료:
https://gojs.net/latest/samples/pageFlow.html
http://www.daviddurman.com/assets/autolayout.js
http://resources.jointjs.com/demos/layout
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
