彩票走势图

多轴图表的使用:Nevron Chart图轴对接

原创|其它|编辑:郝浩|2012-10-25 13:45:20.000|阅读 726 次

概述:当你开发一个图表应用程序时,会经常遇到一个图表有多个Y轴的需求。最至关重要的是一个好的图表产品就应该支持灵活的Y轴坐标定位和布局,Nevron Chart for .NET就很好的解决了了多个Y轴的需求。

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

当你开发一个图表应用程序时,会经常遇到一个图表有多个Y轴的需求。最至关重要的是一个好的图表产品就应该支持灵活的Y轴坐标定位和布局,Nevron Chart for .NET就很好的解决了了多个Y轴的需求。

最常见的需求就是两个 Y 坐标轴和两个系列缩放,当你需要比较两个系列数据在级或者是测量上的不同时,这是最常见的。但是想要以可视方式比较,以便使最终用户能够分析趋势或两者之间的关系。比如下面的例子,图片显示 的假象的120 天水测量:

多轴图表的使用:Nevron Chart图轴对接

由于水的储备规模在水的借记卡中不同,很明显用户不能正确的分析者两个。

一个解决办法是利用一个次坐标轴的借记卡数据,同时显示两个趋势:

多轴图表的使用:Nevron Chart图轴对接

在上面的图片中,借记卡测量在次主坐标轴上显示,而且基数为90。下面的代码主要是用于缩放辅助的 Y 轴上的借记卡区域:

[C#]

NAxis secondaryY = (NAxis)chart.Axis(StandardAxis.SecondaryY);
secondaryY.Visible = true;

areaDebit.DisplayOnAxis(StandardAxis.PrimaryY, false);
areaDebit.DisplayOnAxis(StandardAxis.SecondaryY, true);


[VB.NET]

Dim secondaryY As NAxis = chart.Axis(StandardAxis.SecondaryY)
secondaryY.Visible = True

areaDebit.DisplayOnAxis(StandardAxis.PrimaryY, False)
areaDebit.DisplayOnAxis(StandardAxis.SecondaryY, True)

可以注意到当二级Y轴是可见时,图表的区域缩小了。

然而在某种情况下,可能希望让两个轴在图表的同一边,如下图所示:

多轴图表的使用:Nevron Chart图轴对接

 

为了改变第二Y轴的位置,就必须修改它的anchor:

代码如下:

[C#]

NAxis secondaryY = (NAxis)chart.Axis(StandardAxis.SecondaryY);
secondaryY.Visible = true;
secondaryY.Anchor = new
NDockAxisAnchor(AxisDockZone.FrontLeft);


[VB.NET]

Dim secondaryY As NAxis = chart.Axis(StandardAxis.SecondaryY)
secondaryY.Visible = True
secondaryY.Anchor = New
NDockAxisAnchor(AxisDockZone.FrontLeft)

现在第二Y轴是停靠在主Y轴左边(显示范围[0,1200])。

上面的图表需要 另一个touch,当你停靠几个轴到一个轴区域时(比如上图中的左边的区域),你可能想要引进一些颜色代码来链接到这些轴上面以便于区分。

这是非常必要的,因为用户不能直观地理解区域是从90到115或是从0到1200。下面的图片显示了这些轴是如何与颜色代码来表示内容和区域的。

多轴图表的使用:Nevron Chart图轴对接

可以注意到为了节省空间,禁用了轴上主要的一些刻度,实现的代码如下:

[C#]

NAxis primaryY = (NAxis)chart.Axis(StandardAxis.PrimaryY);
NStandardScaleConfigurator primaryScaleY = primaryY.ScaleConfigurator as NStandardScaleConfigurator;
primaryScaleY.RulerStyle.BorderStyle.Color = Color.DarkOrange;
primaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.DarkOrange;
primaryScaleY.InnerMajorTickStyle.Length = new NLength(0);
primaryScaleY.LabelStyle.TextStyle.FillStyle = new NColorFillStyle(Color.DarkOrange);

NAxis secondaryY = (NAxis)chart.Axis(StandardAxis.SecondaryY);
NLinearScaleConfigurator secondaryScaleY = secondaryY.ScaleConfigurator as NLinearScaleConfigurator;
secondaryScaleY.RulerStyle.BorderStyle.Color = Color.Green;
secondaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.Green;
secondaryScaleY.InnerMajorTickStyle.Length = new NLength(0);
secondaryScaleY.UseOrigin = true;
secondaryScaleY.Origin = 100;
secondaryScaleY.LabelStyle.TextStyle.FillStyle = new NColorFillStyle(Color.Green);


[VB.NET]

Dim primaryY As NAxis = chart.Axis(StandardAxis.PrimaryY)
Dim primaryScaleY As NStandardScaleConfigurator = CType(primaryY.ScaleConfigurator, NStandardScaleConfigurator)
primaryScaleY.RulerStyle.BorderStyle.Color = Color.DarkOrange
primaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.DarkOrange
primaryScaleY.InnerMajorTickStyle.Length = New NLength(0)
primaryScaleY.LabelStyle.TextStyle.FillStyle = New NColorFillStyle(Color.DarkOrange)

Dim secondaryY As NAxis = chart.Axis(StandardAxis.SecondaryY)
Dim secondaryScaleY As NLinearScaleConfigurator = CType(secondaryY.ScaleConfigurator, NLinearScaleConfigurator)
secondaryScaleY.RulerStyle.BorderStyle.Color = Color.Green
secondaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.Green
secondaryScaleY.InnerMajorTickStyle.Length = New NLength(0)
secondaryScaleY.UseOrigin = True
secondaryScaleY.Origin = 100
secondaryScaleY.LabelStyle.TextStyle.FillStyle = New NColorFillStyle(Color.Green)

Nevron Chart可以拥有无限的多个自定义的垂直和水平轴,你可以指定轴,在上面按照原比例缩小,当使用轴对接你还可以指定是否创建一个单独的水平轴在dock区或最后创建一个,这允许你在zone level上有两个或多个轴,共享一个百分比的图表墙。

效果如下:

多轴图表的使用:Nevron Chart图轴对接

多轴图表的使用:Nevron Chart图轴对接


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP