使用Silverlight Toolkit绘制图表(上)--柱状图
然后我们使用WCF方式发布数据源信息,这里我们创建一个"Silverlight功能的WCF",并将其命名为: DataService.svc
{
public int EmployeeID { set; get; }
public string EmployeeName { set; get; }
public int Salary { set; get; }
public int[] Cost { get; set; }
public string City { set; get; }
}
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class DataService
{
[OperationContract]
public List<EmployeeInfo> GetEmployeeList()
{
List<EmployeeInfo> employeeList = new List<EmployeeInfo>();
employeeList.Add(new EmployeeInfo { EmployeeID = 1, EmployeeName = "张三", Salary = 1000, City = "合肥" });
employeeList.Add(new EmployeeInfo { EmployeeID = 2, EmployeeName = "李四", Salary = 1500, City = "天津" });
employeeList.Add(new EmployeeInfo { EmployeeID = 3, EmployeeName = "王五", Salary = 2000, City = "上海" });
employeeList.Add(new EmployeeInfo { EmployeeID = 4, EmployeeName = "赵六", Salary = -800, City = "北京" });
employeeList.Add(new EmployeeInfo { EmployeeID = 5, EmployeeName = "尤七", Salary = 2100, City = "武汉" });
employeeList.Add(new EmployeeInfo { EmployeeID = 6, EmployeeName = "马八", Salary = 2300, City = "海口" });
return employeeList;
}
}
下面我们往该Silverlight应用的Xaml文件上拖(或手工声明)一个Chart控件,如下:
我们看到在该控件上我们指定了Title信息,该信息会显示在图表的最上方。
下面开始编写CS代码。
1.首先我们向该Silverlight应用中添加对刚才声明的WCF的引用。
2.使用WCF生成的客户端类来获取相应的数据源,代码如下:
{
dataServiceClient.GetEmployeeListCompleted += new EventHandler<GetEmployeeListCompletedEventArgs>(dataServiceClient_GetEmployeeListCompleted);
dataServiceClient.GetEmployeeListAsync();
}
{
ObservableCollection<EmployeeInfo> employeeList = e.Result;
Action<Chart> chartModifier = (chart) =>
{
Axis dateAxis = new Axis { Orientation = AxisOrientation.Horizontal, Title = "雇员名称", FontStyle = FontStyles.Normal, FontSize = 12f, ShowGridLines = true};
EmployeeChart.Axes.Add(dateAxis);
Axis valueAxis = new Axis { Orientation = AxisOrientation.Vertical, Title = "薪水", Minimum = -1000, Maximum = 3000, ShowGridLines = true};
EmployeeChart.Axes.Add(valueAxis);
};
chartModifier(EmployeeChart);
ColumnSeries series = new ColumnSeries();
series.ItemsSource = employeeList;
series.IndependentValueBinding = new System.Windows.Data.Binding("EmployeeName");
series.DependentValueBinding = new System.Windows.Data.Binding("Salary");
series.Title = "薪水";
EmployeeChart.Series.Add(series);
}
在上面的代码中我们创建了Axis对象用以将X,Y轴的描述信息绑定到指定的图形控件上,然后将我们的指定数据源绑定到该图形控件的ItemsSource属性上,最后再绑定两个座标轴要显示的相应数据:
Y轴: series.DependentValueBinding = new System.Windows.Data.Binding("Salary");
下面我们来看一下最终的显示效果,如下图所示:
大家看到,在Y轴上我们既显示了正轴也显示了负轴,这就是通过Minimum = -1000, Maximum = 3000这一行设置实现的。
还不错了,到这里我们只是简要的领略了一个图形控件的基本功能。接着我们再了解一下它还有那些更高级的使用技巧。
public List<EmployeeInfo> GetEmployeeDynamicList()
{
Random random = new Random();
List<EmployeeInfo> employeeList = new List<EmployeeInfo>();
employeeList.Add(new EmployeeInfo { EmployeeID = 1, EmployeeName = "张三", Salary = random.Next(500, 3000), City = "合肥" });
employeeList.Add(new EmployeeInfo { EmployeeID = 2, EmployeeName = "李四", Salary = random.Next(500, 3000), City = "天津" });
employeeList.Add(new EmployeeInfo { EmployeeID = 3, EmployeeName = "王五", Salary = random.Next(500, 3000), City = "上海" });
employeeList.Add(new EmployeeInfo { EmployeeID = 4, EmployeeName = "赵六", Salary = random.Next(500, 3000), City = "北京" });
employeeList.Add(new EmployeeInfo { EmployeeID = 5, EmployeeName = "尤七", Salary = random.Next(500, 3000), City = "武汉" });
employeeList.Add(new EmployeeInfo { EmployeeID = 6, EmployeeName = "马八", Salary = random.Next(500, 3000), City = "海口" });
return employeeList;
}
大家看到,这里使用了Random来模拟一个动态数据源信息,其生成的随机数介于500-3000之间,那么接下来,我们再Silverlight的XAML上创建这样一个Chart对象,用以显示该动态数据源信息,如下:
接着就是相应的CS代码了,这里为了方便起见,这里直接使用DispatcherTimer来定时(3秒)获取相应的数据源信息,如下:
{
System.Windows.Threading.DispatcherTimer dispatcherTimer = new System.Windows.Threading.DispatcherTimer();
dispatcherTimer.Interval = TimeSpan.FromSeconds(3);
dispatcherTimer.Tick += delegate
{
dataServiceClient.GetEmployeeDynamicListCompleted += new EventHandler<GetEmployeeDynamicListCompletedEventArgs>(dataServiceClient_GetEmployeeDynamicListCompleted);
dataServiceClient.GetEmployeeDynamicListAsync();
};
dispatcherTimer.Start();
}
接着就是初始化相应的图形控件并绑定相应的数据源了,代码与上面的CS代码相似,如下:
{
ObservableCollection<EmployeeInfo> employeeList = e.Result;
DynamicEmployeeChart.Axes.Clear();
DynamicEmployeeChart.Series.Clear();
Action<Chart> chartModifier = (chart) =>
{
Axis dateAxis = new Axis { Orientation = AxisOrientation.Horizontal, Title = "雇员名称", FontStyle = FontStyles.Normal, FontSize = 12f, ShowGridLines = true };
DynamicEmployeeChart.Axes.Add(dateAxis);
Axis valueAxis = new Axis { Orientation = AxisOrientation.Vertical, Title = "薪水", Minimum = 0, Maximum = 3000, ShowGridLines = true };
DynamicEmployeeChart.Axes.Add(valueAxis);
};
chartModifier(DynamicEmployeeChart);
ColumnSeries series = new ColumnSeries();
series.ItemsSource = employeeList;
series.IndependentValueBinding = new System.Windows.Data.Binding("EmployeeName");
series.DependentValueBinding = new System.Windows.Data.Binding("Salary");
series.Title = "薪水";
DynamicEmployeeChart.Series.Add(series);
}
然后是三秒之后的运行截图:
到这里还不算完,因为该控件还支持数据的分组显示,比如说如果我们的数据中有数组类型的字段信息,该控件是以数组为单位(数组长度就是图表的列信息)。这个有些难以理解,下面就以一个示例来加以说明。
首先,我们要创建一个具有数组类型字段的数据源,如下:
public List<EmployeeInfo> GetMultiSeriesEmployeeList()
{
List<EmployeeInfo> employeeList = new List<EmployeeInfo>();
employeeList.Add(new EmployeeInfo { EmployeeID = 1, EmployeeName = "张三", Salary = 1000, Cost = new int[] { 100, 160 } });
employeeList.Add(new EmployeeInfo { EmployeeID = 2, EmployeeName = "李四", Salary = 1500, Cost = new int[] { 260, 200 } });
employeeList.Add(new EmployeeInfo { EmployeeID = 3, EmployeeName = "王五", Salary = 2000, Cost = new int[] { 360, 330 } });
employeeList.Add(new EmployeeInfo { EmployeeID = 4, EmployeeName = "赵六", Salary = 800, Cost = new int[] { 160, 430 } });
employeeList.Add(new EmployeeInfo { EmployeeID = 5, EmployeeName = "尤七", Salary = 2100, Cost = new int[] { 560, 530 } });
employeeList.Add(new EmployeeInfo { EmployeeID = 6, EmployeeName = "马八", Salary = 2300, Cost = new int[] { 660, 600 } });
return employeeList;
}
首先在XAML中创建该图表控件,如下:
接着就是我们的CS代码了,首先是获取数据源:
{
dataServiceClient.GetMultiSeriesEmployeeListCompleted += new EventHandler<GetMultiSeriesEmployeeListCompletedEventArgs>(dataServiceClient_GetMultiSeriesEmployeeListCompleted);
dataServiceClient.GetMultiSeriesEmployeeListAsync();
}
{
ObservableCollection<EmployeeInfo> employeeList = e.Result;
Action<Chart> chartModifier = (chart) =>
{
Axis dateAxis = new Axis { Orientation = AxisOrientation.Horizontal, Title = "注 1:住房公积金 2:个人养老金", FontStyle = FontStyles.Normal, FontSize = 14f, ShowGridLines = true };
MultiSeries.Axes.Add(dateAxis);
Axis valueAxis = new Axis { Orientation = AxisOrientation.Vertical, Title = "税金", Minimum = 0, Maximum = 800, ShowGridLines = true };
MultiSeries.Axes.Add(valueAxis);
};
chartModifier(MultiSeries);
foreach (EmployeeInfo itemsSource in employeeList)
{
ColumnSeries series = new ColumnSeries();
series.ItemsSource = itemsSource.Cost;
series.DependentValueBinding = null;
series.IndependentValueBinding = null;
series.Title = itemsSource.EmployeeName + " ID:" + itemsSource.EmployeeID;
series.AnimationSequence = AnimationSequence.FirstToLast;
MultiSeries.Series.Add(series);
}
}
当我们在图表上单击鼠标时,显示效果如下:
等图表全被隐去时,这时我们再单击鼠标,图表会依次再显示出来。
除了数据动态加载,Chart还支持数据的静态绑定,如下面的XAML代码即是初始并绑定一个已存在的数据源:
<charting:Chart.Series>
<charting:ColumnSeries
Title="人口" AnimationSequence="FirstToLast"
ItemsSource="{Binding PugetSound, Source={StaticResource City}}"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Population}"/>
</charting:Chart.Series>
<charting:Chart.Axes>
<charting:Axis AxisType="Category" Title="城市" Orientation="Horizontal" FontStyle="Italic"/>
<charting:Axis AxisType="Linear" Title="人口" Orientation="Vertical" Minimum="0" Maximum="600000" Interval="100000" ShowGridLines="True" FontStyle="Italic"/>
</charting:Chart.Axes>
</charting:Chart>
而数据源是在程序中直接写死的,如下:
到这里,有关柱状图的主要功能介绍的差不多了,但如果开发过相应图表功能的朋友会发现,之前的DEMO显示的都是垂直的柱状图,但很多的网站上显示的都是水平方向的柱状图,比如说投票功能等,其实Chart实现这个功能非常简要,只要在我们原有的CS代码基础上做很少的改动即可实现,这里以上面的第一个DEMO为例,看一下如何进行改造:
{
ObservableCollection<EmployeeInfo> employeeList = e.Result;
Action<Chart> chartModifier = (chart) =>
{
Axis dateAxis = new Axis { Orientation = AxisOrientation.Vertical, Title = "雇员名称", FontStyle = FontStyles.Normal, FontSize = 12f, ShowGridLines = true };
EmployeeChart.Axes.Add(dateAxis);
Axis valueAxis = new Axis { Orientation = AxisOrientation.Horizontal, Title = "薪水", Minimum = -1000, Maximum = 3000, ShowGridLines = true};
EmployeeChart.Axes.Add(valueAxis);
};
chartModifier(EmployeeChart);
BarSeries series = new BarSeries();
series.ItemsSource = employeeList;
series.IndependentValueBinding = new System.Windows.Data.Binding("EmployeeName");
series.DependentValueBinding = new System.Windows.Data.Binding("Salary");
EmployeeChart.Series.Add(series);
}
在这里,我们看到了之前所设置的X,Y轴在AxisOrientation属性上被做了交换设置。而接着的ColumnSeries对象也被替换成了BarSeries。这样我们就完成了相应的改造(更多信息参见DEMO源码BarSample)。
好了,今天的内容就先到这里了,源码下载,请点击这里。
使用Silverlight Toolkit绘制图表(上)--柱状图相关推荐
- 用python绘制柱状图标题-使用Python绘制图表大全总结
在使用Python绘制图表前,我们需要先安装两个库文件numpy和matplotlib. Numpy是Python开源的数值计算扩展,可用来存储和处理大型矩阵,比Python自身数据结构要高效:mat ...
- 用g.raphael.js高速绘制饼图、柱状图、点状图、折线图(上)
首先介绍一下什么是g.raphael.这个又要说到什么是raphael.js.raphael是一个javascript库,可以用来跨浏览器绘制各种图形,只要是你想得到的图形都可以用raphael绘制出 ...
- [codeigniter]CI中使用pChart绘制图表,已测通过
因为一个codeigniter开发的项目上要用到图表.FusionChart是flash技术,在某些情况下可能造成无法使用(如ipad).因此不禁想起了之前用Pchart做的图表项目. 但是毕竟是在C ...
- Qt - QTChart绘制图表
文章目录 前言 准备工作 安装QChart组件 项目配置 主要组成部分 QChartView QChart 序列 坐标轴 图例 静态图表 动态图表 场景一 思路 效果 核心实现 场景二 思路 效果 核 ...
- WinForm DevExpress使用-(ChartControl控件绘制图表)
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
- python办公自动化(六)python-pptx创建PPT、操作幻灯片、文本框、绘制图表、插入图片、读取内容
python-pptx 在日常生活中经常使用到ppt来进行展示,可以使用python-pptx中的命令来操作ppt,通过代码进行创建.python-pptx是用于创建和更新PowerPoint文件的p ...
- python双柱状图与双折线图_如何绘制双轴柱状图和折线图?
如何绘制双轴柱状图和折线图? 答:第1步,先将数据作成如下表格. ××市2010--2014年农业灌溉用水有效利用系数 年份灌溉亩数(万亩)毛灌溉用水总量(万米3)净灌溉用水总量(万米3)灌溉水有效利 ...
- pygal绘制图表字体大小设置
<Python编程:从入门到实践>17.2.1节中绘制条形图"GitHub上受欢迎程度最高的Python项目",代码如下: #coding=gbk import req ...
- Qt:QtCharts绘制图表实时采集温度
目录 Qt Charts介绍 视图-QChartView 图表-QChart 系列-QAbstractSeries 坐标轴-QAbstractAxis 图例-Legend 创建GUI界面 界面布局 完 ...
最新文章
- 复数 Complex Number 教程
- Perl中的单行凝视和多行凝视
- 台湾大学林轩田机器学习基石课程学习笔记14 -- Regularization
- Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 4. 函数
- python pipeline框架_介绍Python的Django框架中的静态资源管理器django-pipeline
- 如何从JSF获取JSON响应?
- QuickPart应用系列
- node.js模块引擎
- 使用百度webuploader插件进行多文件类型分片上传实例
- 学习日报 day02 java的语法骨架 myeclipse编辑java代码
- Xgboost和lightgbm的区别
- 中国象棋棋谱大全之一
- 博客Typecho插件,Typecho采集发布插件大全
- 分布式系统漫谈【拾】_分布式事务一致性:阿里方案
- matlab 实验七,matlab 实验七 数字填图问题
- 绘制管理组织结构图方法介绍
- Lumen超全功能知识点来了,ue5初学者们必看
- Pandas str列内置方法
- Kotlin-简约之美-进阶篇(十):扩展函数和扩展属性
- 《设计模式之禅》-组合模式2
热门文章
- mysql command line client 目标不对_MySql轻松入门系列-第一站 从源码角度轻松认识mysql整体框架图...
- python语言能够整合各类程序代码-python语言概述
- oracle每一行的hash值,Hash分区表分区数与数据分布的测试
- centos7怎么安装中文环境支持包
- 调参必备--Grid Search网格搜索
- 人工智能的炒作_解密人工智能:是炒作还是我们期望太高
- CentOS中安装的Gitlab忘记管理员密码怎样重置密码
- Openlayers下载与加载geoserver的wms服务显示地图
- RE:大家说说开发的时候类名和文件名一般是怎么规范的?
- git log 获取构建时间_Docker 运行 Jenkins 自动化构建 .NET Core 项目