4

Webサービスからオブジェクトを取得し、オブジェクトの属性に基づいてグラフ(線系列)に動的にデータを入力するSilverlightアプリケーションに取り組んでいます。問題は、ラインシリーズにデータポイント(ドット)が多すぎて、それらを削除する方法があるかどうか疑問に思っていたことです。

Setterを使用してデータポイントの表示を折りたたんでいますが、データポイントが表示されたときに取得した自動ツールチップ(属性値)が失われます。データポイントを表示せずにツールチップを取り戻す方法はありますか。

ありがとうロン

PS:XAMLはチャートを定義するだけで、他のすべてはcsで行われます

4

2 に答える 2

2

私は数ヶ月前にこの正確な問題を抱えていました。

私にとって、アウトライナーは最初は重要ではありませんでした。そこで、LINQ を使用してリストを絞り込むことにしました。.Where(...) 句を提供するか、ラムダを使用して、リストのサブセット (N エントリごと、またはリスト内の 1 つおきのエントリ) を選択するのは簡単です。

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 を使用しています)
  • そのカスタム テンプレートを含むポイント スタイルから選択するスタイル パレットをセットアップします。

多くのカスタマイズを行う必要がある場合、これはプラスです。たとえば、データ ポイント全体を透明にすることができます。

これは、カスタム ToolTip バインディング、ポイントのバインドされた色、および上記のフィルター コードから同じデータ ポイントに関連するその他のプロパティを持つ LineDataPoint (Silverlight Toolkit チャート コントロール) のカスタム テンプレート (申し訳ありませんが、非常に詳細です) です。 .

この 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" />

お役に立てれば。

于 2009-08-05T17:06:44.563 に答える
0

データ ポイントのスタイルを大きくして邪魔にならないようにして、すべてのデータ ポイントのツールヒントを表示できるようにするか、データ ポイントをより小さなコレクションに絞り込んでツールヒントを表示しないようにすることができます (データ ポイントを削除したため) - 実際には両方の方法を使用することはできません.. 代わりに線スタイルのグラフを試してみてください。

于 2009-07-24T14:46:12.970 に答える