WPF、Silverlight项目中使用柱状图、饼状图、折线图
在开发的过程中,可能会遇到柱状图、饼状图、折线图来更好的显示数据,最近整理了一下,遂放出来望需要的朋友可以参考。本文仅仅是简单显示,如需复杂显示效果请参考官网代码示例。----本文代码使用WPF,Silverlight类似代码,使用第三方wpf_visifire_v5.1.2-0_trial控件。
后续会放上Html5示例。
代码下载地址:代码下载
先放上一组截图吧:
公共数据:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | private List< string > strListx = new List< string >() { "苹果" , "樱桃" , "菠萝" , "香蕉" , "榴莲" , "葡萄" , "桃子" , "猕猴桃" }; private List< string > strListy = new List< string >() { "13" , "75" , "60" , "38" , "97" , "22" , "39" , "80" }; private List<DateTime> LsTime = new List<DateTime>() { new DateTime(2012,1,1), new DateTime(2012,2,1), new DateTime(2012,3,1), new DateTime(2012,4,1), new DateTime(2012,5,1), new DateTime(2012,6,1), new DateTime(2012,7,1), new DateTime(2012,8,1), new DateTime(2012,9,1), new DateTime(2012,10,1), new DateTime(2012,11,1), new DateTime(2012,12,1), }; private List< string > cherry = new List< string >() { "33" , "75" , "60" , "98" , "67" , "88" , "39" , "45" , "13" , "22" , "45" , "80" }; private List< string > pineapple = new List< string >() { "13" , "34" , "38" , "12" , "45" , "76" , "36" , "80" , "97" , "22" , "76" , "39" }; |
柱状图:

