GoJs的每个节点设置不同的背景色和前景色

先放效果图

 

 

 代码：

function init(set, data) {
        var $ = go.GraphObject.make;  // for conciseness in defining templates
        myDiagram = $(go.Diagram, "goJs_container",  // create a Diagram for the DIV HTML element
            {
                "undoManager.isEnabled": true,  // enable undo & redo
                layout: $(go.TreeLayout)
            });

        //新建节点
        myDiagram.nodeTemplate =
            $(go.Node, "Auto",
                $(go.Shape, "RoundedRectangle", { fill: "white" },// Shape.fill is bound to Node.data.color
                    new go.Binding("fill", "bgcolor")), // 设置节点的背景色
                $(go.TextBlock,
                    { margin: 8, font: "bold 15px sans-serif" }, // , stroke: '#ddd' Specify a margin to add some room around the text// TextBlock.text is bound to Node.data.key
                    new go.Binding("text", "key"), new go.Binding("stroke", "color"))  // 设置节点的前景色
            ); // nodeTag
        // 新建线条和箭头
        myDiagram.linkTemplate = $(go.Link,
            $(go.Shape, // the link shape
                { strokeWidth: 2, stroke: 'white' }),
            $(go.Shape, // the arrowhead
                {
                    toArrow: 'OpenTriangle',
                    fill: null, stroke: 'white'
                })
        );
        // 其他设置，图表在画布中居左显示
        myDiagram.initialContentAlignment = go.Spot.Left;
        //通过节点数据和关系数组完成关系图。
        myDiagram.model = new go.GraphLinksModel(set, data);        
    }

设置节点的背景色代码解析：new go.Binding("fill","bgcolor")  ,将nodeDataArray里面设置的bgcolor属性绑定到“ fill ”属性上；

设置节点的前景色代码解析：new go.Binding("stroke","color")  ,将nodeDataArray里面设置的color属性绑定到“ stroke ”属性上；

关于nodeDataArray数据结构格式（也就是我的代码中的set数组）如下：

set.push(
{ key: '节点1', color: '#ddd', bgcolor: '#4d65a6' },
{ key: '节点2', color: '#333', bgcolor: '#b9b2b6' }
);