学步园

想做一个折线图，之前用过安装Telerik的justcode，看到过他家能实现WP上的图表，今天就抱着试一试的心态在网上找了找代码。最后找到这个http://www.visifire.com/wp7_chart_view.php?type=xml&file=product/WPLine2.xml（现在好像被墙了）。

这个网站上提供了图表的XAML实现，而我想要是用C#代码控制图表的数值（就是X、Y轴的数值），在网上找了Visifire在sliverlight上的C#实现，花了一上午的时间将其转移到Windows Phone上，

先添加对SLWpVisifire.Charts.dll的引用（SLWpVisifire.Charts.dll可以在这下载到http://www.visifire.com/windows_phone_charts.php）

XMAL部分

<phone:PhoneApplicationPage 
    x:Class="PhoneApp9.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">

    <vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLWpVisifire.Charts"
 Theme="Theme5" Name="chart">

        <vc:Chart.Titles>
            <vc:Title Text="PM2.5值趋势图"/>
        </vc:Chart.Titles>

        <vc:Chart.AxesX>
            <vc:Axis StartFromZero="true" AxisMaximum="6">
                <vc:Axis.Grids>
                    <vc:ChartGrid LineThickness="0.5"/>
                </vc:Axis.Grids>
            </vc:Axis>
        </vc:Chart.AxesX>

        <vc:Chart.AxesY>
            <vc:Axis>
                <vc:Axis.Grids>
                    <vc:ChartGrid LineThickness="0.5" LineStyle="Solid"/>
                </vc:Axis.Grids>
            </vc:Axis>
        </vc:Chart.AxesY>

        <vc:Chart.PlotArea>
            <vc:PlotArea BorderThickness="0,0,1,0" BorderColor="Gray"/>
        </vc:Chart.PlotArea>
        <!--注释掉的是数据的XMAL实现-->
        <!--<vc:Chart.Series>
            <vc:DataSeries RenderAs="Line" LegendText="Company A" Color="#3399ff" LightingEnabled="False"
                   MarkerSize="15" Name="ds">
                <vc:DataSeries.DataPoints>
                    <vc:DataPoint XValue="0" AxisXLabel="2001" YValue="1"/>
                    <vc:DataPoint XValue="1" AxisXLabel="2002" YValue="0.8"/>
                    <vc:DataPoint XValue="2" AxisXLabel="2003" YValue="1.8"/>
                    <vc:DataPoint XValue="3" AxisXLabel="2004" YValue="2.5"/>
                    <vc:DataPoint XValue="4" AxisXLabel="2005" YValue="3.1"/>
                    <vc:DataPoint XValue="5" AxisXLabel="2006" YValue="4.5"/>
                    <vc:DataPoint XValue="6" AxisXLabel="2007" YValue="5.8"/>
                    <vc:DataPoint XValue="7" AxisXLabel="2008" YValue="7.1"/>
                    <vc:DataPoint XValue="8" AxisXLabel="2009" YValue="6.5"/>
                    <vc:DataPoint XValue="9" AxisXLabel="2010" YValue="6.8"/>
                </vc:DataSeries.DataPoints>
            </vc:DataSeries>
            <vc:DataSeries RenderAs="Line" LegendText="Company B" Color="#66cc00" LightingEnabled="False"
                   MarkerSize="15">
                <vc:DataSeries.DataPoints>
                    <vc:DataPoint XValue="0" AxisXLabel="2001" YValue="-2"/>
                    <vc:DataPoint XValue="1" AxisXLabel="2002" YValue="-1"/>
                    <vc:DataPoint XValue="2" AxisXLabel="2003" YValue="3.2"/>
                    <vc:DataPoint XValue="3" AxisXLabel="2004" YValue="4"/>
                    <vc:DataPoint XValue="4" AxisXLabel="2005" YValue="4.2"/>
                    <vc:DataPoint XValue="5" AxisXLabel="2006" YValue="5.9"/>
                    <vc:DataPoint XValue="6" AxisXLabel="2007" YValue="6.1"/>
                    <vc:DataPoint XValue="7" AxisXLabel="2008" YValue="6.4"/>
                    <vc:DataPoint XValue="8" AxisXLabel="2009" YValue="5.2"/>
                    <vc:DataPoint XValue="9" AxisXLabel="2010" YValue="4.8"/>
                </vc:DataSeries.DataPoints>
            </vc:DataSeries>
        </vc:Chart.Series>-->
    </vc:Chart>

</phone:PhoneApplicationPage>

C#部分

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 Microsoft.Phone.Controls;
using Visifire.Charts;

namespace PhoneApp9
{
    public partial class MainPage : PhoneApplicationPage
    {
        // 构造函数
        public MainPage()
        {
            InitializeComponent();
        }
        
        private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
        {
            DataSeries dataSeries = new DataSeries{RenderAs = RenderAs.Line};
            dataSeries.DataPoints.Add(new DataPoint { AxisXLabel = "07:00", YValue = 53, XValue = 0});
            dataSeries.DataPoints.Add(new DataPoint { AxisXLabel = "08:00", YValue = 60, XValue = 1});
            dataSeries.DataPoints.Add(new DataPoint { AxisXLabel = "09:00", YValue = 78, XValue = 2});
            dataSeries.DataPoints.Add(new DataPoint { AxisXLabel = "10:00", YValue = 82, XValue = 3});
            dataSeries.DataPoints.Add(new DataPoint { AxisXLabel = "11:00", YValue = 89, XValue = 4});
            dataSeries.DataPoints.Add(new DataPoint { AxisXLabel = "12:00", YValue = 81, XValue = 5});
            dataSeries.DataPoints.Add(new DataPoint { AxisXLabel = "13:00", YValue = 79, XValue = 6});

            chart.Series.Add(dataSeries);
        }
    }
}