在silverlight图表中自定义数据点

时间:2009-07-24 13:21:08

标签: silverlight tooltip visibility charts

我正在开发一个silverlight应用程序,它从Web服务中提取对象,并根据对象属性动态填充图表(lineseries)。问题是我在lineseries上有太多数据点(点),我想知道是否有办法删除它们。

我使用Setter来折叠数据点的可见性但是我松开了数据点可见时我得到的自动工具提示(属性值)。有没有办法在不看数据点的情况下重新获得工具提示。

由于 罗恩

PS:XAML只是定义了图表,其他一切都是在cs中完成的。

2 个答案:

答案 0 :(得分:2)

几个月前我就遇到了这个问题。

对我而言,大纲最初并不重要。所以我决定继续使用LINQ来削减列表。应该很容易提供.Where(...)子句,或者使用lambdas来选择列表的子集 - 每N个条目,或列表中的每个其他条目。

yourSeries.ItemsSource = blah.Where(x => x... /* insert expressions here to filter a little */)

如果大纲很重要,您可能需要编写一个简单的算法来过滤列表的视图。

这是一些我必须为图表编写的简单代码(不是很漂亮)。很抱歉没有太多简化代码,请注释是否需要详细信息或数据对象。

我一直在测量控制组件的大小,并将其与构建日期/时间/和签到相关联。

对于这个应用程序,我想在数据中显示更改,因为我有许多冗余点。那些是感兴趣的拐点。

想象一下,有800个版本和相关数据 - 但实际上只说300个有趣的数据点。这是一个很少的数据,并改善了显示。

我在下面解释一下代码。

        private void ParseData(string xml)
        {
        XDocument data = XDocument.Parse(xml);
        _data = new Dictionary<string, List<ControlAssembly>>();

        foreach (XElement dataSet in data.Descendants("data"))
        {
            string set = dataSet.Attribute("set").Value;
            long lastSize = 0;
            int matchingSizeCount = 0;
            foreach (XElement build in dataSet.Descendants("build"))
            {
                ControlAssembly ca = ControlAssembly.Parse(build);
                if (ca != null)
                {
                    List<ControlAssembly> list;

                    if (!_data.TryGetValue(set, out list))
                    {
                        _data[set] = new List<ControlAssembly>();
                        list = _data[set];
                    }

                    bool add = true;
                    if (ca.SizeInKilobytes == lastSize)
                    {
                        matchingSizeCount++;
                        if (matchingSizeCount > 1 && !ca.IsKnownReleaseWeek)
                        {
                            // cut down on the displayed data points
                            add = false;
                        }
                    }
                    else
                    {
                        matchingSizeCount = 0;
                        lastSize = ca.SizeInKilobytes;
                    }

                    if (add)
                    {
                        _data[set].Add(ca);
                    }
                }
            }
        }
    }

_data是我的程序集数据集,我最终用它来设置系列:

        ParseData(SampleData.LargeDataSet);
        _xapSeries = new Dictionary<string, LineSeries>();
        foreach (string assembly in _data.Keys)
        {
            LineSeries series = new LineSeries();
            series.Title = assembly.Replace(".dll", "");
            series.IndependentValueBinding = new Binding("BuildDateTime");
            series.DependentValueBinding = new Binding("CompressedSize");
            series.MarkerHeight = 12;
            series.MarkerWidth = 12;
            series.ItemsSource = _data[assembly].ToList();
            _xapSeries[assembly] = series;

            if (assembly != "Total")
            {
                CompressedSizes.Series.Add(series);
            }
        }

最后,如果您确实想要自定义DataPoint模板,可以这样做,但在我看来这并非易事。

你有很多事要做,比如

  • 定义正确的点类型(我在这里使用LineDataPoints)
  • 设置样式选项板以从您的点样式中进行选择,其中包括该自定义模板

如果您需要进行大量自定义,这是一个积极的方面。例如,您可以使整个数据点透明。

这是一个LineDataPoint(Silverlight Toolkit图表控件)的自定义模板(对不起,非常详细),它具有自定义ToolTip绑定,该点的绑定颜色以及与该数据点相关的其他属性。过滤上面的代码。

