LightningChart数据可视化图形控件使用篇5-ViewXY·轴布局选项

LightningChart数据可视化
400 阅读6分钟

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

轴布局选项

一般用以调整轴位置以及自动边距等的属性可以在ViewXY.AxisLayout属性及子属性中找到。

微信截图_20220424105854.png

图：AxisLayout 属性树

设置轴位置的方法

自动布置X轴

演示示例：自动布置轴（Automatic axis placements）; 数个轴的情况（Several axes） XAxisAutoPlacement 控制着如何垂直放置X轴。

chart.ViewXY.AxisLayout.XAxisAutoPlacement = XAxisAutoPlacement.AllBottom;

微信截图_20220424110145.png 图 6-4. XAxisAutoPlacement = AllBottom；添加的三个 X轴都置于图下方

微信截图_20220424110212.png 图：XAxisAutoPlacement = AllTop；所有X轴都置于图上方

微信截图_20220424110258.png 图：XAxisAutoPlacement = BottomThenTop；X轴分散在图的上下方，从底部开始交替分散在两边。

微信截图_20220424110341.png 图：XAxisAutoPlacement = TopThenBottolm；轴分布在图的上下方，从顶部开始交替分散在两边。

微信截图_20220424110433.png 图：XAxisAutoPlacement = Explicit；X轴出现在显式选择的那一侧。 X轴1（XAxis1）的 ExplicitAutoPlacementSide 属性设置为底部（Bottom），而X轴2和3（XAxis2 和 XAxis3）为顶部（Top）。

微信截图_20220424110524.png 图：XAxisAutoPlacement = Off；禁用自动布置轴，每个轴的位置（Position）和对齐（Alignment）属性各自分别应用。第一条轴 Position = 0，第二条轴 Position = 50，第三条轴Position = 100

自动布置Y轴

演示实例：Y轴布局（Y axis layouts）；自动布置轴（Automatic axis placements）；数个轴的情况（Several axes） YAxisAutoPlacement控制着如何水平放置Y轴。

chart.ViewXY.AxisLayout.YAxisAutoPlacement = YAxisAutoPlacement.AllLeft;

微信截图_20220424110753.png 图：YAxisAutoPlacement = AllLeft；添加的三个Y轴都置于图左侧。

微信截图_20220424110837.png 图：YAxisAutoPlacement = AllRight；所有Y轴都置于图右侧。

微信截图_20220424110918.png 图：YAxisAutoPlacement = LeftThenRight；Y轴分布在图左右两侧，从左侧开始交替分散在两侧。

微信截图_20220424111031.png 图：YAxisAutoPlacement = RightThenLeft；Y轴分布在图左右两侧，从右侧开始交替分散在两侧。

微信截图_20220424111115.png 图：YAxisAutoPlacement = Explicit；Y轴出现在显式选择的那一侧。Y轴1和2（YAxis1 和 YAxis2）的 ExplicitAutoPlacementSide属性设置为左侧（Left），而Y轴3为右侧（Right）。

微信截图_20220424111156.png 图：YAxisAutoPlacement = Off；禁用自动布置轴，每个轴的位置（Position）和对齐（Alignment）属性各自分别应用。第一条轴 Position = 0，第二条轴 Position = 20，第三条轴Position = 80

图形段（Graph segments）及其中的Y轴位置

如果定义有数个Y轴，它们可以以三种不同的方式垂直排列： Layered（层叠式）、Stacked（叠置式） 和 Segmented（分段式）。通过ViewXY.AxisLayout.YAxesLayout属性可以对其进行选择。

层叠式（Layered）

演示实例：Y轴布局（Y axis layouts）；自动布置轴（Automatic axis placements）

在Layered 视图模式中，所有的Y轴都是从图的顶部开始，延伸到图的底部。Y轴和与其关联的系列在同一个垂直空间里。

chart.ViewXY.AxisLayout.YAxesLayout = YAxesLayout.Layered;

微信截图_20220424111536.png 图：4 个Y轴设定为YAxesLayout = Layered 时的示例视图

叠置式（Stacked ）

演示实例：Y轴布局（Y axis layouts）；多信道游标追踪（Multi-channel cursor tracking）；系列中数据中断（Data breaking in series）

在Stacked 视图中，每条Y轴都有自己的垂直空间。所有Y轴都等高。

chart.ViewXY.AxisLayout.YAxesLayout = YAxesLayout.Stacked;

微信截图_20220424111653.png 图： 4 条Y轴在设置为 YAxesLayout = Stacked时的示例视图

分段式（Segmented）

演示示例：Y轴布局（Y axis layouts）；多图例情况（Multiple legends）；分割器分段（Segments with splitters）

在Segmented 视图中，垂直空间分割成了数个段（Segments）。每个段都可以包含数个Y轴。每个段的相对高度可以设置，同时，一个段内的所有Y轴都具有与该段一样的高度。

chart.ViewXY.AxisLayout.YAxesLayout = YAxesLayout.Segmented;

