【Telerik控件学习】-制作3D效果的柱状图(ChartView)

首先,定义柱状图,并设置自定义的DataTemplate

        <telerik:RadCartesianChart >
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis Minimum="0"/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:CategoricalAxis IsInverse="True" />
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="X" />
            </telerik:RadCartesianChart.Grid>
            <telerik:BarSeries ItemsSource="{Binding ChartDatas}" CategoryBinding="Name" ValueBinding="Value" ShowLabels="True" IsSelected="True" >
                <telerik:BarSeries.PointTemplate>
                    <DataTemplate>
                        <kpiCtrl:Histogram CategoryName="{Binding Converter={StaticResource histogramColorConverter}}"/>
                    </DataTemplate>
                </telerik:BarSeries.PointTemplate>
                <telerik:BarSeries.LabelDefinitions>
                    <telerik:ChartSeriesLabelDefinition Format="{}{0:0.00}" HorizontalAlignment="Center" VerticalAlignment="Center" DefaultVisualStyle="{StaticResource barSeriesLabelStyle}" />
                </telerik:BarSeries.LabelDefinitions>
            </telerik:BarSeries>
        </telerik:RadCartesianChart>

View Code

接着自定义用户控件:Histogram,CategoryName属性用来区分不同属性名显示不同色系

    public partial class Histogram : UserControl
    {
        public Histogram()
        {
            InitializeComponent();
        }

        public string CategoryName
        {
            get { return (string)GetValue(CategoryNameProperty); }
            set { SetValue(CategoryNameProperty, value); }
        }

        public static readonly DependencyProperty CategoryNameProperty =
            DependencyProperty.Register("CategoryName", typeof(string), typeof(Histogram), new PropertyMetadata(null,new PropertyChangedCallback(CategoryNameChanged)));

        private static void CategoryNameChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var obj = d as Histogram;
            if (obj != null && obj.CategoryName == "限值")
            {
               obj.rect1.Fill=new SolidColorBrush(Color.FromRgb(246,188,16));
               obj.rect2.Fill = new SolidColorBrush(Color.FromRgb(194, 153, 11));
               obj.rect3.Fill = new SolidColorBrush(Color.FromRgb(158, 123, 3));
            }
            else
            {
                obj.rect1.Fill = new SolidColorBrush(Color.FromRgb(175, 216, 248));
                obj.rect2.Fill = new SolidColorBrush(Color.FromRgb(135, 173, 196));
                obj.rect3.Fill = new SolidColorBrush(Color.FromRgb(111, 139, 161));
            }
        }
    }

View Code

<UserControl x:Class="RunTime.WPF.UserCtrl.KpiCtrl.Histogram"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid Height="80">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="20"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>
        <Rectangle Fill="#AFD8F8" Grid.Column="0" Grid.Row="0" x:Name="rect1"/>
        <Rectangle Fill="#87ADC4" Grid.Column="1" Grid.Row="0" x:Name="rect2">
            <Rectangle.RenderTransform>
                <SkewTransform AngleX="0" AngleY="45"></SkewTransform>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle Fill="#6F8BA1"  Grid.Row="1" Grid.Column="0" x:Name="rect3">
            <Rectangle.RenderTransform>
                <SkewTransform AngleX="45" AngleY="0"></SkewTransform>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
</UserControl>

View Code

别忘了把将CategoricalDataPoint中的Category属性转换成绑定的属性

    /// <summary>
    /// 柱图Category转换
    /// </summary>
    public class HistogramColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var cat = value as CategoricalDataPoint;
            if (cat != null) return cat.Category.ToString();
            return string.Empty;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

View Code

完工,看看3D柱图效果

 

 

文章作者：原子蛋
文章出处：https://www.cnblogs.com/lizzie-xhu/
个人网站：https://www.lancel0t.cn/
个人博客：https://blog.lancel0t.cn/
微信公众号：原子蛋Live+
扫一扫左侧的二维码（或者长按识别二维码），关注本人微信公共号，获取更多资源。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。