本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Bands（带）系列

演示示例：Bands; Statistic analytics; Long data analysis; Zoom bar chart

Bands 带可以看做是系列。它们具有与其他系列相同的用户界面操作，但是一个band系列只包含一个带。一条带是一片垂直或水平区域，从一侧图边距延伸到另一侧。用Binding属性可以将一条带连接到一条Y轴或X轴。如果将带连接到Y轴，必须还要设置AssignYAxisIndex属性。如果将带连接到X轴，则忽略AssignYAxisIndex属性，或将其设置为unassigned （-1）。

图：几个带与线条系列

如果要把带置于线条或柱状系列后面，则设置Behind属性为true 。用ValueBegin和ValueEnd属性可以设置带的边缘，即为连接的轴上的值。用鼠标可以将带拖动到其他位置。拖动边缘可以调整带的大小，即更新了被拖动边缘的值、 ValueBegin 或 ValueEnd。

Constant lines （恒量线）

演示示例： Oscilloscope; Lissajous monitor; Signal reader; Areas; Segments with splitters 恒量线和带一样也可以当做是系列。恒量线与Y轴连接，呈现为一条水平线，自图表左边延伸至右边。通过Value属性可以设置水平高度。用鼠标可以垂直拖动恒量线。设置Behind属性为后，恒量线绘制于线条系列和柱状系列的后面，否则绘制在前面。

图：恒量线分列于正弦系列两旁。

Annotations 注释

演示示例： Annotations; Custom rendering; Intensity grid mouse control; Multi-channel cursor tracking; Stocks and bars; Annotations table

注释可以在图表区域的任何地方显示鼠标交互的文本标签或图形。注释可以通过鼠标移动，调整大小，旋转，它们的对象和位置可以改变。或者可以通过代码来控制这些操作。如果必须在屏幕上渲染自定义图形，注释也很有用，因为它们可以以不同的样式和形状呈现。在ViewXY.Annotations 集合中创建AnnotationXY对象。

当移动鼠标至注释上方时，可进入鼠标交互的编辑状态。此时可以对注释重定位，调整其大小，旋转，并指定箭头指向哪里。

图：移动鼠标至注释上方进入编辑状态；移走鼠标则退出编辑状态

图：各种样式的AnnotationXY 对象，分置与一条线系列周围。用Style 属性选择注释形状。

控制对象（Target）和位置（Location）

Target为箭头终点所指，即箭头或标注尖端所指向的点。Target 可以在轴值或在屏幕坐标中设置；具体可以用 TargetCoordinateSystem 在AxisValues和ScreenCoordinates二者中选择。如果选择了、AxisValues ，通过TargetAxisValues 属性设置箭头线指向的位置（箭头线的末端）；另外一个则是通过TargetScreenCoords 在屏幕坐标中设置。

Location 是箭头的起始点，可以通过屏幕坐标、轴值或者与Target的相对偏移量来设置。用 LocationCoordinateSystem 在LocationScreenCoords、LocationAxisValues 或 LocationRelativeOffset 三个方法中进行选择来控制位置。 Location还是文本区域旋转的中心点。

Anchor 属性控制着文本区域在Location上的放置方式。设置Anchor.X = 0.5 且 Anchor.Y = 0.5，箭头的起点居于中间；设置 Anchor.X 0.1 且 Anchor.Y = 0.25，箭头起点位于如下图所示的靠近左上角：

图：Anchor 值说明； Current Anchor.X = 0.1 且 Anchor.Y = 0.25. 当 anchor 值在 0…1 内，箭头起始点便位于文本区域内部.

用鼠标来移动、旋转及调整大小

图：注释的鼠标交互节点

从 Target 拖动可移动箭头的末端。从文本区域拖动可设置新的Location。通过拖动圆形的 location/锚节点，可以同时调整Anchor 和 Location 属性，将文本框保持在相同的位置。

按住 Shift 键，然后拖动resize （X）或resize （Y）节点来调整大小, 采用对称操作，两边会同 时调整。按住Shift 键，然后从角位置上的节点resize （X+Y）拖动，在调整大小时还会保留屏幕纵 横比。在旋转操作时，Shift 键可帮助以最近的15 度倍数的旋转角度转动。

调整外观

通过设置Style 属性可选择注释的外形；其中的选项有：Rectangle、RectangleArrow、 RoundedRectangle、RoundedRectangleArrow、Arrow、Callout、RoundedCallout、Ellipse、 EllipseArrow、Triangle 和 TriangleArrow。

