运用TextBlocks类来显现文本.

字体和色彩

大小和文本的表面作风被指定TextBlock.font。值可所以任何CSS字体符串。
文本色彩运用TextBlock.stroke。值可所以任何的CSS色彩字符串。默许状况下，色彩为“黑”。
您也能够指定背景：GraphObject.background。默许为无色彩，这会致使一个通明背景。背景老是矩形。
这些简朴的演示，创建了文本块，并将其添加到图中

    diagram.add(G(
    go.Part,
    'Horizontal',
    G(
        go.TextBlock,
        {
            text: '文本块'
        }
    ),
    G(
        go.TextBlock,
        {
            text: '文本块色彩',
            stroke: '#492'
        }
    ),
    G(
        go.TextBlock,
        {
            text: '文本块背景',
            background: '#492'
        }
    ),
    G(
        go.TextBlock,
        {
            text: '文本块字体',
            font: 'bold 22px serif'
        }
    )
));

宽度和高度

TextBlock只是显现文本字符串指定的字体。但是TextBlock的现实尺寸可所以任一尺寸，尺寸过大增添无文本地区; 尺寸太小发作文本的剪裁。
为了证实这一点，下面例子中的TextBlock，都具有明白的宽高。为了更好地展示下面的TextBlocks的现实大小，我们已给了他们浅绿背景。

diagram.add(G(
    go.Part,
    'Horizontal',
    G(
        go.TextBlock,
        {
            text: '文本块宽度和高度',
            background: '#492',
            margin: 5
        }
    ),
    G(
        go.TextBlock,
        {
            text: '文本块宽度和高度',
            background: '#492',
            margin: 5,
            width: 100,
            height: 30
        }
    ),
    G(
        go.TextBlock,
        {
            text: '文本块宽度和高度',
            background: '#492',
            margin: 5,
            width: 60,
            height: 30
        }
    ),
    G(
        go.TextBlock,
        {
            text: '文本块宽度和高度',
            background: '#492',
            margin: 5,
            width: 60,
            height: 20
        }
    ),
    G(
        go.TextBlock,
        {
            text: '文本块宽度和高度',
            background: '#492',
            margin: 5,
            width: 60,
            height: 10
        }
    )
));

换行

文本也能够经由过程自动换到其他行。为了换行的状况发作，TextBlock.wrap属性不能为无，必须有一些限定宽窄

diagram.add(G(
    go.Part,
    'Horizontal',
    G(
        go.TextBlock,
        {
            text: '文本块默许',
            background: '#492',
            margin: 1,
            width:40
        }
    ),
    G(
        go.TextBlock,
        {
            text: '文本块不换行剪裁',
            background: '#492',
            margin: 1,
            width:75,
            wrap: go.TextBlock.None
        }
    ),
    G(
        go.TextBlock,
        {
            text: '文本块换行  Wrap',
            background: '#492',
            margin: 1,
            width:75,
            wrap: go.TextBlock.WrapDesiredSize
        }
    ),
    G(
        go.TextBlock,
        {
            text: '文本块清算边距  Wrap',
            background: '#492',
            margin: 1,
            width:120,
            wrap: go.TextBlock.WrapFit
        }
    )
));

对齐体式格局

TextBlock.textAlign属性指定的尺寸内绘制笔墨点分列体式格局。
这比差别GraphObject.alignment属性，它控制在那里安排由父级分派地区。

diagram.add(G(
    go.Part,
    'Horizontal',
    G(
        go.Panel,
        'Vertical',
        {
            width: 150,
            defaultStretch: go.GraphObject.Horizontal
        },
        G(
            go.TextBlock,
            {
                text: '左对齐',
                background: '#492',
                textAlign: 'left',
                margin: 2
            }
        ),
        G(
            go.TextBlock,
            {
                text: '居中',
                background: '#492',
                textAlign: 'center',
                margin: 2
            }
        ),
        G(
            go.TextBlock,
            {
                text: '右对齐',
                background: '#492',
                textAlign: 'right',
                margin: 2
            }
        )
    ),
    G(
        go.Panel,
        'Vertical',
        {
            width: 150,
            defaultStretch: go.GraphObject.None
        },
        G(
            go.TextBlock,
            {
                text: '左对齐',
                background: '#492',
                alignment: go.Spot.Left,
                margin: 2
            }
        ),
        G(
            go.TextBlock,
            {
                text: '居中',
                background: '#492',
                alignment: go.Spot.Center,
                margin: 2
            }
        ),
        G(
            go.TextBlock,
            {
                text: '右对齐',
                background: '#492',
                alignment: go.Spot.Right,
                margin: 2
            }
        )
    )
));

编辑

GoJS也支撑由用户当场编辑笔墨。你只需要在设置TextBlock.editable属性设置为true。
假如你愿望供应用户的输入文本考证，能够设置TextBlock.textValidation属性的功用。您也能够供应经由过程设置越发个性化的或庞杂的文本编辑器TextBlock.textEditor属性。注：考证稍后完美。

diagram.add(G(
    go.Part,
    'Vertical',
    G(
        go.TextBlock,
        {
            text: '选中后，单击编辑，不可换行',
            background: '#492',
            margin: 5,
            editable: true,
            isMultiline: false
        }
    ),
    G(
        go.TextBlock,
        {
            text: '许可嵌入换行',
            background: '#492',
            margin: 5,
            editable: true
        }
    )
));