Segments 必须在 AxisLayout.Segments 集合中创建。首先添加的段要置于图表的底部。一个段只有一个属性，即Height；它是一个相对于其他段的相对高度。因为段的比例需要随着图表的尺寸来调整，所以段的高度不是以屏幕像素来规定的。

// 添加2个段，第二个段的高度是第一个段的2倍
    chart.ViewXY.AxisLayout.Segments.Add（new YAxisSegment（））;
    chart.ViewXY.AxisLayout.Segments.Add（new YAxisSegment（））;
    chart.ViewXY.AxisLayout.Segments[0].Height = 1;
    chart.ViewXY.AxisLayout.Segments[0].Height = 2;

通过设置yAxis.SegmentIndex属性可以为Y轴分配一个段。SegmentIndex 则为AxisLayout.Segments 集合中的索引。

    chart.ViewXY.YAxes[0].SegmentIndex = 0;
    chart.ViewXY.YAxes[1].SegmentIndex = 1;

微信截图_20220424112005.png 图：4个 Y轴在设置为YAxesLayout = Segmented时的示例视图。前两个段的高度设置为 Height = 1，最后一个段的高度为2.5。 Axis1.SegmentIndex = 0, Axis2.SegmentIndex = 1, Axis3 与 Axis4.SegmentIndex = 3.

当选择Stacked或Segmented视图后，利用ViewXY.AxisLayout.SegmentsGap属性可以调整各图形段之间的垂直距离。

chart.ViewXY.AxisLayout.SegmentsGap = 10; // 每个段之间设置10像素间距

如果定义了许多的Y轴，应启用AutoShrinkSegmentsGap 属性来自动缩减间距。这样，在绘制每条Y轴时至少都会有一些垂直距离。

chart.ViewXY.AxisLayout.AutoShrinkSegmentsGap = false;

如果需要实现段特定的用户界面逻辑，使用ViewXY.GetGraphSegmentInfo（）–method能找到图形段的边界。

    // 获取每个段的顶部与底部坐标
    float[] topCoords = chart.ViewXY.GetGraphSegmentInfo（）.SegmentTops;
    float[] bottomCoords = chart.ViewXY.GetGraphSegmentInfo（）.SegmentBottoms;

轴网格带（Axis grid strips）

演示示例：历史数据回顾（Historic data review）；缩放条图表（Zoom bar chart）

轴网格（划分）间隔可以在图形背景上显示为填充效果。通过ViewXY.AxisLayout.AxisGridStrips对X进行设置，可在X轴设置网格带。另外，通过AxisGridStrips对Y进行设置，可在Y轴设置网格带。用Both选项可以对X和Y轴都设置网格带，而用None则可不显示任何网格带。

chart.ViewXY.AxisLayout.AxisGridStrips = XYAxisGridStrips.X;

当使用多条X轴时，可以使用XGridStripAxisIndex 对X轴设置网格带。不过，一次只能对一条X轴进行设置。

chart.ViewXY.AxisLayout.XGridStripAxisIndex = 0;

当使用Layered YAxisLayout选项时，可以通过YGridStripAxisIndexLayered 对Y轴设置网格带。如果是Stacked 布局，每条Y轴都具有网格带。

chart.ViewXY.AxisLayout.YGridStripAxisIndexLayered = 0;

在X轴或Y轴对象的GridStripColor 属性中，可以对网格带的颜色进行调整。

chart.ViewXY.YAxes[0].GridStripColor = Color.FromArgb（80, 0, 0, 100）;

微信截图_20220424112410.png 图：AxisGridStrips = None.

微信截图_20220424112443.png 图：AxisGridStrips =X.

微信截图_20220424112519.png 图：AxisGridStrips = Y.

微信截图_20220424112552.png 图：AxisGridStrips = Both. GridStripColor 同样在Y轴上也发生了变化。

其他AxisLayout选项

启用XAxisAutoPlacement 或 YAxisAutoPlacement 后，用AutoAdjustAxisGap可以设置两个相邻轴区域之间的间距（以像素为单位）。

chart.ViewXY.AxisLayout.XAxisAutoPlacement = XAxisAutoPlacement.AllBottom;
chart.ViewXY.AxisLayout.AutoAdjustAxisGap = 10;

启用 XAxisTitleAutoPlacement （或YAxisTitleAutoPlacement）后，轴的标题距离根据数值标签的长度、轴和刻度线的对齐选项自动计算。如果禁用了XAxisTitleAutoPlacement （或YAxisTitleAutoPlacement），则用轴对象属性的Title.DistanceToAxis设置标题到轴线的距离。

chart.ViewXY.AxisLayout.XAxisTitleAutoPlacement = false;
chart.ViewXY.XAxis[0].Title.DistanceToAxis = -20;

关于LightningChart数据可视化图形控件使用篇5-ViewXY之轴布局选项章节就分享到这里了。

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

微信号：lightningchart_china

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

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

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

avatar
文章
阅读
粉丝