GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新版

刻度線外觀

刻度線相對于主要形狀路徑的出現由一些屬性控制：

• Shape.graduatedStart / TextBlock.graduatedStart- 沿主筆劃的小數距離，在該筆劃或標簽處開始繪制
• Shape.graduatedEnd / TextBlock.graduatedEnd- 沿主筆觸的小數距離，超出該距離將不會繪制此刻度或標簽
• GraphObject.alignmentFocus- 刻度線或標簽上與計算的路徑點對齊的點，默認為頂部中心
• GraphObject.segmentOffset- 從主筆畫偏移TextBlock標簽的程度-Y值指定距路徑的距離
• GraphObject.segmentOrientation- 如何相對于主筆畫旋轉TextBlock標簽

設置graduatedStart和/或graduatedEnd僅允許沿主筆劃的一部分繪制刻度線：

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V10", graduatedStart: .25, graduatedEnd: .75 })
  ));

在這種情況下，現在僅在主體形狀的中部繪制刻度線。

設置alignmentFocus為go.Spot.Bottom將會使刻度線的底部與主筆劃對齊：

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Bottom })
  ));

設置alignmentFocus為go.Spot.Center將會使刻度線在路徑中居中：

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V10 M0 20 V30", alignmentFocus: go.Spot.Center })
  ));

注意形狀的幾何形狀中的間隙。

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V10" }),
    // offset to display below ticks
    $(go.TextBlock, { segmentOffset: new go.Point(0, 12) })
  ));

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V10" }),
    // change the angle of the text
    $(go.TextBlock, { segmentOrientation: go.Link.OrientMinus90 })
  ));

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Bottom }),
    $(go.TextBlock,
      {
        alignmentFocus: go.Spot.Left,
        segmentOffset: new go.Point(0, -12),
        segmentOrientation: go.Link.OrientMinus90
      }
    )
  ));

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 L285 285" }),
    $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Bottom }),
    $(go.TextBlock,
      {
        alignmentFocus: go.Spot.Left,
        segmentOffset: new go.Point(0, -12),
        segmentOrientation: go.Link.OrientMinus90
      }
    )
  ));

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, "Curve1", { desiredSize: new go.Size(285, 285) }),
    $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Bottom }),
    $(go.TextBlock,
      {
        alignmentFocus: go.Spot.Left,
        segmentOffset: new go.Point(0, -12),
        segmentOrientation: go.Link.OrientMinus90
      }
    )
  ));

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 A120 120 0 0 1 200 0" }),  // an arc
    $(go.Shape, { geometryString: "M0 0 V10" }),
    $(go.TextBlock,
      {
        segmentOffset: new go.Point(0, 12),
        segmentOrientation: go.Link.OrientAlong
      }
    )
  ));

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 A120 120 0 0 1 200 0" }),  // an arc
    $(go.Shape, { geometryString: "M0 0 V10" }),
    $(go.TextBlock,
      {
        segmentOffset: new go.Point(0, 12),
        segmentOrientation: go.Link.OrientAlong
      }
    )
  ));

diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 V-400" }),
    $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Top }),
    $(go.TextBlock,
      {
        alignmentFocus: go.Spot.Left,
        segmentOffset: new go.Point(0, 12)
      }
    )
  ));

請注意幾何圖形如何從0變為0，-400，因為負Y值在屏幕/頁面上更高。請注意，由于所有內容都是相對于路徑的，因此刻度線和標簽將在相反的一側，因此我們還更改了alignmentFocus和segmentOffset以具有與上一個示例相反的值。

  diagram.add(
    $(go.Part, "Spot",
      $(go.Panel, "Graduated",
        $(go.Shape, { geometryString: "M0 0 L100 0 100 100 L0 100" }),
        $(go.Shape, { geometryString: "M0 0 V10" }),
        $(go.TextBlock,
          {
            interval: 5,
            angle: 45,
            segmentOffset: new go.Point(0, 12)
          }
        )
      ),
      $(go.TextBlock, "None")
    ));

  diagram.add(
    $(go.Part, "Spot",
      $(go.Panel, "Graduated",
        $(go.Shape, { geometryString: "M0 0 L100 0 100 100 L0 100" }),
        $(go.Shape, { geometryString: "M0 0 V10" }),
        $(go.TextBlock,
          {
            interval: 5,
            angle: 45,
            segmentOrientation: go.Link.OrientAlong,
            segmentOffset: new go.Point(0, 12)
          }
        )
      ),
      $(go.TextBlock, "Along")
    ));

  diagram.add(
    $(go.Part, "Spot",
      $(go.Panel, "Graduated",
        $(go.Shape, { geometryString: "M0 0 L100 0 100 100 L0 100" }),
        $(go.Shape, { geometryString: "M0 0 V10" }),
        $(go.TextBlock,
          {
            interval: 5,
            angle: 45,
            segmentOrientation: go.Link.OrientUpright,
            segmentOffset: new go.Point(0, 12)
          }
        )
      ),
      $(go.TextBlock, "Upright")
    ));

如果選擇“無”，則標簽始終為45度。使用“沿”時，標簽始終比坡度高45度。使用“立式”時，標簽始終比坡度高45度，然后在必要時旋轉立式。

未完待續......