none
怎么样将数值直接显示在柱子图上? RRS feed

  • 问题

  • Silverlight 4

    用toolkit:chart做了一个柱子图,,,但是怎么让 柱子的值 直接显示在柱子上

    不希望只是鼠标放上去才显示出 柱子的值
    不吝赐教
    2010年9月18日 11:27

答案

  •  <ControlTemplate TargetType='charting:ColumnDataPoint' x:Key='LineNoTransition'>
                <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Opacity="0"
                            x:Name="Root" >
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.1"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation
                                                Storyboard.TargetName="MouseOverHighlight"
                                                Storyboard.TargetProperty="Opacity"
                                                To="0.6"
                                                Duration="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.1"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Unselected"/>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation
                                                Storyboard.TargetName="SelectionHighlight"
                                                Storyboard.TargetProperty="Opacity"
                                                To="0.6"
                                                Duration="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="RevealStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.5"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Shown">
                                <Storyboard>
                                    <DoubleAnimation
                                                Storyboard.TargetName="Root"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Hidden">
                                <Storyboard>
                                    <DoubleAnimation
                                                Storyboard.TargetName="Root"
                                                Storyboard.TargetProperty="Opacity"
                                                To="0"
                                                Duration="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid
                                Background="{TemplateBinding Background}">
                        <Rectangle>
                            <Rectangle.Fill>
                                <LinearGradientBrush>
                                    <GradientStop
                                                Color="#77ffffff"
                                                Offset="0"/>
                                    <GradientStop
                                                Color="#00ffffff"
                                                Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Border
                                    BorderBrush="#ccffffff"
                                    BorderThickness="1">
                            <Border
                                        BorderBrush="#77ffffff"
                                        BorderThickness="1"/>
                        </Border>
                        <Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
                        <Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
                        <Canvas Canvas.ZIndex="10" HorizontalAlignment="Center" Margin="-20 -20 0 0"   >
                            <Border  CornerRadius="10" Background="{StaticResource PrimaryBrush}" MinWidth="20" >
                                <ContentControl  Foreground="AliceBlue"  HorizontalAlignment="Center"  Content="{TemplateBinding FormattedDependentValue}"/>
                            </Border>
                        </Canvas>
                    </Grid>
                    <ToolTipService.ToolTip>
                            <StackPanel>
                            <TextBlock    HorizontalAlignment="Center"  Text="{TemplateBinding FormattedDependentValue}"/>
                            <TextBlock Text="点击查看细节"/>
                            </StackPanel>
                    </ToolTipService.ToolTip>
                </Border>
            </ControlTemplate>

            <Style TargetType='charting:ColumnDataPoint' x:Key='LineDataPointStyleBlue'>
                <Setter  Property="Background" Value="SteelBlue"/>
                <Setter Property='Template' Value='{StaticResource LineNoTransition}'  />
            </Style>

     

     

     <charting:Chart x:Name="SeriesChart" Grid.Row="1" Grid.Column="0"  BorderBrush="{StaticResource PrimaryBrush}" >
                <charting:Chart.Series >
                    <charting:ColumnSeries  IsSelectionEnabled="True"   DataPointStyle="{StaticResource LineDataPointStyleBlue}"  SelectionChanged="ColumnSeries_SelectionChanged"     Title=""
                        ItemsSource="{Binding}"
                        IndependentValueBinding="{Binding Day}"
                        DependentValueBinding="{Binding Num  }" Margin="0"  x:Name="stColumnSeries" >

                    </charting:ColumnSeries>
                </charting:Chart.Series>
            </charting:Chart>


    VNN是款不错的软件,它将更好! 无需上传实现大文件共享给朋友家人,个人计算机间远程访问、远程控制 http://www.wenlewang.com
    • 已标记为答案 Mog Liang 2010年9月24日 10:05
    2010年9月20日 6:05

