本例主要包含下列技巧：
1、动态产生Chart图形；
2、点击数据点DataPoint，响应selectChanged事件；
3、使用Style模板，动态设置DataPoint样式；
本例实现功能：
（1）程序加载后进入AreaChart显示数据，在同一坐标轴上显示两个SerIEs图形。
（2）两SerIEs分别使用不同的Y轴，鼠标悬停在数据点上方，tooltip显示定制数据.
（3）点击AreaChart上的数据点，原SerIEs变化为BubbleChart，显示DataPoint所在周7天的数据。
本例创建的工程是Silverlight Navigation Application类型的Project。
数据源为List类型，包含三个字段，测试本段代码时，如果没有数据库，可以用List.Add()方法手动加几个纪录。
public partial class Production
{
private DateTime DATE;
pirivate double GAS_HKT_SALES;
private double GAS_NAN_SALES;
}
一、Home.xaml前台
<navigation:Page xmlns:chartingToolkit="clr-namespace: System.windows.Controls.DataVisualization.Charting;assembly=System.windows.Controls.DataVisualization.Toolkit" x:Class="SilverlightChart1.Home"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:navigation="clr-namespace:System.windows.Controls;assembly=System.windows.Controls.Navigation"
mc:Ignorable="d" d:DesignWIDth="640" d:DesignHeight="480"
title="Home"
Style="{StaticResource PageStyle}">
<GrID x:name="LayoutRoot">
<ScrollVIEwer x:name="PageScrollVIEwer" Style="{StaticResource PageScrollVIEwerStyle}">
<StackPanel x:name="ContentStackPanel">
<chartingToolkit:Chart x:name="TestChart" Background= "AliceBlue" Height="600">
</chartingToolkit:Chart>
</StackPanel>
</ScrollVIEwer>
</GrID>
</navigation:Page>
二、在Assets/Styles.xaml中加一个新样式
<Style x:Key="AreatooltipStyle2" targettype="chartingToolkit:AreaDataPoint">
<Setter Property="Background" Value= "Orange" />
<Setter Property="borderBrush" Value="Gray" />
<Setter Property="borderThickness" Value="1" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="WIDth" Value="4" />
<Setter Property="Height" Value="4" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate targettype="chartingToolkit:AreaDataPoint">
<GrID x:name="Root" Opacity="1">
<tooltipService.tooltip>
<StackPanel margin="2,2,2">
<TextBlock Text="数量"></TextBlock>
<ContentControl Content="{TemplateBinding FormattedDependentValue}" />
<TextBlock Text="日期"></TextBlock>
<ContentControl Content="{TemplateBinding IndependentValue}" />
</StackPanel>
</tooltipService.tooltip>
<Ellipse strokeThickness="{TemplateBinding borderThickness}" stroke="{TemplateBinding borderBrush}" Fill="{TemplateBinding Background}"/>
</GrID>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
三、Home.xaml.cs后台代码
using System;
using System.Collections.Generic;
using System.linq;
using System.Net;
using System.windows;
using System.windows.Controls;
using System.windows.documents;
using System.windows.input;
using System.windows.Media;
using System.windows.Media.Animation;
using System.windows.Navigation;
using System.windows.Shapes;
using SilverlightChart1.ServiceReference1;
using System.windows.Controls.DataVisualization.Charting;
namespace SilverlightChart1
{
public partial class Home : Page
{
private List<ProductionData> tableList = new List<ProductionData>();
public Home()
{
InitializeComponent();
Service1ClIEnt clIEnt = new Service1ClIEnt("BasichttpBinding_IService1");
clIEnt.GetAllCompleted += new EventHandler<GetAllCompletedEventArgs>(clIEnt_GetAllCompleted);
if (tableList.Count <=0)
{ clIEnt.GetAllAsync(); }
}
private voID clIEnt_GetAllCompleted(object sender,GetAllCompletedEventArgs e)
{
tableList = e.Result.ToList<ProductionData>();
BindListProduction(tableList);// 绑定分页表的数据源
}
private voID BindListProduction(List<ProductionData> List)
{
if (List != null)
{
#region 区域图
//设置图名称
TestChart.Title = "石油天然气产量、销量、消耗图";
//创建X轴
Action<Chart> chartModifIEr = (chart) =>
{
DateTimeAxis XAxis = new DateTimeAxis { OrIEntation = AxisOrIEntation.X,Title = "月份",FontStyle = FontStyles.normal,FontSize = 8 };
XAxis.IntervalType = DateTimeIntervalType.Months;
XAxis.Interval = 1;
XAxis.ShowGrIDlines = true;
TestChart.Axes.Add(XAxis);
};
chartModifIEr(TestChart);
//创建Y轴1
linearaxis YAxis1 = new linearaxis { OrIEntation = AxisOrIEntation.Y,Location = AxisLocation.Right,Title = "天然气香港销量",ShowGrIDlines = false };
YAxis1.OrIEntation = AxisOrIEntation.Y;
TestChart.Axes.Add(YAxis1);
//创建数据系列，并绑定数据源
AreaSerIEs areaSerIEs1 = new AreaSerIEs();
areaSerIEs1.Title = "香港";
areaSerIEs1.ItemsSource = List;
areaSerIEs1.IndependentValueBinding = new System.windows.Data.Binding("DATE");
areaSerIEs1.DependentValueBinding = new System.windows.Data.Binding("GAS_HKT_SALES");
//设置DataPointStyle样式
areaSerIEs1.DataPointStyle = Application.Current.Resources["AreatooltipStyle1"] as Style;
//areaSerIEs1所依赖的Y轴，不同SerIEs可以依赖不同的Y轴，轴的数值范围等都可分别设置
areaSerIEs1.DependentRangeAxis = YAxis1;
//添加selectChanged事件响应方法
areaSerIEs1.IsSelectionEnabled = true;
areaSerIEs1.SelectionChanged += new SelectionChangedEventHandler(areaSerIEs1_SelectionChanged);
TestChart.SerIEs.Add(areaSerIEs1);
//创建Y轴2
linearaxis YAxis2 = new linearaxis{ OrIEntation = AxisOrIEntation.Y,Location = AxisLocation.left,Title = "天然气南山销量",ShowGrIDlines = false };
TestChart.Axes.Add(YAxis2);
//创建数据系列，并绑定数据源
AreaSerIEs areaSerIEs2 = new AreaSerIEs();
areaSerIEs2.Title = "南山";
areaSerIEs2.ItemsSource = List;
areaSerIEs2.IndependentValueBinding = new System.windows.Data.Binding("DATE");
areaSerIEs2.DependentValueBinding = new System.windows.Data.Binding("GAS_NAN_SALES");
//动态绑定DataPointStyle样式，该样式在Assets文件夹下的Styles.xaml文件中设置
areaSerIEs2.DataPointStyle = Application.Current.Resources["AreatooltipStyle2"] as Style;
areaSerIEs2.DependentRangeAxis = YAxis2;
//添加selectChanged事件响应方法
areaSerIEs2.IsSelectionEnabled = true;
areaSerIEs2.SelectionChanged += new SelectionChangedEventHandler(areaSerIEs1_SelectionChanged);
TestChart.SerIEs.Add(areaSerIEs2);
#endregion
}
}
//定义AreaChart的SelectionChanged事件的方法内容
private voID areaSerIEs1_SelectionChanged(object sender,SelectionChangedEventArgs e)
{
DataPointSerIEs dataPoint = (DataPointSerIEs)sender;
ProductionData selected = (ProductionData)dataPoint.SelectedItem;
DateTime date = (DateTime)selected.DATE;
DayOfWeek weekday = date.DayOfWeek;
DateTime startDate = new DateTime();
DateTime endDate = new DateTime();
//自定义函数计算当前日期所在周的Monday到Sunday日期
getStartEndDate(date,ref startDate,ref endDate);
List<ProductionData> tempList = new List<ProductionData>();
//在数据源List中选出当前点击的DataPoint日期所在周的数据，存入一个List类型的tempList中
foreach (ProductionData p in tableList)
{
if (p.DATE >= startDate && p.DATE <= endDate)
{
tempList.Add(p);
}
}
TestChart.Axes.Clear();
TestChart.SerIEs.Clear();
//创建X轴
Action<Chart> chartModifIEr = (chart) =>
{
DateTimeAxis XAxis = new DateTimeAxis { OrIEntation = AxisOrIEntation.X,Title = "日期",FontSize = 8,Minimum =startDate.AddDays(-1),Maximum =endDate.AddDays (1) };
XAxis.IntervalType = DateTimeIntervalType.Days;
XAxis.Interval = 1;
XAxis.ShowGrIDlines = true;
TestChart.Axes.Add(XAxis);
};
chartModifIEr(TestChart);
//气泡图
BubbleSerIEs bubbleSerIEs1 = new BubbleSerIEs();
bubbleSerIEs1.ItemsSource = tempList;
bubbleSerIEs1.IndependentValueBinding = new System.windows.Data.Binding("DATE");
bubbleSerIEs1.DependentValueBinding = new System.windows.Data.Binding("GAS_HKT_SALES");
bubbleSerIEs1.Title = "香港销售量";
TestChart.SerIEs.Add(bubbleSerIEs1);
BubbleSerIEs bubbleSerIEs2 = new BubbleSerIEs();
bubbleSerIEs2.ItemsSource = tempList;
bubbleSerIEs2.IndependentValueBinding = new System.windows.Data.Binding("DATE");
bubbleSerIEs2.DependentValueBinding = new System.windows.Data.Binding("GAS_NAN_SALES");
bubbleSerIEs2.Title = "南山销售量";
TestChart.SerIEs.Add(bubbleSerIEs2);
}
//自定义函数，参数为：当前日期date，所在周起始日期startDate，所在周终了日期endDate
private voID getStartEndDate( DateTime date,ref DateTime startDate,ref DateTime endDate)
{
DayOfWeek weekday = date.DayOfWeek;
switch (weekday)
{
case DayOfWeek.Monday:
{
startDate = date;
endDate = date.AddDays(6);
break;
}
case DayOfWeek.Tuesday:
{
startDate = date.AddDays(-1);
endDate = date.AddDays(5);
break;
}
case DayOfWeek.Wednesday:
{
startDate = date.AddDays(-2);
endDate = date.AddDays(4);
break;
}
case DayOfWeek.Thursday:
{
startDate = date.AddDays(-3);
endDate = date.AddDays(3);
break;
}
case DayOfWeek.FrIDay:
{
startDate = date.AddDays(-4);
endDate = date.AddDays(2);
break;
}
case DayOfWeek.Saturday:
{
startDate = date.AddDays(-5);
endDate = date.AddDays(1);
break;
}
case DayOfWeek.Sunday:
{
startDate = date.AddDays(-6);
endDate = date;
break;
}
default:
{
startDate = date;
endDate = date;
break;
}
}
}
// Executes when the user navigates to this page. protected overrIDe voID OnNavigatedTo(NavigationEventArgs e) { } }}
总结以上是内存溢出为你收集整理的SilverLight3的Chart的一些技巧全部内容，希望文章能够帮你解决SilverLight3的Chart的一些技巧所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）