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

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

點擊下載GoJS最新版

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

有關(guān)刻度面板的示例，請參見時間線， 溫度計， 儀表規(guī)和標(biāo)尺圖示例。

簡單的分級面板

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

刻度標(biāo)記形狀秒的刻度面板內(nèi)應(yīng)具有測量大小，通過設(shè)置一個GraphObject.desiredSize （或width和height屬性），或通過設(shè)置其Shape.geometry。對于描繪的常態(tài)的主要形狀的路徑基本刻度標(biāo)記，它是最容易使用的一個簡單的垂直線的幾何形狀字符串：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" })
  ));

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

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

刻度線值

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

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

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

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

將的值加倍graduatedTickUnit會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
  ));

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