Telerik UI for WPF擁有超過100個控件來創(chuàng)建美觀、高性能的桌面應(yīng)用程序，同時還能快速構(gòu)建企業(yè)級辦公WPF應(yīng)用程序。UI for WPF支持MVVM、觸摸等，創(chuàng)建的應(yīng)用程序可靠且結(jié)構(gòu)良好，非常容易維護(hù)，其直觀的API將無縫地集成Visual Studio工具箱中。

Telerik UI for WPF控件的RadChartView組件能夠使您生成美觀的圖表可視化——點(diǎn)、條、線等等。本文將介紹新的直方圖來實(shí)現(xiàn)數(shù)據(jù)可視化，你可以清楚地看到數(shù)據(jù)的峰值在哪里。

什么是直方圖?

直方圖是連續(xù)的條形圖，每個條形的寬度在水平軸上有一個含義。最常見的是，直方圖用于顯示頻率分布。

標(biāo)準(zhǔn)條形圖和直方圖之間的區(qū)別在于，條形圖使用類別，而直方圖的每個條的寬度都有一個數(shù)字范圍。

補(bǔ)充知識：

Telerik UI for WPF R1 2023為RadChartView組件帶來了一個新的可視化伙伴——ScatterRangeBarSeries。此系列類型允許您創(chuàng)建在水平軸和垂直軸上都具有數(shù)值范圍的條形。但最重要的是，它允許我們創(chuàng)建直方圖。

ScatterRangeBarSeries幫助文檔將指導(dǎo)您如何設(shè)置范圍柱圖，但最簡單的方法是使用ChartHistogramSource。

下一個示例演示如何設(shè)置一個數(shù)字集合，并將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;
}

如果未設(shè)置Interval屬性，則自動計算bins間隔。這要?dú)w功于Scott標(biāo)準(zhǔn)參考規(guī)則公式。

交換坐標(biāo)軸

也許標(biāo)準(zhǔn)的豎條形對您來說還不夠，您希望稍微改變一下可視化效果?然后，改變這些條形的方向。這是通過ChartHistogramSource的Orientation屬性完成的。將其設(shè)置為Vertical將在垂直軸上應(yīng)用間隔值，從而使條形圖水平方向。

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

聚合函數(shù)

如果您需要調(diào)整每個條的結(jié)果，而不是僅僅計算其中的記錄，那么聚合函數(shù)就派上了用場。您可以在一組內(nèi)置函數(shù)之間進(jìn)行選擇，例如average, min, max, sum等。替換該函數(shù)需要重寫ChartHistogramSource的GetValueAggregateFunction方法。

public class CustomChartHistogramSource : ChartHistogramSource
{
protected override ChartAggregateFunction GetValueAggregateFunction()
{
return new ChartAverageFunction();
}
}

不同大小的直方圖

這是較為小眾用到的場景，但如果您需要它，Telerik是提供的。在這種情況下，您不能使用ChartHistogramSource，但是您可以稍微調(diào)整ScatterRangeBarSeries。您可以手動設(shè)置所有ScatterRangeDataPoint屬性，可以在Telerik WPF Demos應(yīng)用程序的直方圖示例中探索這種方法。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論