1.0.1 • Published 6 years ago
flowchartjs v1.0.1
flowchartjs
A Simple FlowChart Libary Base On JsPlumb
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run dll
For a detailed explanation on how things work, check out the guide and docs for vue-loader.
Import Libary
import Chart from './lib/js/flowchartjs'
You can replace your favorite style by modifying the flowchart.css file.
@import './lib/css/flowchart.css'
How To Use
Usage in vue:
created() {
// Initial
Chart.ready(() => {
// Create Chart
this.chart = new Chart(this.$refs['flow-container'], {
// Defines a custom event that is fired when a node is clicked
onNodeClick(data) {
console.log(data);
}
})
})
}
methods: {
/** Add Chart Node
* @augments
* @param name Node Name
* @param nodeType The Type of Node[0:'Start Node', 1:'Process Node', 2:'End Node']
*/
addNode(name, nodeType = 1) {
if (this.chart) {
this.nodes.push(name)
// Add Node
this.chart.addNode(name, 250, 10, {
class: 'node', // Custom node style
data: { // Node binding data, can be obtained in the click event
name
},
nodeType, // Node Type
id: 'node-1' // Node Id
})
}
},
/**
* Save Chart Config To Json String
*/
saveChart() {
if (this.chart) {
this.chartConfig = this.chart.toJson()
this.$message.success('The FlowChart Save Success!')
} else {
this.$message.error('The FlowChart Has Not Be Initiald')
}
},
/**
* Load Chart From Json String
*/
loadChart() {
if (this.chart) {
this.chart.clear()
this.chart.fromJson(this.chartConfig)
this.$message.success('The FlowChart Load Success!');
} else {
this.$message.error('The FlowChart Has Not Be Initiald')
}
},
/**
* Clear Chart
*/
clearChart() {
if (this.chart) {
this.chart.clear()
this.$message.success('The FlowChart Remove Success!');
} else {
this.$message.error('The FlowChart Has Not Be Initiald')
}
}
}
For a detailed explanation on how things work, check out the guide and docs for jsPlumb.