流程圖控件GoJS教程：如何創建分級面板（一）

---

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

點擊下載GoJS最新版

在“刻度”面板，Panel.Graduated，平定期刻度/文字標簽沿主子圖的行程形狀。刻度面板可以視為顯示一系列值的比例尺。

有關刻度面板的示例，請參見時間線， 溫度計， 儀表規和標尺圖示例。

簡單的分級面板

類似于自動面板和現場面板，漸變面板中應包含兩個或多個元素。元素必須是Shape或TextBlock。可以通過將GraphObject.isPanelMain設置為true 來聲明主要的Shape元素。但是如果它是面板的第一個元素，則無需進行此類設置。除了主要Shape之外，Shape和TextBlocks基本上充當繪制每個刻度線和標簽的模板。

刻度標記形狀秒的刻度面板內應具有測量大小，通過設置一個GraphObject.desiredSize （或width和height屬性），或通過設置其Shape.geometry。對于描繪的常態的主要形狀的路徑基本刻度標記，它是最容易使用的一個簡單的垂直線的幾何形狀字符串：M0 0 V10。幾何圖形的高度將確定刻度線的長度。

diagram.add(
  // all Parts are Panels
  $(go.Part, go.Panel.Graduated,  // or "Graduated"
    $(go.Shape, { geometryString: "M0 0 H400" }),  // the main shape, a horizontal line
    $(go.Shape, { geometryString: "M0 0 V10" })  // a tick mark, a vertical line
  ));

任何形狀（包括自定義幾何形狀）都可以用作漸變面板的主要形狀或刻度線形狀。

diagram.add(
  $(go.Part, "Graduated",
    { background: "transparent" }, // make panel pickable
    // main shape is a whole circle
    $(go.Shape, "Circle",
      { fill: null, desiredSize: new go.Size(150, 150) }),
    // tick shape is a double line
    $(go.Shape, { geometryString: "M0 0 V10 M3 0 V10" })
  ));

 刻度面板也可以用TextBlocks標記，表示沿比例尺的值。通常，它們將使用GraphObject.segmentOffset與主筆畫偏移，就像使用Link標簽時那樣，以便文本不會與主筆畫重疊。有關放置標簽的更多詳細信息，請參見下面的“外觀”部分。

diagram.add(
  $(go.Part, "Graduated",
    { background: "transparent" }, // make panel pickable
    $(go.Shape, { geometryString: "M0 0 H400" }),  // the main shape
    $(go.TextBlock, { segmentOffset: new go.Point(0, 12) })  // tick labels
  ));

分級面板屬性

有許多屬性可以控制刻度線和標簽的外觀。

刻度線值

從主要形狀的筆觸的開始到筆劃的結束，“刻度面板”的刻度值將在線性范圍內變化?？潭染€和標簽的值和頻率由一些屬性控制：

• Panel.graduatedMin-刻度上 的最小值，在主形狀的筆觸開始時
• Panel.graduatedMax-刻度上 的最大值，位于主形狀的末尾
• Panel.graduatedTickBase- “原始”刻度線的值，如果它與刻度相同，則是第一個刻度線
• Panel.graduatedTickUnit- 刻度線位于添加到gradientTickBase的gradientdTickUnit的倍數處
• Shape.interval / TextBlock.interval- 在其上繪制刻度或標簽的gradientTickUnit的倍數

帶刻度的面板可以具有多個形狀作為刻度線，而多個TextBlocks作為標簽，interval屬性控制graduatedTickUnit繪制它們的倍數。在下面的許多示例中，以4的間隔繪制較大的刻度線。有些間隔為5。

graduatedMinof 0，graduatedMaxof 77， graduatedTickBaseof 0，graduatedTickUnitof 2.5和4的間隔可能會顯示為：

