Telerik Silverlight 之Charting控件的使用

效果还是不错的，还能设置动态加载效果，如下图：

图表样式的资源文件 RadChartStyle.xaml，内容如下：

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:Telerik_Windows_Controls_Charting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting">
<!-- 应该在此定义资源字典条目。-->
<SolidColorBrush x:Key="ChartTitleBackground" Color="#FF226AB8"/>
<SolidColorBrush x:Key="ChartTitleBorderBrush" Color="#FFFDFDFD"/>
<SolidColorBrush x:Key="ChartTitleOuterBorderBrush" Color="#FF226AB8"/>
<Thickness x:Key="ChartTitleBorderThickness">0</Thickness>
<Thickness x:Key="ChartTitleOuterBorderThickness">0,0,0,0</Thickness>
<Thickness x:Key="ChartTitlePadding">7</Thickness>
<SolidColorBrush x:Key="ChartTitleForeground" Color="White"/>
<System:Double x:Key="ChartTitleFontSize">12</System:Double>
<FontWeight x:Key="ChartTitleFontWeight">Bold</FontWeight>
<Style x:Key="ChartTitleStyle1" TargetType="Telerik_Windows_Controls_Charting:ChartTitle">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="{StaticResource ChartTitleBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ChartTitleBorderBrush}"/>
<Setter Property="OuterBorderBrush" Value="{StaticResource ChartTitleOuterBorderBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource ChartTitleBorderThickness}"/>
<Setter Property="OuterBorderThickness" Value="{StaticResource ChartTitleOuterBorderThickness}"/>
<Setter Property="Padding" Value="{StaticResource ChartTitlePadding}"/>
<Setter Property="Foreground" Value="{StaticResource ChartTitleForeground}"/>
<Setter Property="FontSize" Value="{StaticResource ChartTitleFontSize}"/>
<Setter Property="FontWeight" Value="{StaticResource ChartTitleFontWeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Telerik_Windows_Controls_Charting:ChartTitle">
<Border CornerRadius="5" BorderBrush="{TemplateBinding OuterBorderBrush}" BorderThickness="{TemplateBinding OuterBorderThickness}">
<Border  CornerRadius="5" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<ContentControl HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" FontFamily="{TemplateBinding FontFamily}" FontSize="12" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" Content="{TemplateBinding Content}" Height="15"/>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

App.xaml 主要是添加了资源字典，用于引入图表样式的资源文件RadChartStyle.xaml

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="DCharting.App"
>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="RadChartStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

--------------------------------------------------------------------------折线图-----------------------------------------------------------------------------------------------------