我从此XAML中移除了视觉状态以进行清理

        <ControlTemplate x:Key="CustomLineDataPointTemplate" TargetType="charting:LineDataPoint">
        <Grid x:Name="Root" Opacity="0" ToolTipService.ToolTip="{Binding DataPointTooltipText}">
            <Ellipse Opacity="0.4" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/>
            <Ellipse Opacity="0.4" RenderTransformOrigin="0.661,0.321">
                <Ellipse.Fill>
                    <RadialGradientBrush GradientOrigin="0.681,0.308">
                        <GradientStop Color="#00FFFFFF"/>
                        <GradientStop Color="#FF3D3A3A" Offset="1"/>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse StrokeThickness="2" Stroke="{Binding DataPointBrush}" />
            <Ellipse x:Name="SelectionHighlight" Opacity="0" Fill="Red"/>
            <Ellipse x:Name="MouseOverHighlight" Opacity="0" Fill="White"/>
        </Grid>
    </ControlTemplate>

将使用这些的自定义样式调色板:

        <datavis:StylePalette x:Key="MyCustomStylePalette">
        <!--Blue-->
        <Style TargetType="charting:LineDataPoint">
            <Setter Property="Background"><Setter.Value><RadialGradientBrush><RadialGradientBrush.RelativeTransform><TransformGroup><ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/><TranslateTransform X="-0.425" Y="-0.486"/></TransformGroup></RadialGradientBrush.RelativeTransform><GradientStop Color="#FFB9D6F7"/><GradientStop Color="#FF284B70" Offset="1"/></RadialGradientBrush></Setter.Value></Setter>
            <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
        <!--Red-->
        <Style TargetType="charting:LineDataPoint">
            <Setter Property="Background"><Setter.Value><RadialGradientBrush><RadialGradientBrush.RelativeTransform><TransformGroup><ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/><TranslateTransform X="-0.425" Y="-0.486"/></TransformGroup></RadialGradientBrush.RelativeTransform><GradientStop Color="#FFFBB7B5"/><GradientStop Color="#FF702828" Offset="1"/></RadialGradientBrush></Setter.Value></Setter>
            <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
        <!-- Light Green -->
        <Style TargetType="Control">
            <Setter Property="Background"><Setter.Value><RadialGradientBrush><RadialGradientBrush.RelativeTransform><TransformGroup><ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/><TranslateTransform X="-0.425" Y="-0.486"/></TransformGroup></RadialGradientBrush.RelativeTransform><GradientStop Color="#FFB8C0AC"/><GradientStop Color="#FF5F7143" Offset="1"/></RadialGradientBrush></Setter.Value></Setter>
            <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
        <!-- Yellow -->
        <Style TargetType="Control">
            <Setter Property="Background"><Setter.Value><RadialGradientBrush><RadialGradientBrush.RelativeTransform><TransformGroup><ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/><TranslateTransform X="-0.425" Y="-0.486"/></TransformGroup></RadialGradientBrush.RelativeTransform><GradientStop Color="#FFFDE79C"/><GradientStop Color="#FFF6BC0C" Offset="1"/></RadialGradientBrush></Setter.Value></Setter>
            <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
        <!-- Indigo -->
        <Style TargetType="Control">
            <Setter Property="Background"><Setter.Value><RadialGradientBrush><RadialGradientBrush.RelativeTransform><TransformGroup><ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/><TranslateTransform X="-0.425" Y="-0.486"/></TransformGroup></RadialGradientBrush.RelativeTransform><GradientStop Color="#FFA9A3BD"/><GradientStop Color="#FF382C6C" Offset="1"/></RadialGradientBrush></Setter.Value></Setter>
            <Setter Property="Template" Value="{StaticResource CustomLineDataPointTemplate}" />
        </Style>
    </datavis:StylePalette>

绑定样式调色板的XAML:

            <charting:Chart

            Title="Compressed control sizes over time" 
             StylePalette="{StaticResource MyCustomStylePalette}"

             x:Name="CompressedSizes" />

希望这有帮助。

答案 1 :(得分:0)

您可以设置数据点的样式,使它们不那么大,但仍然可以使用所有数据点的工具提示,或者您可以将数据点过滤到较小的集合而不是有工具提示(因为你摆脱了数据点) - 你不可能两种方式都有它...也许你应该尝试一下线型图?