diagram.add(
  $(go.Part, "Graduated",
    {
      graduatedMin: 0, graduatedMax: 77,
      graduatedTickBase: 0, graduatedTickUnit: 2.5,
      background: "transparent"
    },
    $(go.Shape, { geometryString: "M0 0 H400" }),  // the main Shape
    // a short, frequent tick mark
    $(go.Shape, { geometryString: "M0 0 V5" }),
    // a longer tick mark every four ticks
    $(go.Shape, { geometryString: "M0 0 V10", interval: 4 }),
    // text label only every four ticks, with a vertical offset
    $(go.TextBlock, { segmentOffset: new go.Point(0, 12), interval: 4 })
  ));

改graduatedMin為-23結果為：

diagram.add(
  $(go.Part, "Graduated",
    {
      graduatedMin: -23, graduatedMax: 77,
      graduatedTickBase: 0, graduatedTickUnit: 2.5,
      background: "transparent"
    },
    $(go.Shape, { geometryString: "M0 0 H400" }),  // the main Shape
    $(go.Shape, { geometryString: "M0 0 V5" }),  // short tick mark
    $(go.Shape, { geometryString: "M0 0 V10", interval: 4 }),  // long tick mark
    $(go.TextBlock, { segmentOffset: new go.Point(0, 12), interval: 4 })  // labels
  ));

 最小值到最大值（Panel.graduatedRange）的范圍已從77增加到100，因此對于相同長度的主路徑，刻度線彼此靠近。

更改graduatedTickBase為1.2結果為：

diagram.add(
  $(go.Part, "Graduated",
    {
      graduatedMin: -23, graduatedMax: 77,
      graduatedTickBase: 1.2, graduatedTickUnit: 2.5,
      background: "transparent"
    },
    $(go.Shape, { geometryString: "M0 0 H400" }),  // the main Shape
    $(go.Shape, { geometryString: "M0 0 V5" }),  // short tick mark
    $(go.Shape, { geometryString: "M0 0 V10", interval: 4 }),  // long tick mark
    $(go.TextBlock, { segmentOffset: new go.Point(0, 12), interval: 4 })  // labels
  ));

 基本上，標尺的“原點”已略有偏移，即使最終值保持不變。graduatedTickBase 如果該值在刻度范圍內，則始終會出現一個刻度線。

將的值加倍graduatedTickUnit會5導致：

diagram.add(
  $(go.Part, "Graduated",
    {
      graduatedMin: -23, graduatedMax: 77,
      graduatedTickBase: 1.2, graduatedTickUnit: 5,
      background: "transparent"
    },
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V5" }),  // short tick mark
    $(go.Shape, { geometryString: "M0 0 V10", interval: 4 }),  // long tick mark
    $(go.TextBlock, { segmentOffset: new go.Point(0, 12), interval: 4 })  // labels
  ));

將滴答單位加倍會使相同長度路徑的滴答聲數量減半，但最終值仍保持不變。

改graduatedTickBase回0和將間隔更改為5：

diagram.add(
  $(go.Part, "Graduated",
    {
      graduatedMin: -23, graduatedMax: 77,
      graduatedTickBase: 0, graduatedTickUnit: 5,
      background: "transparent"
    },
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V5" }),  // short tick mark
    $(go.Shape, { geometryString: "M0 0 V10", interval: 5 }),  // long tick mark
    $(go.TextBlock, { interval: 5, segmentOffset: new go.Point(0, 12) })
  ));

您可以有多個標簽。例如，小文本比大文本更頻繁：

diagram.add(
  $(go.Part, "Graduated",
    {
      graduatedMin: 0, graduatedMax: 140,
      graduatedTickBase: 0, graduatedTickUnit: 5,
      background: "transparent"
    },
    $(go.Shape, { geometryString: "M0 0 H450" }),  // longer line
    $(go.Shape, { geometryString: "M0 0 V5" }),
    $(go.Shape, { geometryString: "M0 0 V10", interval: 4 }),
    // minor label
    $(go.TextBlock, { interval: 2, segmentOffset: new go.Point(0, 8),
                      stroke: "blue", font: "7pt sans-serif" }),
    // major label
    $(go.TextBlock, { interval: 4, segmentOffset: new go.Point(0, 12),
                      stroke: "red", font: "bold 12pt sans-serif" })
  ));

---

想要購買GoJS正版授權，或了解更多產品信息請點擊