根据条件更改 goShapes 填充颜色

Question

我正在使用 GoJS，我想根据特定条件为节点内的圆圈着色。如果状态为“将退休”，则圆圈颜色为红色，如果状态为“千禧年”，则圆圈颜色为绿色，否则为白色。我让它看起来像这样

var colors = {
  black: "#000000",
  white: "#ffffff",
  red: "#ff0000",
  green: "#00cc00"
}
var fill1 = null;

if (status == "milenial") {
  fill1 = colors["green"];
} else if (status == "akan pensiun") {
  fill1 = colors["red"];
} else {
  fill1 = colors["white"];
}

在图中，使用 go.shapes 看起来像这样

$(go.Shape, "Circle", {
  row: 0,
  column: 1,
  rowSpan: 4,
  margin: 3,
  fill: fill1,
  stroke: colors["white"],
  strokeWidth: 1,
  width: 25,
  height: 25
 },
new go.Binding("fill", "color")

我通过使用 ajax 获得了条件中的状态值。 在我的代码中，形状颜色填充将保持白色/空（我不太明白是哪一个），而笔画工作正常。我试过 console.log(fill1)，它显示了颜色 [] 值。但我不明白为什么形状颜色不会改变形状。 请，谁能解释为什么会发生这种情况以及如何获得我想要的输出？我是新手，非常感谢您的帮助。谢谢

Answer 1

这里的问题是，虽然您在创建节点fill: fill1 时设置填充，但当您稍后更新fill1 时，基础模型将不会更新，因为它设置为对象值而不是对对象。

在这种情况下，解决方案是使用Binding 创建一个可以在事务中更新的属性，例如

          GO(go.Shape, "Trapezoid1",
            {
              name: "SHAPE",
              angle: 270,
              strokeWidth: 2,
              fill: "pink",
              minSize: new go.Size(50, 50),
            },
            new go.Binding("fill", "status", function(type) {
                switch (type) {
                case "milenial":
                    return "#00cc00";
                case "will retire":
                    return "#ff0000";
                default:
                    return "#ffffff";
            }})              
          );

在这里，我们将"fill" 绑定到"status" 并使用函数将您的逻辑嵌入到节点中。

在代码的其他地方（使用 ajax 的地方）更新 status

function update(key, status) {
    // all model changes should happen in a transaction
    myDiagram.model.commit(function(m) {
        console.log("Finding Node " + key) 
        var data = m.findNodeDataForKey(key);
        m.set(data, "status", status);
    }, "update " + status + " for " + key);
};

update("RASP1","will retire" );
update("RASP2","milenial" );

在此示例中，我的两个节点被标识为RASP1 和RASP1，我将状态分别设置为"will retire" 和"milenial"。其他两个节点是粉红色的，因为这是默认颜色