运用SilverLight chart DateTime Axes的2个小技巧

           在过去的几个星期，我花了相当一部分时间在我的一个很小Windows phone程序里面创建SilverLight Chart。关于SilverLight charting toolkit的文档的高级部分很少，至少可以说并不多。我找关于DateTimeAxis的经历真的可以说是困难重重。这篇文章的目的就是更好的服务于那些和我情况差不多的人。

                SilverLight Toolkit 包含了很多的charting controls，这些controls可以很容易的添加charting到你的silverlight或者Windows phone 7程序里。我一直在后者中使用这些controls，但同样适用于前者。

                对于那些之前从来没有写过XAML或者一点简单的SilverLight程序都没有写过的人，只是因为你们所听说的那些关于WPF和XAML抱怨，这将是一个痛苦的开始。如果你是这样的话，你真的要看看Visual Studio 2010和Expression Blend-这2种工具确实做了很大的努力和成效在编写XAML的时候，并取得了一个非常直观的类似于使用WYSIWG HTML编辑器的效果。

修改DateTimeAxis的Interval

                最痛苦的事情之一就是使用SilverLight Tookit画一个线性的图表，并且使用DateTime元素作为它的X轴，并且使用默认的Interval。默认情况下，如果你显示一个月的数据，它设置的时间间隔为3。

                然后在加上一个默认的American日期显示格式（例如：12/22/2010），然后你就会看到一个难以置信的难读的，杂乱的外观图表。

                现在，这里有2种方法可以解决这个问题，一种是使用code-behind，另外一种是使用XAML。这2种随你选择，但是我必须警告你：如果你使用code-behind，并且不设置Minimum，Maximum和IntervalType的话，图表将会变得非常的缓慢。我知道你会注意到我上面给的链接非常的老了，但是我只能找到这个页面因为我遇到了这个问题-最近。

                很显然的这是因为图表代码会试图为每个元素创建Interval，在设置成30分钟的时候，但是默认是1年。如果你花一点时间想想的话这意味着图表将要创建17520个data points。原因就在于搜索密度的增减了才会导致性能的改变（个人理解）。

因此，这对性能并不是那么的好，并且这个visual tree engine运行很吃力。

使用XAML

                使用XAML是非常简单的，只需要你为图表设置默认的DateTimeAxis属性。注意在我的例子里面Interval设置为5.

使用code-behind

                下面就是你需要在你的图表中要调用的code-behind。注意我特别设置了Minimum和Maximum值是为了防止我上面提到的那个小bug。

                从另外一个方面来说，如果你使用一个axis的类型为linear axis，设置minimum是非常重要的如果你的数据里面包含0，因为这样会使得图表范围包括负值在你的最小值下面。在一个图表中你不想要显示一个小与0的值，或者说要有一个最小值，这将会成为一个烦恼的事情。

};

修改DateTimeAxis的字符串格式     

                另一件不是100%的清楚的事情就是如何改变DateTimeAxis的显示字符格式。一些人认为可以使用BindingConverter（这个是行不通的因为这会改变你的axis element的真实的数据类型），另外有一些人认为可以使用axis element的StringFormat-这才是解决方案。

                同样你可以使用XAML或者是code-behind都会产生同样的效果，使得axis的字符串格式改变。

                使用XAML

                下面的这个例子展示了一个Australian日期格式。这个格式同样可以被改成任何一种DateTime格式。

<UserControl>

    <UserControl.Resources>

        <Style x:Key="DateTimeAxisLabelStyle1" 

               TargetType="charting:DateTimeAxisLabel">

            <Setter Property="DaysIntervalStringFormat" 

                    Value="{}{0:dd/MM/yyy}"/>

            <Setter Property="HoursIntervalStringFormat" 

                    Value="{}{0:hh:mm tt}"/>

        </Style>

    </UserControl.Resources>                

</UserControl>

<charting:Chart x:Name="MyChart">

    <charting:LineSeries/>

    <charting:Chart.Axes>

        <charting:DateTimeAxis 

            Orientation="X"

            AxisLabelStyle="{StaticResource DateTimeAxisLabelStyle1}"/>

    </charting:Chart.Axes>

</charting:Chart>

使用code-behind

                下面这个是code-behind的例子。你可以添加下面的style到你的page或者是app.XAML中去。然后应用到它的code。你可以创建这个style使用纯代码，但是我不建议因为这样你就不能在整个程序里面容易的使用你的style。

                在你的页面或者app.XAML里面的XAML style

<UserControl>

    <UserControl.Resources>

        <Style x:Key="DateTimeAxisLabelStyle1" 

               TargetType="charting:DateTimeAxisLabel">

            <Setter Property="DaysIntervalStringFormat" 

                    Value="{}{0:dd/MM/yyy}"/>

            <Setter Property="HoursIntervalStringFormat" 

                    Value="{}{0:hh:mm tt}"/>

        </Style>

    </UserControl.Resources>                

</UserControl>

Code-behind

};

总结

                我希望上面我说的2个技巧可以帮助大家节省时间，这可是我花了很大力气从toolkit API和google上面找到的。写SilverLight on Windows Phone 7 程序会非常有趣，如果你现在还不知道的话，那赶紧去看看吧！

原文链接：http://www.diaryofaninja.com/blog/2011/01/10/two-little-tips-for-working-with-silverlight-chart-datetime-axes