Silverlight 图表的样式

rudigrobler

4.85/5 (52投票s)

2009年1月27日

CPOL

2分钟阅读

270630

5447

一篇关于如何美化标准的Silverlight图表，使其看起来像Google Analytics图表的文章。

下载源代码 - 11.1 KB

GoogleAnalyticsGraph

引言

我喜欢Google Analytics！我用它来监控我拥有的每个网站… 谷歌的图表看起来非常棒！这是一篇关于如何美化你的Silverlight图表，使其看起来像Google Analytics图表的演练！

开始之前

我们需要一些数据。我创建了非常基本的TrafficInfo和TrafficInfoCollection对象，其中包含一些可以绑定到的虚拟数据。

public class TrafficInfo
{
    public DateTime Date { get; set; }
    public int Visits { get; set; }
}

我们还需要Silverlight Toolkit（我使用了由Jaime Rodriquez创建的WPF端口）。

让我们从基础开始

添加以下两个命名空间

xmlns:charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.
                Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
xmlns:datavis="clr-namespace:Microsoft.Windows.Controls.DataVisualization;
               assembly=Microsoft.Windows.Controls.DataVisualization"

现在，让我们创建一个简单的折线图

<charting:Chart Width="800" Height="175">
    <charting:Chart.Series>
        <charting:LineSeries IsSelectionEnabled="True"
                    Title="Visits"
                    ItemsSource="{StaticResource TrafficInfo}"
                    IndependentValueBinding="{Binding Date}"
                    DependentValueBinding="{Binding Visits}" />
    </charting:Chart.Series>
</charting:Chart>

这是我们的杰作

还不错，但是…

样式，样式，样式

让我们开始美化我们的图表…我将美化分为两部分；第一部分将特定于折线图，第二部分可能也与其它类型的图表相关…

美化LineSeries

每个LineSeries都有一个PolylineStyle属性。PolylineStyle控制线条的外观。这是我们的GooglePolylineStyle

<Style x:Key="GooglePolylineStyle" TargetType="Polyline">
    <Setter Property="StrokeThickness" Value="5"/>
</Style>

这是LineDataPoint的样式

<Style x:Key="GoogleLineDataPointStyle" TargetType="charting:LineDataPoint">
    <Setter Property="Background" Value="#0077CC" />
    <Setter Property="BorderBrush" Value="White"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="charting:LineDataPoint">
                <Grid x:Name="Root" Opacity="1">
                    <ToolTipService.ToolTip>
                        <StackPanel Margin="2,2,2,2">
                            <ContentControl Content="{TemplateBinding IndependentValue}" 
                                            ContentStringFormat="{}{0:MMMM d, yyyy}"/>
                            <ContentControl Content="{TemplateBinding DependentValue}" 
                                            ContentStringFormat="Visits {0:###,###,###}"/>
                        </StackPanel>
                    </ToolTipService.ToolTip>
                    <Ellipse StrokeThickness="{TemplateBinding BorderThickness}" 
                     Stroke="{TemplateBinding BorderBrush}" 
                     Fill="{TemplateBinding Background}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

此外，更新图表的LineSeries以使用我们新创建的样式

<charting:LineSeries IsSelectionEnabled="True"
            PolylineStyle="{StaticResource GooglePolylineStyle}" 
            DataPointStyle="{StaticResource GoogleLineDataPointStyle}"
            MarkerHeight="10" MarkerWidth="10"
            Title="Visits"
            ItemsSource="{StaticResource TrafficInfo}"                                    
            IndependentValueBinding="{Binding Date}"
            DependentValueBinding="{Binding Visits}" />

这是结果

这里有几点需要注意。每个DataPoint都有以下属性，你可以在工具提示中使用和显示

DependentValue（因变量值）
FormattedDependentValue（格式化的因变量值）
IndependentValue（自变量值）
FormattedIndependentValue（格式化的自变量值）

每个LineSeries可以使用MarkerWidth和MarkerHeight指定DataPoint标记大小。

美化图表

我想删除图表的标题和图例。有两种删除这些项目的方法！你可以为标题和图例创建新样式，并将其可见性设置为Collapsed。（如果你不需要DataPoint标记，此技巧也适用。）

<Style x:Key="GoogleNoTitle" TargetType="datavis:Title">
    <Setter Property="Visibility" Value="Collapsed"/>
</Style>

然后，只需在图表上设置TitleStyle和LedgerStyle属性即可

TitleStyle="{StaticResource GoogleNoTitle}"

删除这些内容的第二个方法是，为图表创建一个新的ControlTemplate并永久删除它们！

<Style x:Key="GoogleChart" TargetType="charting:Chart">
    <Setter Property="PlotAreaStyle">
        <Setter.Value>
            <Style TargetType="Grid">
                <Setter Property="Background" Value="White" />
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="charting:Chart">
                <Border
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Padding="10">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="1" Margin="0,15,0,15">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid x:Name="ChartArea" 
                                 Style="{TemplateBinding ChartAreaStyle}">
                                <Grid x:Name="PlotArea" 
                                      Style="{TemplateBinding PlotAreaStyle}" 
                                      Margin="0,0,0,0" >
                                    <Grid x:Name="GridLinesContainer" />
                                    <Grid x:Name="SeriesContainer" />
                                    <Border Margin="0,0,0,0" 
                                      BorderBrush="#FF919191" 
                                      BorderThickness="0,1,0,1"/>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

新的ControlTemplate仅删除标题和图例！我们需要美化的图表的最后一部分是轴。如果你查看Google图表，你会注意到垂直网格线指示一周的开始；这有多难？

每个图表都有一个Axes属性，该属性可以包含多个轴！以下是我使用的一些轴属性

`LabelStringFormat（标签字符串格式）`	MMMM d, yyyy	更改标签的格式
`ShowGridLines（显示网格线）`	True	显示网格线
`ShowTickMarks（显示刻度标记）`	True	显示网格线标记
`ShouldIncludeZero（应该包括零）`	True	从0开始缩放
`IntervalType（间隔类型）`	天数	指示轴上每个单位的含义
`Interval`	7	轴上点之间的间隔
`IntervalOffset（间隔偏移）`	1	用于创建轴的偏移量
`IntervalOffsetType（间隔偏移类型）`	天数	偏移类型

这是标记

<charting:Chart.Axes>
    <charting:Axis Orientation="Horizontal" 
                   AxisType="DateTime" ShowGridLines="True" 
                   ShowTickMarks="True" LabelStringFormat="MMMM d, yyyy" 
                   IntervalType="Days" Interval="7" 
                   IntervalOffset="1" IntervalOffsetType="Days" 
                   Style="{StaticResource GoogleAxisStyle}" />
    <charting:Axis Orientation="Vertical" AxisType="Linear" ShowTickMarks="False" 
                   Interval="4000" IntervalType="Number" 
                   ShowGridLines="True" ShouldIncludeZero="True" 
                   Style="{StaticResource GoogleAxisStyle}"/>
</charting:Chart.Axes>

就这样。

Silverlight Toolkit Chart控件非常灵活且功能强大！试一试，你会对可以美化它的无尽方式感到惊讶！

如果你觉得这篇文章有用或有趣，请投票支持它！