最近项目中需要可视化编辑树形图表,无意发现GoJs这个功能强大的利器,此处,从具体应用到方法细节做一个记录和分享
1.应用篇
业务场景:
- 根据业务描述,需要一个类似IVR的问答系统
- 根据不同答案跳转到不同题目;
- 一个问题有多个答案,每个答案跳转下一个新问题,问题不可重复
- 后台可以可视化配置并修改每一题,题目内的答案,答案的跳转
html部分:
`<body onload="init()">
<div id="qOrderView" width:100%; height:500px"></div>
</body>`
- 确定图表绘制作用于body节点上,给body绑定初始化事件;
- 绘制图表需要一个DOM作为容器,并指定id来绑定js;
JS部分(代码不易拆分,备注写在代码注释中):
function init() {
var $ = go.GraphObject.make;//构建GoJs绘制图表的基类
myDiagram =
$(go.Diagram, "qOrderView",//Dom容器的Id
{ initialContentAlignment: go.Spot.Center,//控制图表内容的