Hi,
i’m trying to add a custom fill to a Cylinder but i want to “dinamically” fill it with a percentage property.
For example i have the cylinder and i want that it is filled only by 50%, after 60 etc…
It’s possibile to binding a percentage fill parameter that give to cylinder this behaviour?
Like these?
You can use graduated panels to “fill” a container shape by some amount.
Yep, but i don’t undestrand it’s behaviour if i want to use it with a particular shape.
In particular this is my code:
I want to customize the filling by a percentage binded… I don’t think that the thermometer sample is ok for this problem… or not?
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "Cylinder1",
{ fill: "white", portId: "" },
new go.Binding("fill", "percent", function(p) {
var c = Math.max(0.0, Math.min(p / 100, 0.999));
var b = new go.Brush(go.Brush.Linear);
b.start = go.Spot.Bottom;
b.end = go.Spot.Top;
b.addColorStop(c, "red");
b.addColorStop(c+0.001, "white");
return b;
})),
$(go.TextBlock,
{ margin: 8 },
new go.Binding("text"))
);
and:
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", percent: 50 },
{ key: 2, text: "Beta", percent: 10 },
{ key: 3, text: "Gamma", percent: 77 },
{ key: 4, text: "Delta", percent: 100 }
]);
produces:
