流程图控件GoJS教程：如何创建分级面板（二）-控件新闻-慧都网

流程图控件GoJS教程：如何创建分级面板（二）

翻译|使用教程|编辑：杨鹏连|2020-08-25 11:14:38.577|阅读 245 次

概述：本教程介绍如何创建分级面板，在“刻度”面板Panel.Graduated，平定期刻度/文字标签沿主子图的行程形状。刻度面板可以视为显示一系列值的比例尺。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接：

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新版

刻度线外观

刻度线相对于主要形状路径的出现由一些属性控制：

Shape.graduatedStart / TextBlock.graduatedStart- 沿主笔划的小数距离，在该笔划或标签处开始绘制
Shape.graduatedEnd / TextBlock.graduatedEnd- 沿主笔触的小数距离，超出该距离将不会绘制此刻度或标签
GraphObject.alignmentFocus- 刻度线或标签上与计算的路径点对齐的点，默认为顶部中心
GraphObject.segmentOffset- 从主笔画偏移TextBlock标签的程度-Y值指定距路径的距离
GraphObject.segmentOrientation- 如何相对于主笔画旋转TextBlock标签

仅TextBlock标签应设置GraphObject.segmentOffset或GraphObject.segmentOrientation。它们对主要形状或刻度形状没有影响。这些GraphObject属性也通常用于放置“链接”标签，如“链接”标签上“ 简介”页面所示，并且由“分级面板”以类似方式使用。

设置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 })
  ));

注意形状的几何形状中的间隙。

设置segmentOffset标签可以使它们在刻度线附近更具可读性：

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

设置segmentOrientation标签可以改变标签相对于主笔画的绘制角度：

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以具有与上一个示例相反的值。

最后，如果方向是Link.OrientNone， Link.OrientAlong或Link.OrientUpright之一，则将考虑标签上指定的任何角度。对于“沿”和“垂直”，将在TextBlock的点将角度添加到主路径的坡度。

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