How do I create the ruler template as in the picture.
I’m waiting for your help
I used the Graduated template but it seems difficult to create the design with this template
Have you read GoJS Graduated Panels -- Northwoods Software ?
If you want the ruler to be in the diagram, have you seen Diagram with Rulers ?
If you want the rulers to be outside of the diagram, you probably have not seen Basic Day/Hour Infinite Timeline
I looked at these examples, but I did not get any results.
Do you have the opportunity to create a template similar to the template in the image? Can you provide support in this regard?
Are you looking to put those rulers in the main diagram or outside of it?
If you could show what you have done to set up those rulers, perhaps I can help.
The result is this :(
$(go.Part, "Graduated",
{ graduatedTickUnit: 10, pickable: false, layerName: "Grid", isAnimated: false },
$(go.Shape, { geometryString: "M0 0 V400" }),
$(go.Shape, { geometryString: "M0 0 V3", interval: 1, alignmentFocus: go.Spot.Bottom }),
$(go.Shape, { geometryString: "M0 0 V15", interval: 5, alignmentFocus: go.Spot.Bottom }),
$(go.TextBlock,
{
font: "10px sans-serif",
segmentOrientation: go.Link.OrientOpposite,
interval: 5,
alignmentFocus: go.Spot.BottomLeft,
segmentOffset: new go.Point(0, -7)
}
)
);Hey – your screenshot shows a horizontal panel but your code draws a vertical one.
Anyway, I’ll assume you want a ruler within the diagram. Adding this to the minimal.html sample:
myDiagram.add(
$(go.Part, "Graduated",
{
location: new go.Point(0, -10), locationSpot: go.Spot.BottomLeft,
layerName: "Grid", // behind everything, and not pickable nor selectable
graduatedMin: 0, graduatedMax: 1000, graduatedTickUnit: 10
},
$(go.Shape, { geometryString: "M0 0 H1000 M0 -35 H1000", stroke: "gray" }),
$(go.Shape, { geometryString: "M0 0 V10", stroke: "gray", interval: 1,
alignmentFocus: go.Spot.Bottom, graduatedEnd: 0.5 }),
$(go.Shape, { geometryString: "M0 0 V35", stroke: "gray", interval: 5,
alignmentFocus: go.Spot.Bottom, graduatedEnd: 0.5 }),
$(go.TextBlock,
{
interval: 5,
alignmentFocus: go.Spot.BottomLeft,
segmentOffset: new go.Point(2, -17),
stroke: "gray",
graduatedEnd: 0.4999
}
)
)
);
produces:
1 Like