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

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

什么是直方圖?

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

標準條形圖和直方圖之間的區別在于，條形圖使用類別，而直方圖的每個條的寬度都有一個數字范圍。

補充知識：

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;
}

如果未設置Interval屬性，則自動計算bins間隔。這要歸功于Scott標準參考規則公式。

交換坐標軸

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

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

聚合函數

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

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

不同大小的直方圖

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

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論