<UserControl x:Class="DCharting.LineChart"
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:Telerik_Windows_Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<Style x:Key="GridLineStyle"
TargetType="Line">
<Setter Property="Stroke"
Value="Black" />
<Setter Property="StrokeThickness"
Value="1" />
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Telerik_Windows_Controls:RadChart x:Name="radChart" Content="RadChart" Foreground="#FFFBF9F9" TitleStyle="{StaticResource ChartTitleStyle1}"/>
<Button x:Name="prt" Content="打印" HorizontalAlignment="Right" Height="29" Margin="0,4,7,0" VerticalAlignment="Top" Width="83" RenderTransformOrigin="3.886,0.397" FontSize="13.333"/>
</Grid>
</UserControl>

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.Shapes;
using Telerik.Windows.Controls.Charting;
using System.Windows.Printing;
using DCharting.ServiceReference1;
namespace DCharting
{
public partial class LineChart : UserControl
{
private Random rand = new Random(DateTime.Now.Millisecond);
public LineChart()
{
InitializeComponent();
setChart(DM.DFAGNM + "温度过程线");
ConfigureChart();
prt.Click += new RoutedEventHandler(prt_Click);
}
void prt_Click(object sender, RoutedEventArgs e)
{
PrintDocument prtDoc = new PrintDocument();
prtDoc.PrintPage += new EventHandler<PrintPageEventArgs>(prtDoc_PrintPage);
prtDoc.Print("温度过程线");
}
private void prtDoc_PrintPage(object sender, PrintPageEventArgs e)
{
e.PageVisual = radChart;
}
private void ConfigureChart()
{
LineSeriesDefinition lineSeries = new LineSeriesDefinition();
lineSeries.ShowItemLabels = false;
lineSeries.ShowPointMarks = false;
//SeriesMapping dataMapping = new SeriesMapping();
//dataMapping.SeriesDefinition = lineSeries;
//dataMapping.ItemMappings.Add(new ItemMapping("XValue", DataPointMember.XValue));
//dataMapping.ItemMappings.Add(new ItemMapping("YValue", DataPointMember.YValue));
//dataMapping.ItemMappings[1].SamplingFunction = ChartSamplingFunction.KeepExtremes;
//radChart.SeriesMappings.Add(dataMapping);
//radChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;
// radChart.DefaultView.ChartArea.ZoomScrollSettingsY.ScrollMode = ScrollMode.ScrollAndZoom;
radChart.DefaultView.ChartArea.NoDataString = "正在载入图形数据，请等待...";
radChart.DefaultView.ChartArea.Padding = new Thickness(5, 10, 20, 5);
radChart.DefaultView.ChartArea.LabelFormatBehavior = LabelFormatBehavior.None;
radChart.SamplingSettings.SamplingThreshold = 3000; //此属性用于控制动画的时间
radChart.DefaultView.ChartArea.EnableAnimations = true; //此属性控制动画效果
radChart.DefaultView.ChartArea.EnableTransitionAnimations = true;
radChart.DefaultView.ChartLegend.Visibility = Visibility.Collapsed;
}
private void setChart(string title)
{
radChart.DefaultView.ChartTitle.Content = title;
this.radChart.DefaultSeriesDefinition.LegendDisplayMode = LegendDisplayMode.None;
// this.radChart.DefaultView.ChartLegendPosition = Telerik.Windows.Controls.Dock.Bottom;
radChart.DefaultView.ChartArea.AxisX.MajorGridLinesVisibility = Visibility.Visible;
radChart.DefaultView.ChartArea.AxisY.StripLinesVisibility = Visibility.Collapsed;
radChart.DefaultView.ChartArea.AxisY.MajorGridLinesVisibility = Visibility.Visible;
radChart.DefaultView.ChartArea.AxisY.MinorGridLinesVisibility = Visibility.Collapsed;
this.radChart.DefaultView.ChartArea.AxisY.AxisStyles.GridLineStyle = this.Resources["GridLineStyle"] as Style;
this.radChart.DefaultView.ChartArea.AxisX.AxisStyles.GridLineStyle = this.Resources["GridLineStyle"] as Style;
radChart.DefaultView.ChartTitle.HorizontalAlignment = HorizontalAlignment.Center;
radChart.DefaultView.ChartArea.AxisX.AutoRange = true;
radChart.DefaultView.ChartArea.AxisX.StripLinesVisibility = Visibility.Visible;
radChart.DefaultView.ChartArea.AxisY.StripLinesVisibility = Visibility.Visible;
radChart.DefaultView.ChartTitle.HorizontalAlignment = HorizontalAlignment.Center;
radChart.DefaultView.ChartLegend.Header = "图例";
radChart.DefaultView.ChartLegend.UseAutoGeneratedItems = true;
//X轴标题
radChart.DefaultView.ChartArea.AxisX.Title = "时间";
radChart.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Between;
//Y轴标题
radChart.DefaultView.ChartArea.AxisY.Title = "温度";
addSerise();
}
private void addSerise()
{
getDataSoapClient client = new getDataSoapClient();
client.getAllTemperatureCompleted += new EventHandler<getAllTemperatureCompletedEventArgs>(client_getAllTemperatureCompleted);
client.getAllTemperatureAsync();
}
void client_getAllTemperatureCompleted(object sender, getAllTemperatureCompletedEventArgs e)
{
int index = 0;
DataSeries series = new DataSeries();
series.Definition = new LineSeriesDefinition();
series.LegendLabel = "温度";
if (e.Error == null)
{
System.Collections.ObjectModel.ObservableCollection<Temperature> trees = e.Result;
foreach (Temperature item in trees)
{
if (index < 20)
{
index++;
series.Add(new DataPoint(item.StationName, System.Convert.ToDouble(item.MaxTemp)));
}
else
{
break;
}
}
}
radChart.DefaultView.ChartArea.DataSeries.Add(series);
}
private void chart_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
//string year = ((ComboBoxItem)chart.SelectedItem).Content.ToString();
//setchart(year);
}
}
}

------------------------------------------------------------------------------------柱状图-----------------------------------------------------------------------

<UserControl x:Class="DCharting.MainPage"
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"
mc:Ignorable="d"
xmlns:Telerik_Windows_Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<Style x:Key="GridLineStyle" TargetType="Line">
<Setter Property="Stroke" Value="Black" />
<Setter Property="StrokeThickness" Value="1" />
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Telerik_Windows_Controls:RadChart x:Name="radChart" Content="RadChart" Foreground="#FFFBF9F9" TitleStyle="{StaticResource ChartTitleStyle1}"/>
<Button x:Name="prt" Content="打印" HorizontalAlignment="Right" Height="29" Margin="0,4,7,0" VerticalAlignment="Top" Width="83" RenderTransformOrigin="3.886,0.397" FontSize="13.333"/>
</Grid>
</UserControl>

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.Shapes;
using Telerik.Windows.Controls.Charting;
using System.Windows.Printing;
using DCharting.ServiceReference1;
namespace DCharting
{
public partial class MainPage : UserControl
{
//产生一个随机数
private Random rand = new Random(DateTime.Now.Millisecond);
public MainPage()
{
InitializeComponent();
setChart(DM.DFAGNM + "温度柱柱状图");
ConfigureChart();
prt.Click += new RoutedEventHandler(prt_Click);
}
void prt_Click(object sender, RoutedEventArgs e)
{
PrintDocument prtDoc = new PrintDocument();
prtDoc.PrintPage += new EventHandler<PrintPageEventArgs>(prtDoc_PrintPage);
prtDoc.Print("温度柱柱状图");
}
private void prtDoc_PrintPage(object sender, PrintPageEventArgs e)
{
e.PageVisual = radChart;
}
private void ConfigureChart()
{
LineSeriesDefinition lineSeries = new LineSeriesDefinition();
lineSeries.ShowItemLabels = false;
lineSeries.ShowPointMarks = false;
//SeriesMapping dataMapping = new SeriesMapping();
//dataMapping.SeriesDefinition = lineSeries;
//dataMapping.ItemMappings.Add(new ItemMapping("XValue", DataPointMember.XValue));
//dataMapping.ItemMappings.Add(new ItemMapping("YValue", DataPointMember.YValue));
//dataMapping.ItemMappings[1].SamplingFunction = ChartSamplingFunction.KeepExtremes;
//radChart.SeriesMappings.Add(dataMapping);
radChart.DefaultView.ChartArea.ZoomScrollSettingsX.ScrollMode = ScrollMode.ScrollAndZoom;
radChart.DefaultView.ChartArea.ZoomScrollSettingsY.ScrollMode = ScrollMode.ScrollAndZoom;
radChart.DefaultView.ChartArea.NoDataString = "正在载入图形数据，请等待...";
radChart.DefaultView.ChartArea.Padding = new Thickness(5, 10, 20, 5);
radChart.DefaultView.ChartArea.LabelFormatBehavior = LabelFormatBehavior.None;
radChart.SamplingSettings.SamplingThreshold = 1000;  //此属性用于控制动画的时间
radChart.DefaultView.ChartArea.EnableAnimations = true; //此属性控制动画效果
radChart.DefaultView.ChartArea.EnableTransitionAnimations = true;
radChart.DefaultView.ChartLegend.Visibility = Visibility.Collapsed;
}
private void setChart(string title)
{
radChart.DefaultView.ChartTitle.Content = title;
this.radChart.DefaultSeriesDefinition.LegendDisplayMode = LegendDisplayMode.None;
// this.radChart.DefaultView.ChartLegendPosition = Telerik.Windows.Controls.Dock.Bottom;
radChart.DefaultView.ChartArea.AxisX.MajorGridLinesVisibility = Visibility.Visible;
radChart.DefaultView.ChartArea.AxisY.StripLinesVisibility = Visibility.Collapsed;
radChart.DefaultView.ChartArea.AxisY.MajorGridLinesVisibility = Visibility.Visible;
radChart.DefaultView.ChartArea.AxisY.MinorGridLinesVisibility = Visibility.Collapsed;
this.radChart.DefaultView.ChartArea.AxisY.AxisStyles.GridLineStyle = this.Resources["GridLineStyle"] as Style;
this.radChart.DefaultView.ChartArea.AxisX.AxisStyles.GridLineStyle = this.Resources["GridLineStyle"] as Style;
radChart.DefaultView.ChartTitle.HorizontalAlignment = HorizontalAlignment.Center;
radChart.DefaultView.ChartArea.AxisX.AutoRange = true;
radChart.DefaultView.ChartArea.AxisX.StripLinesVisibility = Visibility.Visible;
radChart.DefaultView.ChartArea.AxisY.StripLinesVisibility = Visibility.Visible;
radChart.DefaultView.ChartTitle.HorizontalAlignment = HorizontalAlignment.Center;
radChart.DefaultView.ChartLegend.Header = "图例";
radChart.DefaultView.ChartLegend.UseAutoGeneratedItems = true;
//X轴标题
radChart.DefaultView.ChartArea.AxisX.Title = "地点";
radChart.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Between;
//Y轴标题
radChart.DefaultView.ChartArea.AxisY.Title = "温度";
addSerise();
}
/// <summary>
/// 通过WebService动态获取数据
/// </summary>
private void addSerise()
{
getDataSoapClient client = new getDataSoapClient();
client.getAllTemperatureCompleted += new EventHandler<getAllTemperatureCompletedEventArgs>(client_getAllTemperatureCompleted);
client.getAllTemperatureAsync();
}
void client_getAllTemperatureCompleted(object sender, getAllTemperatureCompletedEventArgs e)
{
int index = 0;
DataSeries series = new DataSeries();
series.Definition = new BarSeriesDefinition();
series.LegendLabel = "温度";
if (e.Error == null)
{
System.Collections.ObjectModel.ObservableCollection<Temperature> trees = e.Result;
foreach (Temperature item in trees)
{
if (index < 20)
{
index++;
series.Add(new DataPoint(item.StationName, System.Convert.ToDouble(item.MaxTemp)));
}
else
{
break;
}
}
}
radChart.DefaultView.ChartArea.DataSeries.Add(series);
}
private void chart_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
//string year = ((ComboBoxItem)chart.SelectedItem).Content.ToString();
//setchart(year);
}
}
}

注意：这里提供了全部核心代码，数据是通过WebService和数据库交互获取

源代码下载链接：DCharting实例

Telerik Silverlight 之Charting控件的使用相关推荐

Silverlight实用窍门系列：51.Silverlight页面控件的放大缩小、Silverlight和Html控件的互相操作...
本节将讲述三个Silverlight中应用的小技巧:Silverlight页面的放大缩小.Silverlight操作Html.Html操作Silverlight控件. 一.Silverlight页面的 ...
跟我学Telerik公司的RadControls控件(四)
朋友们.同行们通过前面<跟我学Telerik公司的RadControls控件>系列三篇的学习,你一定会内心有一种涌动,有种相见(RadControls)恨晚的感觉.那就和晓军一起加入学习R ...
ArcGIS API for Silverlight中legend控件显示图例问题
转自http://www.gisall.com/html/34/9534-5141.html 在使用ArcGIS API for Silverlight进行地图展示应用的时候,我们都会设置地图图层列表 ...
Silverlight玩转控件（二）——Canvas布局
在接下来的几篇文章中,我将来介绍Silverlight相关的布局知识. 在Silverlight中,布局主要有三种方式: 1. Cavas 2. StackPanel 3. Grid 在传统的ASP. ...
Dojo Charting 控件高级用法
现如今,随着 web2.0 及其相关技术越来越流行,web 矢量图技术也变得越来越重要,尤其是在 web 数据的可视化方面,矢量图技术发挥着不可磨灭的作用.Dojo,一个流行且强大的 web 开发控件 ...
Silverlight中使用控件模板的问题（自己添加控件的方法）
在一步一步学Silverlight 2系列(9):使用控件模板中 WatermarkedTextBox控件可以为用户的输入提供一段提示信息,如果只是简单的一点文字信息,有时候未免显得单调,如果加上相应 ...
Silverlight 4新控件PivotViewer介绍
早在Silverlight 4正式版发布之前,微软发布PivotViewer控件的演示版本,其处理以及展示大批量数据的功能吸引不少开发人员和终端客户,今天微软发布了PivotViewer控件正式版本, ...
Silverlight之Button控件简单自定义
Silverlight给我们提供的控件数量是非常有限的,不能够满足我们在实践项目中开发需求.所以我们就需要通过自定义控件的方式来解决这个问题. 一:Silverlight控件应用样式. 我们大家都知道 ...
silverlight中TextBox控件的使用
<!-- silverlig提供了TextBox和PasswordBox编辑控件. TextBox控件用来接收用户通过键盘等输入设备输入的数据, PasswordBox控 ...

Telerik Silverlight 之Charting控件的使用

Telerik Silverlight 之Charting控件的使用相关推荐

最新文章

热门文章