Silverlight中的圖表控制元件visifire的使用

暖楓無敵發表於2011-07-28
控制元件

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

    }
}


五、效果圖如下：





相關文章