After some experiment I found the solution.
The way I took is, make go.Panel that has 2 children, go.Shape and go.TextBlock.
and binding Shape’s width, fill property with manual functions.
(I attach core part of the code)
$(
go.Panel,
"TableRow",
$(go.TextBlock, new go.Binding("text", "name"), {
column: 0,
margin: 2,
font: "bold 10pt sans-serif",
}),
$(go.Panel,
$(go.Shape, "Rectangle",
new go.Binding("width", "prior", (x) => x * 50 ),
new go.Binding("fill", "prior", (x) => { return (x < 0.5) ? "yellow" : "lightgreen" }),
{ height: 15 }),
$(go.TextBlock, new go.Binding("text", "prior")),
{
width: 50,
column: 1,
margin: 2,
}
),
$(go.Panel,
$(go.Shape, "Rectangle",
new go.Binding("width", "posterior", (x) => x * 50 ),
new go.Binding("fill", "posterior", (x) => { return (x < 0.5) ? "yellow" : "lightgreen" }),
{ height: 15 }),
$(go.TextBlock, new go.Binding("text", "posterior")),
{
width: 50,
column: 2,
margin: 2,
}
)
)
The result is following.
Thanks,
Takuya.