LightningChart数据可视化图形控件使用篇22-图例框

349 阅读4分钟

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

图例框

演示示例: Multiple legends; Heatmap legends; Segments with splitters

从第v.8版本开始,ViewXY 支持在同一个张图形中出现多个图例框。在ViewXY.LegendBoxes集中插入这些图例框。

微信截图_20220505102603.png 图:庞大的 LegendBoxXY 属性树

在图例框中设置隐藏/显示某序列图

微信截图_20220505102719.png 图:在图例框中显示有系列名和图标。取消选定某个系列的勾选框可以将其隐藏。

防止某系列在图例框中自行列出

如果某个特定的系列不应该列在图例框中,则为该系列设置series.ShowInLegendBox = False。

选择在哪个图例框中显示特定的系列

用 series.LegendBoxIndex 可选择首选的图例框。系列仅可出现在一个图例框中。所有系列的默认索引为0,意味着除非另有说明,否则它们都将出现在同一个图例框中。

选择在哪个图形段中显示图例框

用 SegmentIndex 来控制在哪个段中显示图例框。只适用于基于段的Position选项。

修改复选框

若要显示或隐藏图例框中的复选框,请使用ShowCheckBoxes属性。CheckBoxColor和 CheckMarkColor可用于在CheckBoxSize控件时更改复选框的外观框的大小(以像素为单位)

_chart.ViewXY.LegendBoxes[0].ShowCheckboxes = true;
_chart.ViewXY.LegendBoxes[0].CheckBoxColor = Colors.Green; 
_chart.ViewXY.LegendBoxes[0].CheckMarkColor = Colors.Blue; 
_chart.ViewXY.LegendBoxes[0].CheckBoxSize = 15;

隐藏图标

设置 ShowIcons = False,可隐藏图标。

修改强度系列的调色板刻度

要隐藏一个IntensityGrid或IntensityMesh的调色板刻度,可设置IntensityScales.Visible = False。设置 ScaleSizeDim1 和 ScaleSizeDim2 属性,则可对其大小进行调整。刻度的边框以及名称的位置也可以修改。

微信截图_20220505103108.png 图:在底部的图片中设置LegendBox.IntensityScales.Visible = false

控制位置

图例框可以自动放置或手动放置。自动放置可以让它们对齐到图形段的左侧/顶部/右侧/底部,或在图边距上。用Position属性可以控制位置。位置选项有:TopCenter、TopLeft、TopRight、LeftCenter、 RightCenter、 BottomLeft、 BottomCenter、 BottomRight、 Manual。

如果视图分为数个片段,图例框可以根据其所属的段进行对齐(此可用SegmentIndex来控制)。对于基于图段进行控制,有以下几个选项可用:SegmentTopLeft、SegmentTopCenter, SegmentTopRight、SegmentBottomLeft、SegmentBottomCenter、SegmentBottomRight、SegmentLeftMarginCenter、SegmentRightMarginCenter。

Offset属性根据给定的数量从由Position属性决定的地方来移动位置。

// 设置图例框位置,偏移量从RightCenter位置移动
chart.ViewXY.LegendBoxes[0].Position = LegendBoxPositionXY.RightCenter;
chart.ViewXY.LegendBoxes[0].Offset = new PointIntXY(-15, -70;

Manual定位计算从图例框左上角到视图左上角的偏移量。注意,这与TopLeft选项不同,TopLeft选项是从图形区域的顶部计算的。

注意,当移动或改变图例框的大小时,其Position 设置为Manual,并更新 Offset 属性以显示新的位置。

如果不设置Position回除‘Manual’之外的选项,自动图例框对齐是禁用的。由于在Position选项之间切换时Offset未更新,图例框有时看起来会消失(位于视图之外)。这个问题可通过将Offset设置回0,0来修正。

为图形段间的图例框分配空间

设置 ViewXY.AutoSpaceLegendBoxes = True后,将对段之间的额外空间进行分配,以适当安置其中的图例框。 注意,段间也要分配ViewXY.AxisLayout.SegmentsGap。

微信截图_20220505103253.png 图:Position = SegmentBottomRight. AutoSpaceLegendBoxes = False.

微信截图_20220505103333.png 图:Position = SegmentBottomRight. AutoSpaceLegendBoxes = True.

段间距内的图例框对齐

要将图例框垂直对齐到指定段附近,可设置AlignmentInSegmentGap = Near。要将其垂直对齐到段与段之间间距的中心,可设置AlignmentInSegmentGap = Center。

在同一图边距中的几个图例框水平对齐

AlignmentInVerticalMargin 属性具有 Left/Center/Right 几个选项。该属性控制将图例框(设置在同一个垂直图边距内)的水平位置。设置为相同的垂直边框。

微信截图_20220505103558.png 图:AlignmentInVerticalMargin = Left set for both Legend boxes.

图例框的大小调整与移动

图例框支持调整大小和滚动条。从边缘处抓取可调整大小。

微信截图_20220505103717.png 图:图例框中的滚动体

注意,当移动或调整图例框大小时,其Position 设置为 Manual, 并更新 Offset 属性,以显示新的位置(参阅本章上文:控制位置)。

关于LightningChart数据可视化图形控件使用篇22-图例框 章节就分享到这里了。

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

微信号:lightningchart_china

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

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

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