Personnalisation des points de données dans les graphiques Silverlight

Question

Je travaille sur une application Silverlight qui extrait des objets d'un service Web et remplit dynamiquement un graphique (lineeries) basé sur les attributs d'objet. Le problème est que j'ai trop de points de données (points) sur la lineeries et je me demandais s'il y avait un moyen de les supprimer.

J'ai utilisé Setter pour réduire la visibilité des points de données mais je perds l'infobulle automatique (valeur d'attribut) obtenue lorsque les points de données étaient visibles. Y at-il moyen de retrouver l'info-bulle sans voir les points de données.

Merci Ron

PS: le XAML définit simplement le tableau, tout le reste se fait en cs

Answer 1

Vous pouvez soit le style des points de données afin qu'ils ne sont pas aussi grandes et de la manière si que vous pouvez toujours avoir les info-bulles pour tous les points de données, ou vous pouvez filtrer vos points de données vers une collection plus petite et ne pas avoir d'info-bulles (parce que vous avez supprimé les points de données) - vous ne pouvez pas vraiment l'avoir. Peut-être que vous devriez essayer un graphique de style de ligne à la place?

Answer 2

J'ai eu ce problème exact il y a quelques mois.

Pour moi, outliners étaient initialement pas important. J'ai donc décidé d'aller de l'avant et d'utiliser LINQ pour réduire la liste. Il devrait être assez facile de fournir une clause .Where (...), ou d'utiliser lambdas, pour sélectionner un sous-ensemble de la liste - toutes les N entrées, ou toutes les autres entrées de la liste.

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

Si outliners sont importants, vous pouvez avoir besoin d'écrire un algorithme simple qui filtre le point de vue de votre liste vers le bas un peu.

Voici un code simple (pas joli cependant) que j'ai dû écrire pour un graphique. Désolé de ne pas trop simplifier le code, commentez si vous avez besoin de détails ou de l'objet de données.

Je mesurais la taille des ensembles de contrôle au fil du temps, et corrélais cela avec les dates/heures de construction/et les vérifications.

Pour cette application, je voulais montrer changements dans les données, car j'avais beaucoup de points redondants. Ce sont les points d'inflexion d'intérêt. Imaginez que vous ayez 800 builds et des données associées - mais seulement 300 points de données intéressants. C'est beaucoup moins de données et améliore l'affichage.

J'explique le code un peu plus bas.

 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); 
        } 
       } 
      } 
     } 
    } 

Le _data est mon ensemble de données pour les assemblages, que je éventuellement utilise pour configurer la série:

 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); 
      } 
     } 

Et enfin, si vous ne voulez personnaliser les modèles DataPoint, il peut être fait, mais ce n'est pas trivial à mon avis.

Vous avez beaucoup à faire, comme

• Définition du type approprié du point (j'utilise LineDataPoints ici)
• Configuration de la palette de style pour sélectionner vos styles de points, qui comprennent que modèle personnalisé

Ceci est un point positif si vous avez besoin de faire beaucoup de personnalisation. Vous pouvez, par exemple, rendre le point de données entier transparent.

Voici un modèle personnalisé (désolé, très verbeux) pour un LineDataPoint (contrôles graphiques Silverlight Toolkit) qui a une liaison d'info-bulle personnalisée, une couleur liée pour le point et d'autres propriétés qui se rapportent au même point de données le code de filtre ci-dessus.

J'ai enlevé les états visuels de cette XAML pour le nettoyer

 <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> 

La palette de style personnalisé qui utilisera ces:

 <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> 

Et le XAML qui lie la palette de style:

  <charting:Chart 

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

      x:Name="CompressedSizes" /> 

Espérons que cela aide.