GoJS绘制图表一般分为三步:第一步、定义画布;第二步、定义节点;第三步、定义连线。
如上图所示,如果在节点中我们要绘制一个含有表格的图表,那么这个表格该怎么绘制呢
思路如下:
分成两个部分,第一个部分是蓝色背景的表名部分,第二部分是白色背景的字段部分。
(1)在Diagram的node中定义一个主面板,再在主面板中定义一个table,然后定义table的第一行TableRow为第一部分。
this.myDiagram.nodeTemplate =
$(go.Node, 'Auto',
{ locationSpot: go.Spot.Center, fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides },
// 创建一个画板并设置画板的背景色
$(go.Panel, 'Auto', { margin: 0, background: '#fff' },
// 定义画板的样式
$(go.Shape, 'Rectangle',
{
fill: '#fff',
stroke: '#33A7EB', // node边框
strokeWidth: 3
}
),
// 表头样式
$(go.Panel, 'Table',
{ background: '#ffffff' },
$(go.Panel, 'TableRow', { background: '#E6F7FF' },
// header
$(go.Picture,
// Pictures 应该指定宽高.
// 当没有图片时显示红色的背景
// 或者当图片为透明的时候也是.
{ margin: 8, width: 20, height: 20, alignment: go.Spot.Left },
// Picture.source参数值与模型数据中的"source"字段绑定
new go.Binding('source')),
$(go.TextBlock,
{
alignment: go.Spot.Left,
margin: new go.Margin(10, 8, 10, 30),
font: '11pt sans-serif', // 表头字体样式调整
isMultiline: false,
editable: false
},
new go.Binding('text', 'name').makeTwoWay())
),
// properties
$(go.TextBlock, 'Properties',
{
font: 'italic 10pt sans-serif'
},
new go.Binding('visible', 'visible', function(v) {
return !v
}).ofObject('PROPERTIES')
),
$(go.Panel, 'Table', { name: 'PROPERTIES' },
new go.Binding('itemArray', 'properties'),
{
row: 1,
defaultAlignment: go.Spot.Left, padding: new go.Margin(0, 8, 0, 8), background: '#ffffff',
itemTemplate: propertyTemplate
}
)
)
)
)
(2)再定义一个TableRow为第二部分。如图,字段中文名和英文名居左,而字段类型与约束条件居右,所以在这里,又给TableRow分成两列,每列放一个水平的面板,第一列显示字段中文名和英文名且居左,第二列显示字段类型与约束条件且居右。
var propertyTemplate =
$(go.Panel, 'TableRow',
$(go.Panel, 'Horizontal',
{ row: 1, column: 1, alignment: go.Spot.Left, margin: new go.Margin(0, 20, 0, 0) },
$(go.TextBlock,
{ isMultiline: false, editable: false },
new go.Binding('text', 'fieldName').makeTwoWay(),
// 字段是否显示高亮
new go.Binding('stroke', 'isHighlighted', function(h) { return h ? '#f00' : '#333' })
),
$(go.TextBlock,
{ isMultiline: false, editable: false, stroke: '#333', row: 1 },
new go.Binding('text', 'fieldCineseName').makeTwoWay()
)
),
$(go.Panel, 'Horizontal', { row: 1, column: 2, alignment: go.Spot.Right, margin: 4 },
$(go.TextBlock,
{ isMultiline: false, editable: false, stroke: '#333', row: 1 },
new go.Binding('text', 'type').makeTwoWay()
),
$(go.TextBlock,
{ isMultiline: false, editable: false, stroke: '#333', row: 1 },
new go.Binding('text', 'length').makeTwoWay()
)
),
$(go.TextBlock,
{
isMultiline: false, editable: false, stroke: '#333', row: 1,
margin: 4, textAlign: 'end', column: 4, alignment: go.Spot.Right
},
new go.Binding('text', 'notNull').makeTwoWay()
)
)
接下来,我们说下连线,如上图所示,这里的连线上的文字是用一个蓝色框框起来的。
思路如下:
首先,在Diagram中定义Link,然后设置线的样式,最后定义一个面板来控制文本框。
this.myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 0 },
new go.Binding('isLayoutPositioned', 'relationship', this.convertIsTreeLink),
$(go.Shape, { strokeWidth: 1, stroke: '#33A7EB', margin: 10 }), // 线的宽度和笔画的颜色
$(go.Shape, new go.Binding('fromArrow', 'relationship', this.convertFromArrow)),
$(go.Shape,
{ toArrow: 'standard', stroke: '#33A7EB', fill: '#33A7EB' },
new go.Binding('toArrow', 'relationship', this.convertToArrow)),
$(go.Panel, 'Auto',
$(go.Shape,
'Rectangle',
{
fill: '#33A7EB',
stroke: null,
height: 32
}),
$(go.TextBlock, 'transition',
{
row: 1,
margin: 10,
textAlign: 'center',
font: '10pt helvetica, arial, sans-serif',
editable: false,
stroke: '#fff'
},
// editing the text automatically updates the model data
new go.Binding('text').makeTwoWay())
)
)
最后,节点画好了,线了画好了,那就是添加数据了。
var name1 = [{key: "a1",
name: "h_ds_trigger_check",
properties: [{fieldName: "id"}],
source: "/static/img/table.png"},
{key: "a2",
name: "h_ds_trigger_check",
properties: [{fieldName: "id"}],
source: "/static/img/table.png"}]
var name2 = [{from: "a1",
relationship: "generalization",
text: "h_task_triggers_ibfk_1",
to: "a2"}]
var $ = go.GraphObject.make
// load an initial diagram from some JSON text
if (_this.myDiagram !== '') {
_this.myDiagram.model = $(go.GraphLinksModel,
{
copiesArrays: true,
copiesArrayObjects: true,
nodeDataArray: name1,
linkDataArray: name2
})
_this.searchDiagram()
}