根据条件更改 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 获得了条件中的状态值。在我的代码中，形状颜色填充将保持 white/null（我真的不明白是哪一个），而描边效果很好。我试过 console.log(fill1)，它显示了 colors[] 值。但我不明白为什么形状颜色不会改变形状。拜托，谁能解释为什么会发生这种情况以及如何获得我想要的输出？我是新来的，非常感谢您的帮助。谢谢

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"。其他两个节点是粉红色的，因为这是默认颜色

根据条件更改 goShapes 填充颜色

Changing goShapes fill colors based on condition

css

gojs