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

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

 

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

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

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

               

修改@H_502_11@DateTimeAxis的@H_502_11@Interval

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

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

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

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

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

使用@H_502_11@XAML

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

<@H_301_179@charting:@H_301_179@Chart x:name="MyChart">

    <@H_301_179@charting:@H_301_179@lineserIEs/>

    <@H_301_179@charting:@H_301_179@Chart.Axes>

        <@H_301_179@charting:@H_301_179@DateTimeAxis

@H_301_179@            OrIEntation="X"

            Interval="5" />

    </@H_301_179@charting:@H_301_179@Chart.Axes>

</@H_301_179@charting:@H_301_179@Chart>

使用@H_502_11@code-behind

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

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

List<DateTime> myValues = new List<DateTime>();

MyChart.DataContext = myValues;

((lineserIEs)MyChart.SerIEs[0]).IndependentAxis = new DateTimeAxis

{

    Minimum = myValues[0],

    Maximum = myValues[myValues.Count - 1],

    IntervalType = DateTimeIntervalType.Days,

    Interval = 5,

    OrIEntation = AxisOrIEntation.X,

    Location = AxisLocation.Bottom

};

修改@H_502_11@DateTimeAxis的字符串格式@H_502_11@     

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

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

@H_502_11@                使用@H_502_11@XAML

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

<@H_301_179@UserControl>

    <@H_301_179@UserControl.Resources>

        <@H_301_179@Style x:Key="DateTimeAxisLabelStyle1" 

               targettype="charting:DateTimeAxisLabel">

            <@H_301_179@Setter Property="DaysIntervalStringFormat" 

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

            <@H_301_179@Setter Property="HoursIntervalStringFormat" 

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

        </@H_301_179@Style>

    </@H_301_179@UserControl.Resources>                

</@H_301_179@UserControl>

<@H_301_179@charting:@H_301_179@Chart x:name="MyChart">

    <@H_301_179@charting:@H_301_179@lineserIEs/>

    <@H_301_179@charting:@H_301_179@Chart.Axes>

        <@H_301_179@charting:@H_301_179@DateTimeAxis 

@H_301_179@            OrIEntation="X"

            AxisLabelStyle="{@H_301_179@StaticResource DateTimeAxisLabelStyle1}"/>

    </@H_301_179@charting:@H_301_179@Chart.Axes>

</@H_301_179@charting:@H_301_179@Chart>

使用@H_502_11@code-behind

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

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

<@H_301_179@UserControl>

    <@H_301_179@UserControl.Resources>

        <@H_301_179@Style x:Key="DateTimeAxisLabelStyle1" 

               targettype="charting:DateTimeAxisLabel">

            <@H_301_179@Setter Property="DaysIntervalStringFormat" 

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

            <@H_301_179@Setter Property="HoursIntervalStringFormat" 

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

        </@H_301_179@Style>

    </@H_301_179@UserControl.Resources>                

</@H_301_179@UserControl>

Code-behind

List<DateTime> myValues = new List<DateTime>();

MyChart.DataContext = myValues;

((lineserIEs)MyChart.SerIEs[0]).IndependentAxis = new DateTimeAxis

{

    Minimum = myValues[0],

    AxisLabelStyle = Resources[@H_301_179@"DateTimeAxisLabelStyle1"] as Style,

    OrIEntation = AxisOrIEntation.X,

    Location = AxisLocation.Bottom

};

总结

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

 

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

总结

以上是内存溢出为你收集整理的使用SilverLight chart DateTime Axes的2个小技巧全部内容，希望文章能够帮你解决使用SilverLight chart DateTime Axes的2个小技巧所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。