public void CreateChartColumn(string name, List<string> valuex, List<string> valuey) { //创建一个图标 Chart chart = new Chart(); //设置图标的宽度和高度 chart.Width = 580; chart.Height = 380; chart.Margin = new Thickness(100, 5, 10, 5); //是否启用打印和保持图片 chart.ToolBarEnabled = false; //设置图标的属性 chart.ScrollingEnabled = false;//是否启用或禁用滚动 chart.View3D = true;//3D效果显示 //创建一个标题的对象 Title title = new Title(); //设置标题的名称 title.Text = Name; title.Padding = new Thickness(0, 10, 5, 0); //向图标添加标题 chart.Titles.Add(title); Axis yAxis = new Axis(); //设置图标中Y轴的最小值永远为0 yAxis.AxisMinimum = 0; //设置图表中Y轴的后缀 yAxis.Suffix = "斤"; chart.AxesY.Add(yAxis); // 创建一个新的数据线。 DataSeries dataSeries = new DataSeries(); // 设置数据线的格式 dataSeries.RenderAs = RenderAs.StackedColumn;//柱状Stacked // 设置数据点 DataPoint dataPoint; for (int i = 0; i < valuex.Count; i++) { // 创建一个数据点的实例。 dataPoint = new DataPoint(); // 设置X轴点 dataPoint.AxisXLabel = valuex[i]; //设置Y轴点 dataPoint.YValue = double.Parse(valuey[i]); //添加一个点击事件 dataPoint.MouseLeftButtonDown += new MouseButtonEventHandler(dataPoint_MouseLeftButtonDown); //添加数据点 dataSeries.DataPoints.Add(dataPoint); } // 添加数据线到数据序列。 chart.Series.Add(dataSeries); //将生产的图表增加到Grid,然后通过Grid添加到上层Grid. Grid gr = new Grid(); gr.Children.Add(chart); Simon.Children.Add(gr); }
饼状图:

public void CreateChartPie(string name, List<string> valuex, List<string> valuey) { //创建一个图标 Chart chart = new Chart(); //设置图标的宽度和高度 chart.Width = 580; chart.Height = 380; chart.Margin = new Thickness(100, 5, 10, 5); //是否启用打印和保持图片 chart.ToolBarEnabled = false; //设置图标的属性 chart.ScrollingEnabled = false;//是否启用或禁用滚动 chart.View3D = true;//3D效果显示 //创建一个标题的对象 Title title = new Title(); //设置标题的名称 title.Text = name; title.Padding = new Thickness(0, 10, 5, 0); //向图标添加标题 chart.Titles.Add(title); //Axis yAxis = new Axis(); ////设置图标中Y轴的最小值永远为0 //yAxis.AxisMinimum = 0; ////设置图表中Y轴的后缀 //yAxis.Suffix = "斤"; //chart.AxesY.Add(yAxis); // 创建一个新的数据线。 DataSeries dataSeries = new DataSeries(); // 设置数据线的格式 dataSeries.RenderAs = RenderAs.Pie;//柱状Stacked // 设置数据点 DataPoint dataPoint; for (int i = 0; i < valuex.Count; i++) { // 创建一个数据点的实例。 dataPoint = new DataPoint(); // 设置X轴点 dataPoint.AxisXLabel = valuex[i]; dataPoint.LegendText = "##" + valuex[i]; //设置Y轴点 dataPoint.YValue = double.Parse(valuey[i]); //添加一个点击事件 dataPoint.MouseLeftButtonDown += new MouseButtonEventHandler(dataPoint_MouseLeftButtonDown); //添加数据点 dataSeries.DataPoints.Add(dataPoint); } // 添加数据线到数据序列。 chart.Series.Add(dataSeries); //将生产的图表增加到Grid,然后通过Grid添加到上层Grid. Grid gr = new Grid(); gr.Children.Add(chart); Simon.Children.Add(gr); }
折线图:

public void CreateChartSpline(string name, List<DateTime> lsTime, List<string> cherry, List<string> pineapple) { //创建一个图标 Chart chart = new Chart(); //设置图标的宽度和高度 chart.Width = 580; chart.Height = 380; chart.Margin = new Thickness(100, 5, 10, 5); //是否启用打印和保持图片 chart.ToolBarEnabled = false; //设置图标的属性 chart.ScrollingEnabled = false;//是否启用或禁用滚动 chart.View3D = true;//3D效果显示 //创建一个标题的对象 Title title = new Title(); //设置标题的名称 title.Text = name; title.Padding = new Thickness(0, 10, 5, 0); //向图标添加标题 chart.Titles.Add(title); //初始化一个新的Axis Axis xaxis = new Axis(); //设置Axis的属性 //图表的X轴坐标按什么来分类,如时分秒 xaxis.IntervalType = IntervalTypes.Months; //图表的X轴坐标间隔如2,3,20等,单位为xAxis.IntervalType设置的时分秒。 xaxis.Interval = 1; //设置X轴的时间显示格式为7-10 11:20 xaxis.ValueFormatString = "MM月"; //给图标添加Axis chart.AxesX.Add(xaxis); Axis yAxis = new Axis(); //设置图标中Y轴的最小值永远为0 yAxis.AxisMinimum = 0; //设置图表中Y轴的后缀 yAxis.Suffix = "斤"; chart.AxesY.Add(yAxis); // 创建一个新的数据线。 DataSeries dataSeries = new DataSeries(); // 设置数据线的格式。 dataSeries.LegendText = "樱桃"; dataSeries.RenderAs = RenderAs.Spline;//折线图 dataSeries.XValueType = ChartValueTypes.DateTime; // 设置数据点 DataPoint dataPoint; for (int i = 0; i < lsTime.Count; i++) { // 创建一个数据点的实例。 dataPoint = new DataPoint(); // 设置X轴点 dataPoint.XValue = lsTime[i]; //设置Y轴点 dataPoint.YValue = double.Parse(cherry[i]); dataPoint.MarkerSize = 8; //dataPoint.Tag = tableName.Split('(')[0]; //设置数据点颜色 // dataPoint.Color = new SolidColorBrush(Colors.LightGray); dataPoint.MouseLeftButtonDown += new MouseButtonEventHandler(dataPoint_MouseLeftButtonDown); //添加数据点 dataSeries.DataPoints.Add(dataPoint); } // 添加数据线到数据序列。 chart.Series.Add(dataSeries); // 创建一个新的数据线。 DataSeries dataSeriesPineapple = new DataSeries(); // 设置数据线的格式。 dataSeriesPineapple.LegendText = "菠萝"; dataSeriesPineapple.RenderAs = RenderAs.Spline;//折线图 dataSeriesPineapple.XValueType = ChartValueTypes.DateTime; // 设置数据点 DataPoint dataPoint2; for (int i = 0; i < lsTime.Count; i++) { // 创建一个数据点的实例。 dataPoint2 = new DataPoint(); // 设置X轴点 dataPoint2.XValue = lsTime[i]; //设置Y轴点 dataPoint2.YValue = double.Parse(pineapple[i]); dataPoint2.MarkerSize = 8; //dataPoint2.Tag = tableName.Split('(')[0]; //设置数据点颜色 // dataPoint.Color = new SolidColorBrush(Colors.LightGray); dataPoint2.MouseLeftButtonDown += new MouseButtonEventHandler(dataPoint_MouseLeftButtonDown); //添加数据点 dataSeriesPineapple.DataPoints.Add(dataPoint2); } // 添加数据线到数据序列。 chart.Series.Add(dataSeriesPineapple); //将生产的图表增加到Grid,然后通过Grid添加到上层Grid. Grid gr = new Grid(); gr.Children.Add(chart); Simon.Children.Add(gr); }
分类:
WPF
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)