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)
        {
        }

    }
}

五、效果图如下：