如果样式中带有箭头，可使用ArrowLineStyle、ArrowStyleBegin 和 ArrowStyleEnd 来控制箭头 的图案。箭头末端的样式有以下几个选项： None、Square、Arrow、Circle 和 Caliper。

用 Fill 可修改注释的填充效果。编辑状态的鼠标交互节点外观可以从NibStyle中进行更改。用 TextStyle 则可以控制文本区域内的字体设置与文本对齐情况。用BorderLineStyle 和 CornerRoundRadius 可以控制边框线条的外观。

尺寸大小设置

用Sizing 属性可控制注释文本框的大小：

• Automatic 根据内容来调整大小，并给边框留出AutoSizePadding空间。

• AxisValuesBoundaries 可以根据轴值来设置注释的尺寸，具体可以用AxisValuesBoundaries.XMin、 XMax、 YMin 和 YMax来定义。

• ScreenCoordinates 可以通过屏幕坐标来设置尺寸，具体可以使用到SizeScreenCoords.Height 和 Width。

保持文本区域可见

开启 KeepVisible 后，注释的文本区域被强制放在图形内部，这时用鼠标或通过代码移动注释时，都不会将其移动到图形外。在平移图形视图或调整轴时，将重新定位注释以显示在图形内部。

在轴上显示注释

设置 RenderBehindAxes = True，注释显示在轴的下方。所有的剪辑和Z序功能在这种情况下都无法使用。如果设置ClipInsideGraph为true，则RenderBehindAxis不会起作用。

图：左侧， RenderBehindAxes = True；右侧， RenderBehindAxes = False. 二者中的ClipInsideGraph 都设置为False

图形内剪辑

开启 ClipInsideGraph 后，可在图形内部对注释剪辑。禁用后，注释也可在图表的图边距区域渲染。

开启 ClipWhenSweeping后，当设置ScrollMode为Sweeping模式时，注释不会在扫描间距区域显示。

控制Z序

当设置 Behind 属性为其默认值False时，注释显示在系列的上方。当设置为True时，注释在系列之前渲染，因此会出现在系列的下方。

注释按照它们在注释列表中的顺序显示，同时将Behind筛选程序作为主控制器。采用注释的ChangeOrder方法，例如鼠标事件处理程序，注释的Z序能够快速更改。用以改变Z序的选项有：

• BringToFront 注释处于最前

• SendToBack 置后

• MoveBack 向后移动一步

• MoveFront 向前移动一步

LayerGrouping性能优化

当要显示数百个带有可见文本的注释时，文本渲染延迟便开始产生重要的影响。默认情况下，文本渲染按照Z序进行，让文本牢牢地保留在注释中。 设置LayerGrouping = True，可以提高性能，而且图表将只使用两个平面注释文本层。一个用于设置Behind为True的注释，另一个用于设置Behind为的False注释。这可以大大提高性能。另一方面，如果有注释与其他注释重叠，则文本将出现渲染错误。

图：左侧， LayerGrouping = False；右侧， LayerGrouping = True, 文本的Z序丢失。

轴的值与屏幕坐标之间的转换

在一些情况中， Location 或 Target 可能需要在混合配置中加以定义，如屏幕坐标中的为X，轴的值为Y，反之亦然。采用轴ValueToCoord的方法可以将一个轴的值转换为一个屏幕坐标，用CoordToValue可以将一个屏幕坐标转换为一个轴的值（如# [LightningChart数据可视化图形控件使用篇6-ViewXY·Y轴](LightningChart数据可视化图形控件使用篇6-ViewXY·Y轴 - 掘金 (juejin.cn))数轴值与屏幕坐标的转换章节所述）。

关于LightningChart数据可视化图形控件使用篇21-Bands（带）、Constant lines(恒量线)、Annotations 注释 章节就分享到这里了。

如果在实际应用中遇到技术问题或需要帮助，可以添加下方微信号联系官方技术支持。

微信号：lightningchart_china

如果您想进一步使用LightningChart数据可视化图形控件，请添加后回复“学习”可免费领取一套全功能版LightningChart数据可视化控件。

后续我会不断更新LightingChart更详细的使用方法，写文不易，还望多多回复关注支持！谢谢！

最新版V10 LightningChart下载地址：猛击下载