locked
silverlight5中的Chart控件如何实现点击显示详情? RRS feed

  • 问题

  • 如题,silverlight5中的Chart控件(silverlight toolkit类库中的chart),如何实现点击(如点击柱状图的某一个柱),显示此数据的详情?

    例如:
    3月份的销量是200
    4月份的销量是300
    5月份的销量是600

    然后我点击5月的柱子,可以显示出来5月份销售的那600个产品的详细信息,
    2015年4月1日 4:29

答案

  • Hi,

    Silverlight5中的Chart鼠标悬停时,默认只显示数值,如果你想显示更详细的信息的话,你得改变DataPoint的样式, 你可以尝试下我的代码:

      <toolkit:Chart HorizontalAlignment="Left" Title="Chart Title" VerticalAlignment="Top"  x:Name="MyChart" Height="290" Width="390">
                 <toolkit:ColumnSeries DependentValuePath="Month" IndependentValuePath="Number" ItemsSource="{Binding}"  >
                    <toolkit:ColumnSeries.DataPointStyle>
                        <Style TargetType="toolkit:ColumnDataPoint">
                            <Setter Property="Background" Value="Green" />
                            <Setter Property="BorderBrush" Value="Gray" />
                            <Setter Property="BorderThickness" Value="1" />
                            <Setter Property="IsTabStop" Value="False" />
                            <Setter Property="Width" Value="4" />
                            <Setter Property="Height" Value="4" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="toolkit:ColumnDataPoint">
                                        <Grid x:Name="Root" Opacity="1">
                                            <ToolTipService.ToolTip>
                                                <StackPanel Margin="2,2,2,2">
                                                    <TextBlock Text="月数"></TextBlock>
                                                    <ContentControl Content="{TemplateBinding FormattedDependentValue}"  />
                                                    <TextBlock Text="数量"></TextBlock>
                                                    <ContentControl Content="{TemplateBinding IndependentValue}" />
                                                    <TextBlock Text="详细"></TextBlock>
                                                    <ContentControl Content="{Binding Details}" />
                                                </StackPanel>
                                            </ToolTipService.ToolTip>
                                            <Ellipse StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </toolkit:ColumnSeries.DataPointStyle>          
                </toolkit:ColumnSeries>
            </toolkit:Chart>

    Code behind:

     public partial class MainPage : UserControl
        {
            public ObservableCollection<Products> Team { get; set; }
            public MainPage()
            {
                InitializeComponent();
                Team = new ObservableCollection<Products> 
                    { 
                     new Products("January details",1, 114), 
                     new Products("February detals", 2,225), 
                     new Products("March details",3, 140)};
                this.MyChart.DataContext = Team;
    
            }
        }
        public class Products
        {
            public Products() { }
            public Products(string details, int mon, int number)
            {
                Details = details;
                Month = mon;
                Number = number;
            }
            public string Details { get; set; }
            public int Month { get; set; }
            public int Number { get; set; }
        }

    Best Regards,

    Jambor


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    2015年4月10日 9:25