流程圖控件GoJS教程：如何創(chuàng)建分級(jí)面板（一）

---

GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新版

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

有關(guān)刻度面板的示例，請(qǐng)參見(jiàn)時(shí)間線， 溫度計(jì)， 儀表規(guī)和標(biāo)尺圖示例。

簡(jiǎn)單的分級(jí)面板

類(lèi)似于自動(dòng)面板和現(xiàn)場(chǎng)面板，漸變面板中應(yīng)包含兩個(gè)或多個(gè)元素。元素必須是Shape或TextBlock。可以通過(guò)將GraphObject.isPanelMain設(shè)置為true 來(lái)聲明主要的Shape元素。但是如果它是面板的第一個(gè)元素，則無(wú)需進(jìn)行此類(lèi)設(shè)置。除了主要Shape之外，Shape和TextBlocks基本上充當(dāng)繪制每個(gè)刻度線和標(biāo)簽的模板。

刻度標(biāo)記形狀秒的刻度面板內(nèi)應(yīng)具有測(cè)量大小，通過(guò)設(shè)置一個(gè)GraphObject.desiredSize （或width和height屬性），或通過(guò)設(shè)置其Shape.geometry。對(duì)于描繪的常態(tài)的主要形狀的路徑基本刻度標(biāo)記，它是最容易使用的一個(gè)簡(jiǎn)單的垂直線的幾何形狀字符串：M0 0 V10。幾何圖形的高度將確定刻度線的長(zhǎng)度。

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標(biāo)記，表示沿比例尺的值。通常，它們將使用GraphObject.segmentOffset與主筆畫(huà)偏移，就像使用Link標(biāo)簽時(shí)那樣，以便文本不會(huì)與主筆畫(huà)重疊。有關(guān)放置標(biāo)簽的更多詳細(xì)信息，請(qǐng)參見(jiàn)下面的“外觀”部分。

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
  ));

分級(jí)面板屬性

有許多屬性可以控制刻度線和標(biāo)簽的外觀。

刻度線值

從主要形狀的筆觸的開(kāi)始到筆劃的結(jié)束，“刻度面板”的刻度值將在線性范圍內(nèi)變化。刻度線和標(biāo)簽的值和頻率由一些屬性控制：

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

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

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

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結(jié)果為：

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，因此對(duì)于相同長(zhǎng)度的主路徑，刻度線彼此靠近。

更改graduatedTickBase為1.2結(jié)果為：

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
  ));

 基本上，標(biāo)尺的“原點(diǎn)”已略有偏移，即使最終值保持不變。graduatedTickBase 如果該值在刻度范圍內(nèi)，則始終會(huì)出現(xiàn)一個(gè)刻度線。

將的值加倍graduatedTickUnit會(huì)5導(dǎo)致：

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
  ));

將滴答單位加倍會(huì)使相同長(zhǎng)度路徑的滴答聲數(shù)量減半，但最終值仍保持不變。

改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) })
  ));

您可以有多個(gè)標(biāo)簽。例如，小文本比大文本更頻繁：

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" })
  ));

---

想要購(gòu)買(mǎi)GoJS正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