彩票走势图

如何使用界面组件Telerik UI for WPF创建直方图?这里有答案!

翻译|行业资讯|编辑:周思宇|2023-05-29 14:43:11.587|阅读 54 次

概述:本文主要为大家介绍如何使用Telerik WPF控件创建直方图实现数据可视化,欢迎下载使用!

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

Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序,同时还能快速构建企业级办公WPF应用程序。UI for WPF支持MVVM、触摸等,创建的应用程序可靠且结构良好,非常容易维护,其直观的API将无缝地集成Visual Studio工具箱中。

Telerik UI for WPF控件的RadChartView组件能够使您生成美观的图表可视化——点、条、线等等。本文将介绍新的直方图来实现数据可视化,你可以清楚地看到数据的峰值在哪里。

什么是直方图?

直方图是连续的条形图,每个条形的宽度在水平轴上有一个含义。最常见的是,直方图用于显示频率分布。

标准条形图和直方图之间的区别在于,条形图使用类别,而直方图的每个条的宽度都有一个数字范围。

Picture showing RadChartView's ScatterRangeBarSeries for WPF

补充知识:

Telerik UI for WPF R1 2023为RadChartView组件带来了一个新的可视化伙伴——ScatterRangeBarSeries。此系列类型允许您创建在水平轴和垂直轴上都具有数值范围的条形。但最重要的是,它允许我们创建直方图。

ScatterRangeBarSeries帮助文档将指导您如何设置范围柱图,但最简单的方法是使用ChartHistogramSource。

下一个示例演示如何设置一个数字集合,并将ChartHistogramSource指定为ScatterRangeBarSeries元素的ItemsSource。

开始编码
<Grid>
<telerik:ChartHistogramSource x:Name="histogramSource" Interval="3"/>
<telerik:RadCartesianChart Palette="Windows11">
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="XY"/>
</telerik:RadCartesianChart.Grid>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis />
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:LinearAxis MajorStep="{Binding ElementName=histogramSource, Path=ActualInterval}"
Maximum="24"/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:ScatterRangeBarSeries ItemsSource="{Binding ElementName=histogramSource}"/>
</telerik:RadCartesianChart>
</Grid>


public MainWindow()
{
InitializeComponent();
var rnd = new Random(123456);
var caseResolutionTimes = new ObservableCollection<double>();
for (int resolutionTime = 0; resolutionTime <= 24; resolutionTime++)
{
int randomNumberOfCases = resolutionTime <= 8 || resolutionTime >= 15 ? rnd.Next(1, 5) : rnd.Next(1, 12);
for (int k = 0; k < randomNumberOfCases; k++)
{
caseResolutionTimes.Add(resolutionTime);
}

}
this.histogramSource.ItemsSource = caseResolutionTimes;
}

Picture showing the getting started example of RadChartView's ScatterRangeBarSeries for WPF

如果未设置Interval属性,则自动计算bins间隔。这要归功于Scott标准参考规则公式。

交换坐标轴

也许标准的竖条形对您来说还不够,您希望稍微改变一下可视化效果?然后,改变这些条形的方向。这是通过ChartHistogramSource的Orientation属性完成的。将其设置为Vertical将在垂直轴上应用间隔值,从而使条形图水平方向。

<telerik:ChartHistogramSource x:Name="histogramSource" Orientation="Vertical">

Picture showing RadChartView's ScatterRangeBarSeries with bars placed on the vertical axis

聚合函数

如果您需要调整每个条的结果,而不是仅仅计算其中的记录,那么聚合函数就派上了用场。您可以在一组内置函数之间进行选择,例如average, min, max, sum等。替换该函数需要重写ChartHistogramSource的GetValueAggregateFunction方法。

public class CustomChartHistogramSource : ChartHistogramSource
{
protected override ChartAggregateFunction GetValueAggregateFunction()
{
return new ChartAverageFunction();
}
}
不同大小的直方图

这是较为小众用到的场景,但如果您需要它,Telerik是提供的。在这种情况下,您不能使用ChartHistogramSource,但是您可以稍微调整ScatterRangeBarSeries。您可以手动设置所有ScatterRangeDataPoint属性,可以在Telerik WPF Demos应用程序的直方图示例中探索这种方法。

Picture showing RadChartView's ScatterRangeBarSeries for WPF and different sized bars


Telerik_KendoUI产品技术交流群:726377843    欢迎一起进群讨论

慧都315活动正式开启

标签:

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


为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP