AI 助理
备案控制台
开发者社区 数据库 文章 正文

Telerik Silverlight 之Charting控件的使用

2012-10-19 937
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 效果还是不错的，还能设置动态加载效果，如下图：                                                                       ...

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

                                                                                                               

图表样式的资源文件 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实例

 

 

文章标签：
数据库
关键词：
silverlight控件
暖枫无敌
目录
相关文章
杰克.陈
Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象
原文:Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象 原创文章，如需转载，请注明出处。   最近在一直研究Silverlight下的数据绑定控件，发现有这样两个接口IEditableObject 和IEditableCollectionView，记录一下结论，欢迎交流指正。
杰克.陈
955 0
技术小甜
|
前端开发
[Silverlight]TextBlock控件全攻略
技术小甜
1148 0
余二五
|
C# .NET 开发框架
《SilverLight2快速入门》之基本控件Button
余二五
1135 0
余二五
|
C# 前端开发 .NET
《SilverLight2快速入门》之基本控件Calendar
余二五
1054 0
技术小牛人
|
数据安全/隐私保护
silverlight-带水印的自定义TextBox控件（版本2）
技术小牛人
846 0
科技小能手
|
Web App开发
Silverlight实用窍门系列：39.Silverlight中使用Frame和Page控件制作导航【附带实例源码】
科技小能手
1461 0
科技小能手
Silverlight实用窍门系列：42.读取拖动到控件上的外部txt和jpg文件，多外部文件的拖动
科技小能手
984 0
科技小能手
|
前端开发
Silverlight实用窍门系列：51.Silverlight页面控件的放大缩小、Silverlight和Html控件的互相操作
科技小能手
1141 0
科技小能手
Silverlight实用窍门系列：66.Silverlight的数据模板DataTemplate(二)获取数据模板控件
科技小能手
1033 0
科技小能手
|
前端开发 容器 索引
Silverlight 游戏开发：可重用的拖拽控件
科技小能手
1317 0

热门文章

最新文章

  • 1
    风云的银光志Silverlight4.0教程之与摄像头与迈克风设备交互
  • 2
    使用 MEF 公开 Silverlight“.NET研究” MVVM 应用程序中的接口
  • 3
    在Silverlight中使用Socket进行通信(2)SL与Socket Server进行文本交换
  • 4
    一步一步学Silverlight 2系列（32）：图形图像综合实例—“功夫之王”剧照播放
  • 5
    Silverlight实用窍门系列：20.后台CS代码中创建四种常用的动画效果【附带源码实例】
  • 6
    稳扎稳打Silverlight(27) - 2.0网页之可脚本化, 与DOM的交互, 与JavaScript的交互
  • 7
    Silverlight中的图表控件visifire的使用
  • 8
    再谈Silverlight中的对象序列化/反序列化
  • 9
    Silverlight实例教程 - Validation验证系列汇总
  • 10
    VS2010安装完SP1后再安装Silverlight Tools 4遇到的问题解决办法
  • 1
    Silverlight & Blend动画设计系列二：旋转动画（RotateTransform）
    1142
  • 2
    Silverlight4Beta之Binding的新特性（上）
    1274
  • 3
    30.Silverlight中创建一个最简单的WCF RIA Services访问数据库实例
    1158
  • 4
    Silverlight实用窍门系列：48.DataGrid行详细信息的绑定--DataGrid.RowDetailsTemplate
    1020
  • 5
    Silverlight与WCF之间的通信(2)利用WCF的双工通信“推送”给SL数据
    1248
  • 6
    Silverlight C# 游戏开发：资源的处理，图像算法（一）
    1024
  • 7
    Silverlight 游戏开发小技巧：扇形排列元素
    956
  • 8
    稳扎稳打Silverlight(6) - 2.0控件之ScrollViewer, Slider, StackPanel, TabControl, TextBlock
    1079
  • 9
    稳扎稳打Silverlight(33) - 3.0控件之AutoCompleteBox, DataPager
    1096
  • 10
    稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource
    961

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    获取百炼API-KEY