全部回复

  • 1)我觉得SL的Chart还不完善。

    2)补充一个问题:那个显示出来的图片,怎么用简单的办法导出到文件?当然我们可以再后台通过WPF进行渲染,生成文件,但是那样很不方便。

    3)呵呵,我也不知道怎么把那个数字显示再柱子上。

    4)无奈之下,我只好用 Excel的Chart,或者ASP.net 的Chart.

    2010年9月20日 5:24
  •  <ControlTemplate TargetType='charting:ColumnDataPoint' x:Key='LineNoTransition'>
                <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Opacity="0"
                            x:Name="Root" >
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.1"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation
                                                Storyboard.TargetName="MouseOverHighlight"
                                                Storyboard.TargetProperty="Opacity"
                                                To="0.6"
                                                Duration="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.1"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Unselected"/>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation
                                                Storyboard.TargetName="SelectionHighlight"
                                                Storyboard.TargetProperty="Opacity"
                                                To="0.6"
                                                Duration="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="RevealStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.5"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Shown">
                                <Storyboard>
                                    <DoubleAnimation
                                                Storyboard.TargetName="Root"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Hidden">
                                <Storyboard>
                                    <DoubleAnimation
                                                Storyboard.TargetName="Root"
                                                Storyboard.TargetProperty="Opacity"
                                                To="0"
                                                Duration="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid
                                Background="{TemplateBinding Background}">
                        <Rectangle>
                            <Rectangle.Fill>
                                <LinearGradientBrush>
                                    <GradientStop
                                                Color="#77ffffff"
                                                Offset="0"/>
                                    <GradientStop
                                                Color="#00ffffff"
                                                Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Border
                                    BorderBrush="#ccffffff"
                                    BorderThickness="1">
                            <Border
                                        BorderBrush="#77ffffff"
                                        BorderThickness="1"/>
                        </Border>
                        <Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
                        <Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
                        <Canvas Canvas.ZIndex="10" HorizontalAlignment="Center" Margin="-20 -20 0 0"   >
                            <Border  CornerRadius="10" Background="{StaticResource PrimaryBrush}" MinWidth="20" >
                                <ContentControl  Foreground="AliceBlue"  HorizontalAlignment="Center"  Content="{TemplateBinding FormattedDependentValue}"/>
                            </Border>
                        </Canvas>
                    </Grid>
                    <ToolTipService.ToolTip>
                            <StackPanel>
                            <TextBlock    HorizontalAlignment="Center"  Text="{TemplateBinding FormattedDependentValue}"/>
                            <TextBlock Text="点击查看细节"/>
                            </StackPanel>
                    </ToolTipService.ToolTip>
                </Border>
            </ControlTemplate>

            <Style TargetType='charting:ColumnDataPoint' x:Key='LineDataPointStyleBlue'>
                <Setter  Property="Background" Value="SteelBlue"/>
                <Setter Property='Template' Value='{StaticResource LineNoTransition}'  />
            </Style>

     

     

     <charting:Chart x:Name="SeriesChart" Grid.Row="1" Grid.Column="0"  BorderBrush="{StaticResource PrimaryBrush}" >
                <charting:Chart.Series >
                    <charting:ColumnSeries  IsSelectionEnabled="True"   DataPointStyle="{StaticResource LineDataPointStyleBlue}"  SelectionChanged="ColumnSeries_SelectionChanged"     Title=""
                        ItemsSource="{Binding}"
                        IndependentValueBinding="{Binding Day}"
                        DependentValueBinding="{Binding Num  }" Margin="0"  x:Name="stColumnSeries" >

                    </charting:ColumnSeries>
                </charting:Chart.Series>
            </charting:Chart>


    VNN是款不错的软件,它将更好! 无需上传实现大文件共享给朋友家人,个人计算机间远程访问、远程控制 http://www.wenlewang.com
    • 已标记为答案 Mog Liang 2010年9月24日 10:05
    2010年9月20日 6:05
  • 1)老实说,用Expression Blend生成的东西,我的确优点看不明白。我至今还没有用过Expression Blend(主要是我的机器太差,没有安装).不过我可以肯定那是在Expression Blend里面生成并修改的。

    2) dreamwang,利用那个Expression Blend生成Template,麻烦不?我也想学习学习。

    3)有没有办法把那个统计图形用简单的办法变成文件,保存下来?

    2010年9月20日 11:37