Silverlight中的图表控件visifire的使用

     Silverlight对于图形图像处理方面，从1.0时代起就给予了很强大的支持，所以我们可以在Silverlight中实现非常棒的各种统计图表，然而现在有了一些开源的项目，使得这项工作更加的简单。

一、下载dll文件，下载地址：http://download.csdn.net/source/3476757

二、解压文件，新建一个Silverlight项目，将其中的Silverlight Binaries下的dll文件引用到Bin目录下。

三、支持多种图表类型，Column、Bar、Line、Stock、Bubble、Radar等等几十种类型。

四、贴上代码，如下：

<navigation:Page x:Class="XTExhibition.Views.VisifireCharts"            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:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"           mc:Ignorable="d"           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"           d:DesignWidth="1200" d:DesignHeight="680"           Title="VisifireCharts Page">    <Grid x:Name="LayoutRoot">        <StackPanel Orientation="Horizontal" >            <!--第一個Chart-->            <vc:Chart Grid.Row="0" Name="chtChartOne" Width="390">                <vc:Chart.AxesY>                    <!--Y間隔-->                    <vc:Axis  Interval="20" Suffix="%"/>                </vc:Chart.AxesY>            </vc:Chart>            <StackPanel>                <Grid x:Name="ChartPanel" Height="250" Width="500">                </Grid>                <Grid x:Name="ChartLine" Height="300" Width="500">                </Grid>            </StackPanel>            <StackPanel>                <Grid x:Name="Chart1" Height="250" Width="500">                </Grid>                <Grid x:Name="Chart2" Height="300" Width="500">                </Grid>            </StackPanel>        </StackPanel>        <!--第二個Chart-->        <!--<vc:Chart Grid.Row="1" Name="chtChartTwo">            <vc:Chart.AxesY>                <vc:Axis  Interval="20" Suffix="%"/>            </vc:Chart.AxesY>            <vc:Chart.Series>                <vc:DataSeries RenderAs="Column" LabelEnabled="true" LabelStyle="OutSide">                    <vc:DataSeries.DataPoints>                        <vc:DataPoint AxisXLabel="18-29歲" YValue="31.2"/>                        <vc:DataPoint AxisXLabel="30-39歲" YValue="50.3"/>                        <vc:DataPoint AxisXLabel="40-49歲" YValue="50.9"/>                        <vc:DataPoint AxisXLabel="50-64歲" YValue="35.6"/>                        <vc:DataPoint AxisXLabel="65歲以上"  YValue="27.6"/>                    </vc:DataSeries.DataPoints>                </vc:DataSeries>            </vc:Chart.Series>        </vc:Chart>-->    </Grid></navigation:Page>

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 System.Windows.Navigation;using Visifire.Charts;namespace XTExhibition.Views{    public partial class VisifireCharts : Page    {        public VisifireCharts()        {            InitializeComponent();            //柱状图            InitPage();            //饼图            ShowPie();            //折线图            ShowLine();            //雷达图            ShowRadar();            //气泡图            ShowBubble();        }        #region   柱状图示例        public void InitPage()        {            chtChartOne.View3D = true;            Title title = new Title();            title.Text = "柱状图的标题内容";            chtChartOne.Titles.Add(title);            //統計資料列            DataSeries ds = new DataSeries();            //柱状类型            ds.RenderAs = RenderAs.StackedColumn;            //顯示Lable            ds.LabelStyle = LabelStyles.OutSide;            ds.LabelEnabled = true;            //欄            ds.DataPoints.Add(new DataPoint() { AxisXLabel = "18-29歲", YValue = 20.8 });            ds.DataPoints.Add(new DataPoint() { AxisXLabel = "30-39歲", YValue = 28.2 });            ds.DataPoints.Add(new DataPoint() { AxisXLabel = "40-49歲", YValue = 26.5 });            ds.DataPoints.Add(new DataPoint() { AxisXLabel = "50-64歲", YValue = 18.9 });            ds.DataPoints.Add(new DataPoint() { AxisXLabel = "65歲以上", YValue = 17.2 });            chtChartOne.Series.Add(ds);        }        #endregion        #region 饼状图示例        public void ShowPie()        {            Chart chart = new Chart();            chart.Width = 450;            chart.Height = 300;            chart.View3D = true;  //3D效果            //饼状图的标题设置            Title title = new Visifire.Charts.Title();            title.Text = "这是一个测试用的3D饼状图";            chart.Titles.Add(title);            DataSeries dataSeries = new DataSeries();            dataSeries.RenderAs = RenderAs.Pie;            dataSeries.LegendText = "";            DataPoint point;            int numberOfDataPoints = 6;            Random random = new Random();            for (int i = 0; i < numberOfDataPoints; i++)            {                point = new DataPoint();                point.YValue = random.Next(1, 100);                dataSeries.DataPoints.Add(point);            }            chart.Series.Add(dataSeries);            this.ChartPanel.Children.Add(chart);        }        #endregion        #region 折线图示例        public void ShowLine()        {            Chart chart = new Chart();            //折线图的标题            Title title = new Title();            title.Text = "折线图的标题";            chart.Titles.Add(title);            //设置类型为折线图            DataSeries dataSeries = new DataSeries();            dataSeries.RenderAs = RenderAs.Spline;            dataSeries.LegendText = "X坐标";            //设置点            DataPoint point;            Random random = new Random();            for (int i = 0; i < 10; i++)            {                point = new DataPoint();                point.YValue = random.Next(1,100);                dataSeries.DataPoints.Add(point);            }            chart.Series.Add(dataSeries);            this.ChartLine.Children.Add(chart);        }        #endregion        #region 雷达图示例        public void ShowRadar()        {            Chart chart = new Chart();            //雷达图的标题            Title title = new Title();            title.Text = "雷达图的标题";            chart.Titles.Add(title);            //设置类型为雷达图            DataSeries dataSeries = new DataSeries();            dataSeries.RenderAs = RenderAs.Radar;            dataSeries.LegendText = "X坐标";            //设置点            DataPoint point;            Random random = new Random();            for (int i = 0; i < 10; i++)            {                point = new DataPoint();                point.YValue = random.Next(1,100);                dataSeries.DataPoints.Add(point);            }            chart.Series.Add(dataSeries);            this.Chart1.Children.Add(chart);        }        #endregion        #region 气泡图示例        public void ShowBubble()        {            Chart chart = new Chart();            //气泡图的标题            Title title = new Title();            title.Text = "气泡图的标题";            chart.Titles.Add(title);            //设置类型为气泡图            DataSeries dataSeries = new DataSeries();            dataSeries.RenderAs = RenderAs.Bubble;            dataSeries.LegendText = "X坐标";            //设置点            DataPoint point;            Random random = new Random();            for (int i = 0; i < 10; i++)            {                point = new DataPoint();                point.YValue = random.Next(1, 100);                dataSeries.DataPoints.Add(point);            }            chart.Series.Add(dataSeries);            this.Chart2.Children.Add(chart);        }        #endregion        // 当用户导航到此页面时执行。        protected override void OnNavigatedTo(NavigationEventArgs e)        {        }    }}

五、效果图如下：