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

简介: 首先,定义柱状图,并设置自定义的DataTemplate ...

首先,定义柱状图,并设置自定义的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+
扫一扫左侧的二维码(或者长按识别二维码),关注本人微信公共号,获取更多资源。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

目录
相关文章
|
存储 前端开发 Java
基于云计算的Java电子病历编辑器源码 (B/S)
EMR: 病历数据、控件数据、病历模板数据、同步数据、病历个人模板数据、病历质控数据
396 1
|
开发工具 C语言 Windows
【Qt 学习笔记】Qt 开发环境的搭建 | Qt 安装教程
【Qt 学习笔记】Qt 开发环境的搭建 | Qt 安装教程
1633 0
|
6月前
|
固态存储 IDE 开发工具
电脑无法识别固态硬盘怎么办?
本文详解固态硬盘(SSD)无法被电脑识别的常见问题及解决方法。涵盖硬件连接、BIOS设置、系统识别、驱动安装等方面,适用于新手与老用户。分析四种常见识别失败情况,并提供排查步骤与解决方案,助你快速定位问题并修复。
Qt绘图(线条、椭圆、矩形、图片滚动)
Qt绘图(线条、椭圆、矩形、图片滚动)
1049 3
|
机器学习/深度学习 JSON 算法
实例分割笔记(一): 使用YOLOv5-Seg对图像进行分割检测完整版(从自定义数据集到测试验证的完整流程)
本文详细介绍了使用YOLOv5-Seg模型进行图像分割的完整流程,包括图像分割的基础知识、YOLOv5-Seg模型的特点、环境搭建、数据集准备、模型训练、验证、测试以及评价指标。通过实例代码,指导读者从自定义数据集开始,直至模型的测试验证,适合深度学习领域的研究者和开发者参考。
5729 3
实例分割笔记(一): 使用YOLOv5-Seg对图像进行分割检测完整版(从自定义数据集到测试验证的完整流程)
|
JavaScript Java CDN
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
10812 1
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
|
XML 前端开发 JavaScript
【原生HTML+SpringBoot】电子病历编辑器源码
【原生HTML+SpringBoot】电子病历编辑器源码
721 0
|
搜索推荐 Java
完整版Java电子病历EMR编辑器系统源码
完整版Java电子病历EMR编辑器系统源码
667 0
|
监控
电子病历编辑器源码 病历管理数据库系统源码
电子病历系统主要面向医疗机构医生、护士,提供对住院病人的电子病历书写、保存、修改、打印等功能。本系统基于云端SaaS服务方式,采用B/S(Browser/Server)架构提供,通过浏览器方式访问和使用系统功能,提供电子病历在线制作、管理和使用的一体化电子病历解决方案
467 0
电子病历编辑器源码 病历管理数据库系统源码
|
前端开发 JavaScript 搜索推荐
Java电子病历编辑器源码,B/S电子病历编辑器源码
电子病历编辑器,简称EMRE(EMR Editor),是电子病历系统的核心关键基础技术。 B/S电子病历编辑器源码,带演示,自主研发,官方正版授权
338 0