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

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

什么是直方圖?

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

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

補(bǔ)充知識(shí)：

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

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

下一個(gè)示例演示如何設(shè)置一個(gè)數(shù)字集合，并將ChartHistogramSource指定為ScatterRangeBarSeries元素的ItemsSource。

開(kāi)始編碼

<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屬性，則自動(dòng)計(jì)算bins間隔。這要?dú)w功于Scott標(biāo)準(zhǔn)參考規(guī)則公式。

交換坐標(biāo)軸

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

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

聚合函數(shù)

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

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

不同大小的直方圖

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

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