UWP 使用Telerik Chart控件
Telerik开发的chart功能异常强大 用户可以自行在商店搜索“UI for uwp demos”。
下面我就结合以下我的软件,来说明一下饼状图的实现。
看看效果:
先看一下Xaml代码实现
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Hidden">
<StackPanel x:Name="spBalanceAndChart" Margin="0,17,0,0" CornerRadius="7" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock x:Uid="tbChartHeader" x:Name="tbChartHeader" Text="ChartHeader" FontSize="30" FontWeight="ExtraBold" HorizontalAlignment="Stretch" TextAlignment="Center" TextWrapping="Wrap"/> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<chart:RadPieChart x:Name="chart" ClipToBounds="False" PaletteName="DefaultDark" Margin="38,38,38,0" Height="270" Width="270">
<chart:DoughnutSeries x:Name="MyDoughnutSeries" ShowLabels="True" >
<chart:DoughnutSeries.ValueBinding>
<chart:PropertyNameDataPointBinding PropertyName="Value"/>
</chart:DoughnutSeries.ValueBinding>
<chart:DoughnutSeries.LegendTitleBinding >
<chart:PropertyNameDataPointBinding PropertyName="Title"/>
</chart:DoughnutSeries.LegendTitleBinding>
</chart:DoughnutSeries>
</chart:RadPieChart> <primitives:RadLegendControl LegendProvider="{Binding ElementName=chart}" VerticalAlignment="Center">
<primitives:RadLegendControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</primitives:RadLegendControl.ItemsPanel>
<primitives:RadLegendControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Ellipse Fill="{Binding Fill}" Stroke="{Binding Stroke}"
StrokeThickness="1" Width="10" Height="10"/>
<TextBlock Text="{Binding Title}" Foreground="{Binding Fill}"
Margin="10,0,0,0" FontStyle="Italic"/>
</StackPanel>
</DataTemplate>
</primitives:RadLegendControl.ItemTemplate>
</primitives:RadLegendControl> </StackPanel>
</StackPanel>
</ScrollViewer>
解释一下,之所以在最外层用ScrollViewer包一下,是因为怕有些设备宽高不够用、或者用户将窗口调节的非常小,导致不能查看的情况。最好把滚动条隐藏了,这样好看。
开头引用xmlns:chart="using:Telerik.UI.Xaml.Controls.Chart"
后台,我的操作逻辑是,通过上一篇的签到数据,选择一行数据,然后生成累计的签到图。
所以先写一个LoadData的函数
private void LoadChartData(SignInSummaryData sid)
{
var chartItems = new List<ChartDataPoint>();
if ((Application.Current as App).strCurrentLanguage.ToLower().Equals("zh-cn"))
{
// Create a new chart data point for each value you want in the PieSeries
var sliceOne = new ChartDataPoint { Value = sid.SignInAttendanceRate, Title = "到席" };
var sliceTwo = new ChartDataPoint { Value = - sid.SignInAttendanceRate, Title = "缺席" }; // Add those items to the list
chartItems.Add(sliceOne);
chartItems.Add(sliceTwo); tbChartHeader.Text = sid.Name + "(" + sid.PersonId + ")" + sid.SignInItemName + sid.SignInItemTimes + "签到情况";
}
else
{
// Create a new chart data point for each value you want in the PieSeries
var sliceOne = new ChartDataPoint { Value = sid.SignInAttendanceRate, Title = "Attendance" };
var sliceTwo = new ChartDataPoint { Value = - sid.SignInAttendanceRate, Title = "Absence" }; // Add those items to the list
chartItems.Add(sliceOne);
chartItems.Add(sliceTwo); tbChartHeader.Text = sid.Name + "(" + sid.PersonId + ") " + sid.SignInItemName + sid.SignInItemTimes + " Attendance Chart";
} MyDoughnutSeries.ItemsSource = chartItems; }
然后在 OnNavigatedTo 中调用:
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
SignInSummaryData sid = null;
if (e.Parameter != null)
{
sid = e.Parameter as SignInSummaryData;
LoadChartData(sid);
}
}
所以和上一篇文章联系气来,连贯的操作gif如下图
UWP 使用Telerik Chart控件的更多相关文章
- UWP 使用Telerik Grid控件
还是老规矩,看一下最终效果. 数据是从SQLite中读取,然后绑定到DataGrid中显示的. 先看一下XAML <grid:RadDataGrid Grid.Row="1" ...
- 常量,字段,构造方法 调试 ms 源代码 一个C#二维码图片识别的Demo 近期ASP.NET问题汇总及对应的解决办法 c# chart控件柱状图,改变柱子宽度 使用C#创建Windows服务 C#服务端判断客户端socket是否已断开的方法 线程 线程池 Task .NET 单元测试的利剑——模拟框架Moq
常量,字段,构造方法 常量 1.什么是常量 常量是值从不变化的符号,在编译之前值就必须确定.编译后,常量值会保存到程序集元数据中.所以,常量必须是编译器识别的基元类型的常量,如:Boolean ...
- 这可能是目前最轻量级、最支持MVVM、可定制性最高的开源Chart控件!
由于项目中经常用到Series Chart,而目前市面又实在找不到既支持MVVM,又轻量级的开源Chart控件,于是干脆就花了两周时间随手写了一个.昨天感觉还比较满意,就发布到了Github上:htt ...
- Win10 UWP开发系列——开源控件库:UWPCommunityToolkit
在开发应用的过程中,不可避免的会使用第三方类库.之前用过一个WinRTXamlToolkit.UWP,现在微软官方发布了一个新的开源控件库—— UWPCommunityToolkit 项目代码托管在G ...
- ASP.NET中的chart控件绑定SQL Server数据库
网上很多的chart控件的实例都没有绑定数据库,经过一番摸索后,终于实现了chart控件绑定数据库. 首先,在Visual Studio中建立一个网站,新建一个WebForm项目,名称为ChartTe ...
- C# Chart控件,chart、Series、ChartArea曲线图绘制的重要属性
http://blog.sina.com.cn/s/blog_621e24e20101cp64.html 为避免耽误不喜欢这种曲线图效果的亲们的时间,先看一下小DEMO效果图: 先简单说一下,从图中可 ...
- 【Telerik】<telerik:RadGridView/>控件的使用
学习Telerik第三方控件中的WPF时,对于RadGridView控件做的一些记录. AutoGenerateColumns:启动时是否生成列 ShowGroupPanel:是否显示表格的分组名称 ...
- javascript曲线图和面积图Line & Area chart控件功能及下载
Line & Area chart 控件是一款新型的.可用性极强的曲线图和面积图产品.一个您网站的访问者可以放大他感兴趣的一段区域,打开和关闭数值气球,并可显示和隐藏图表.您能创建简单.堆积. ...
- Chart控件,把Y轴设置成百分比
这次所有属性设置都用代码(就当整理便于以后查询). 在窗体放置一个Chart控件,未做任何设置:然后编写代码: //设置 chart2.Legends[ ].Enabled = false;//不显示 ...
随机推荐
- 将Word表格中单元格中的文字替换成对应的图片
示例 原文件结构: 替换后文档结构: 软件截图: 代码: using System;using System.Collections.Generic;using System.ComponentMod ...
- 对于ArrayList中的泛型进行分析
package cn.lonecloud.reflect; import java.lang.reflect.Method; import java.util.ArrayList; public cl ...
- 未找到与命令“dotnet-ef”匹配的可执行文件
在命令行里面执行操作的时候,报错了,网上找了一下原因 在报错的类库里面的xxx.csproj文件里面的ItemGroup里面加上一句 <DotNetCliToolReference Includ ...
- iOS实现从服务器请求json数据并转化成NSDictionary
NSURL *url = [NSURL URLWithString:URL]; NSURLRequest *request = [NSURLRequest requestWithURL:url cac ...
- 2道acm简单题(2010):1.猜数字游戏;2.字符串提取数字并求和;
//第一题是猜数字的游戏.//题目:随即产生一个3位的正整数,让你进行猜数字,//如果猜小了,输出:"猜小了,请继续".//如果猜大了,输出:"猜大了,请继续" ...
- Win10 部署 依赖 NET3.5 项目,报错 无法安装 NET3.5 ,该如何解决?
下载 NetFx3.cab Cab 安装包 拷贝 NetFx3.cab 文件至 C:\Windows 目录 打开命令行窗口(管理员权限) 输入以下内容: dism /online /Enable-Fe ...
- 浏览器兼容的JS写法总结
一.元素查找问题 1. document.all[name] (1)现有问题:Firefox不支持document.all[name] (2)解决方法:使用getElementsByName( ...
- js数据类型的判断方法
判断js中的数据类型有一下几种方法:typeof.instanceof. constructor. prototype. $.type()/jquery.type(),接下来主要比较一下这几种方法的异 ...
- BIOS简介
BIOS简介: BIOS是英文"Basic Input Output System"的缩略词,直译过来后中文名称就是"基本输入输出系统".其实,它是一组固化到计 ...
- 用vs2013+velt-0.1.4进行嵌入式开发 进行海思平台 UBOOT 开发
1.1 什么是VELT VELT的全称是Visual EmbedLinuxTools,它是一个与visual gdb类似的visual studio插件,用以辅助完成Linux开发.利用这个插件 ...