正文
WPF、Silverlight项目中使用柱状图、饼状图、折线图
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在开发的过程中，可能会遇到柱状图、饼状图、折线图来更好的显示数据，最近整理了一下，遂放出来望需要的朋友可以参考。本文仅仅是简单显示，如需复杂显示效果请参考官网代码示例。----本文代码使用WPF，Silverlight类似代码，使用第三方wpf_visifire_v5.1.2-0_trial控件。
后续会放上Html5示例。
代码下载地址：代码下载
先放上一组截图吧：
公共数据：
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 = ;
chart.Height = ;
chart.Margin = new Thickness(, , , );
//是否启用打印和保持图片
chart.ToolBarEnabled = false; //设置图标的属性
chart.ScrollingEnabled = false;//是否启用或禁用滚动
chart.View3D = true;//3D效果显示 //创建一个标题的对象
Title title = new Title(); //设置标题的名称
title.Text = Name;
title.Padding = new Thickness(, , , ); //向图标添加标题
chart.Titles.Add(title); Axis yAxis = new Axis();
//设置图标中Y轴的最小值永远为0
yAxis.AxisMinimum = ;
//设置图表中Y轴的后缀
yAxis.Suffix = "斤";
chart.AxesY.Add(yAxis); // 创建一个新的数据线。
DataSeries dataSeries = new DataSeries(); // 设置数据线的格式
dataSeries.RenderAs = RenderAs.StackedColumn;//柱状Stacked // 设置数据点
DataPoint dataPoint;
for (int i = ; 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 = ;
chart.Height = ;
chart.Margin = new Thickness(, , , );
//是否启用打印和保持图片
chart.ToolBarEnabled = false; //设置图标的属性
chart.ScrollingEnabled = false;//是否启用或禁用滚动
chart.View3D = true;//3D效果显示 //创建一个标题的对象
Title title = new Title(); //设置标题的名称
title.Text = name;
title.Padding = new Thickness(, , , ); //向图标添加标题
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 = ; 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 = ;
chart.Height = ;
chart.Margin = new Thickness(, , , );
//是否启用打印和保持图片
chart.ToolBarEnabled = false; //设置图标的属性
chart.ScrollingEnabled = false;//是否启用或禁用滚动
chart.View3D = true;//3D效果显示 //创建一个标题的对象
Title title = new Title(); //设置标题的名称
title.Text = name;
title.Padding = new Thickness(, , , ); //向图标添加标题
chart.Titles.Add(title); //初始化一个新的Axis
Axis xaxis = new Axis();
//设置Axis的属性
//图表的X轴坐标按什么来分类，如时分秒
xaxis.IntervalType = IntervalTypes.Months;
//图表的X轴坐标间隔如2,3,20等，单位为xAxis.IntervalType设置的时分秒。
xaxis.Interval = ;
//设置X轴的时间显示格式为7-10 11：20
xaxis.ValueFormatString = "MM月";
//给图标添加Axis
chart.AxesX.Add(xaxis); Axis yAxis = new Axis();
//设置图标中Y轴的最小值永远为0
yAxis.AxisMinimum = ;
//设置图表中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 = ; i < lsTime.Count; i++)
{
// 创建一个数据点的实例。
dataPoint = new DataPoint();
// 设置X轴点
dataPoint.XValue = lsTime[i];
//设置Y轴点
dataPoint.YValue = double.Parse(cherry[i]);
dataPoint.MarkerSize = ;
//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 = ; i < lsTime.Count; i++)
{
// 创建一个数据点的实例。
dataPoint2 = new DataPoint();
// 设置X轴点
dataPoint2.XValue = lsTime[i];
//设置Y轴点
dataPoint2.YValue = double.Parse(pineapple[i]);
dataPoint2.MarkerSize = ;
//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);
}
