[WPF CHART]Page d'aide pour les paramètres du visualiseur graphique

**megamario** · 07/09/2020, 15h54

Bonjour à tous,

J'aurai besoin d'un petit coup de main pour trouver les différents paramètre (du moins les principaux), pour l'objet
Chart :
-System.Windows.Controls.DataVisualization.Charting
-System.Windows.Controls.DataVisualization.Toolkit

J'arrive à afficher mes courbes, mais j'aimerais customiser un peu l'ensemble avec par exemple:

Dans l'ordre d'importance pour moi actuellement
1)Supprimer le texte de l'axe des X.
2)Le choix de la couleur des courbes
3)Le positionnement de la désignation des courbes (actuellement sur le coté droit par défaut), j'aimerais bien qu'il se trouve sur la même hauteur que le titre général.

Supprimer le texte des X est le plus important, il faut une petite explication pour comprendre et le plus simple c'est une image de ce que l'on a avec notre ancien logiciel (en vb6)

Nom : DiodeDroper.png
Affichages : 436
Taille : 10,3 Ko

Nom : DiodeDroper.png
Affichages : 436
Taille : 10,3 Ko

La 1er courbe est linaire, mais la 2eme courbe est en forme de dent de scie.
La source de données est calculée (pour simulation) et contient un nombre important de data, mais ce qui est intéressant c'est les paliers. Je n'ai donc pas besoin d'avoir une visualisation des valeurs de X.

Voila ce que j'ai dans mon

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
        <chartingToolkit:Chart Name="lineUP" Title="Direction UP" VerticalAlignment="Top"  Height="254" Grid.Row="0">
            <chartingToolkit:LineSeries Title="Input Voltage" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding DicoInputUP}" IsSelectionEnabled="True"/>
            <chartingToolkit:LineSeries Title="Output Voltage" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding DicoOutputUP}" IsSelectionEnabled="True"/>
        </chartingToolkit:Chart>

Voila ce qui en ressort (attention j'ai mis quelques valeurs bidon pour tester dans DicoInputUP et DicoOutputUP)

Nom : DiodeDroper2.png
Affichages : 410
Taille : 22,4 Ko

Nom : DiodeDroper2.png
Affichages : 410
Taille : 22,4 Ko

Je vous remercie

**MABROUKI** · 08/09/2020, 02h43

bonjour

pour :

Le positionnement de la désignation des courbes (actuellement sur le coté droit par défaut), j'aimerais bien qu'il se trouve sur la même hauteur que le titre général.

Pour cela tu dois retemplater le chart .
code xaml du style custom à appliquer au chart:

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 <!--Change le Template du Chart comme ci-dessous-->
 
        <Style x:Key="ChartStyle1" TargetType="{x:Type toolkit:Chart}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type toolkit:Chart}">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <!--ici le titre chart-->
                                <visualizationToolkit:Title 
                                    Grid.Row="0"
                                    Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}">
                                </visualizationToolkit:Title> 
                                <!--ici la legende-->
                                <visualizationToolkit:Legend 
                                    x:Name="Legend" Grid.Row="1" Style="{TemplateBinding LegendStyle}" >
                                </visualizationToolkit:Legend> 
                                <!--ici le panel--> 
                                <Grid Margin="0,15" Grid.Row="2">
                                    <chartPrimitive:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                                        <Grid Style="{TemplateBinding PlotAreaStyle}" Panel.ZIndex="-1"/>
                                        <Border BorderBrush="#FF919191" BorderThickness="1" Panel.ZIndex="10"/>
                                    </chartPrimitive:EdgePanel>
                                </Grid>
 
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

bon code...

**megamario** · 08/09/2020, 08h47

Bonjour MABROUKI,

Comme toujours c'est nickel, j'ai compris le principe et je l'ai un peu adapté afin de laisser plus de place à la courbe, mais c'est parfait pour le positionnement du titre, légende et courbe.

Il 'y a t'il quelque chose pour masquer les valeurs sur les axes des X. Je vais chercher dans les </visualizationToolkit: xxxx>

J'ai simplement été obligé d'ajouter:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
        xmlns:visualizationToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 
        xmlns:chartPrimitive="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"

Nom : DiodeDroper3.png
Affichages : 387
Taille : 26,1 Ko

**MABROUKI** · 08/09/2020, 16h16

Envoyé par megamario

Bonjour MABROUKI,

Il 'y a t'il quelque chose pour masquer les valeurs sur les axes des X. Je vais chercher dans les </visualizationToolkit: xxxx>

Pour cacher ce sein que je ne saurais voir le remède est dans ce bout de code:

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  <toolkit:Chart.Series >
                    <toolkit:LineSeries
                        Title="Serie1"
                        ItemsSource="{Binding Path=Serie1}"
                        IndependentValueBinding="{Binding Path=Key}"  
                        DependentValueBinding="{Binding Path=Value}"
                        >
 
                       <!--SVP  C'est par là la sortie du tunnel-->
                            <toolkit:LineSeries.IndependentAxis>
                            <toolkit:LinearAxis Orientation="X"  FontSize="10"  Foreground="Blue"  Visibility="Hidden"/>
                        </toolkit:LineSeries.IndependentAxis>
                        </toolkit:LineSeries>
 
                    <toolkit:LineSeries
                            Title="serie2" 
                            ItemsSource="{Binding Path=Serie2}"
                            IndependentValueBinding="{Binding Path=Key}"  
                            DependentValueBinding="{Binding Path=Value}"
                        >
                        <!--S.V.P  C'est par là la sortie du tunnel-->
                            <toolkit:LineSeries.IndependentAxis>
                            <toolkit:LinearAxis Orientation="X"  FontSize="10"  Foreground="Blue"   Visibility="Hidden"/>
                        </toolkit:LineSeries.IndependentAxis>
                    </toolkit:LineSeries>
                </toolkit:Chart.Series>
            </toolkit:Chart>

bon code...

**megamario** · 09/09/2020, 08h39

Bonjour,

C'est vraiment parfait, merci beaucoup.
Il n'y a pas une documentation la dessus quelque part?
Je la cherche, mais je n'ai rien trouvé pour le moment. A part des tuto, bien sympa, mais qui explique en général la mise en place.

Merci encore en tout cas, bonne journée.

**megamario** · 09/09/2020, 10h05

Bonjour à tous,

Je vous donne le XAML et le bout de code datacontext.

En plus de ce que m'a donné MABROUKI (encore merci ), j'ai trouvé le moyen de masquer les points sur la ligne, quand on a beaucoup de point cela deviens vite moins lisible, surtout quand on en a pas besoin.
Ainsi que changer la couleur des lignes.

Déclaration:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
        xmlns:visualizationToolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 
        xmlns:chartPrimitive="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"

Style:

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
  <Window.Resources>
        <Style x:Key="ChartStyle1" TargetType="{x:Type chartingToolkit:Chart}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type chartingToolkit:Chart}">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"/>
                                    <RowDefinition Height="*"/>
 
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions >
                                    <ColumnDefinition Width="1*"/>
                                    <ColumnDefinition Width="1*"/>
                                </Grid.ColumnDefinitions>
                                <!--ici le titre chart-->
                                <visualizationToolkit:Title 
                                    Grid.Row="0" Grid.Column="0"
                                    HorizontalAlignment="Center" VerticalAlignment="Center"
                                    FontSize="25" FontWeight="Bold" 
                                    Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}">
                                </visualizationToolkit:Title>
                                <!--ici la legende-->
                                <visualizationToolkit:Legend 
                                    x:Name="Legend" Grid.Row="0" Grid.Column="1" Style="{TemplateBinding LegendStyle}" 
                                    Width="180"
                                    VerticalAlignment="Center" >
                                </visualizationToolkit:Legend>
                                <!--ici le panel-->
                                <Grid Margin="0" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
                                    <chartPrimitive:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                                        <Grid Style="{TemplateBinding PlotAreaStyle}" Panel.ZIndex="-1"/>
                                        <Border Grid.Row="0" BorderBrush="#FF919191" BorderThickness="1" Panel.ZIndex="10" />
                                    </chartPrimitive:EdgePanel>
                                </Grid>
 
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

Code:

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<chartingToolkit:Chart Grid.Row="1"
                               Style="{StaticResource ResourceKey=ChartStyle1}" 
                               Name="lineDown" 
                               Title="Direction DOWN" 
                               VerticalAlignment="Stretch" 
                               HorizontalAlignment="Stretch">
            <chartingToolkit:LineSeries Title="Input Voltage" 
                                        DependentValuePath="Value" 
                                        IndependentValuePath="Key" 
                                        ItemsSource="{Binding DicoInputDown}" 
                                        IsSelectionEnabled="True">
                <chartingToolkit:LineSeries.IndependentAxis>
                    <chartingToolkit:LinearAxis Orientation="X"  FontSize="10"  Foreground="Blue"   Visibility="Hidden"/>
                </chartingToolkit:LineSeries.IndependentAxis>
                <!--ici pour masquer les points et la couleur-->
                <chartingToolkit:LineSeries.DataPointStyle >
                    <Style TargetType="chartingToolkit:LineDataPoint" >
                        <Setter Property="Visibility" Value="Collapsed" />
                        <Setter Property="Width" Value="0"/>
                        <Setter Property="Background" Value="red" />
                    </Style>
                </chartingToolkit:LineSeries.DataPointStyle>
            </chartingToolkit:LineSeries>
            <chartingToolkit:LineSeries Title="Output Voltage" 
                                        DependentValuePath="Value" 
                                        IndependentValuePath="Key" 
                                        ItemsSource="{Binding DicoOutputDown}" 
                                        IsSelectionEnabled="True"
                                        >
                <chartingToolkit:LineSeries.IndependentAxis>
                    <chartingToolkit:LinearAxis Orientation="X"  FontSize="10"  Foreground="Blue"   Visibility="Hidden"/>
                </chartingToolkit:LineSeries.IndependentAxis>
                <!--ici pour masquer les points et la couleur-->
                <chartingToolkit:LineSeries.DataPointStyle >
                    <Style TargetType="chartingToolkit:LineDataPoint" >
                        <Setter Property="Visibility" Value="Collapsed" />
                        <Setter Property="Width" Value="0"/>
                        <Setter Property="Background" Value="blue"  />
                    </Style>
                </chartingToolkit:LineSeries.DataPointStyle>
            </chartingToolkit:LineSeries>
        </chartingToolkit:Chart>

Je ne sais pas pourquoi, mais la propriété visibility=Collapsed ne semble pas fonctionner contrairement aux instructions trouvés sur le Forum MSDN (ICI), mais Width=0 par contre fonctionne bien et masque les points.

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<Setter Property="Visibility" Value="Collapsed" />
                        <Setter Property="Width" Value="0"/>

Mon VM de test (datacontext):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
Imports System.Collections.ObjectModel
Imports System.ComponentModel
Imports System.Windows.Threading
 
Public Class MesDatas
        Implements INotifyPropertyChanged
	Private _DicoInputDown As ObservableCollection(Of KeyValuePair(Of Integer, Integer))
	Private _DicoOutputDown As ObservableCollection(Of KeyValuePair(Of Integer, Integer))
 
	Public Event PropertyChanged(sender As Object, e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
 
	Public Sub OnPropertyChanged(ByVal propname As String)
 
		RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propname))
	End Sub
 
	Public Sub New()
		DicoOutputDown = New ObservableCollection(Of KeyValuePair(Of Integer, Integer))
		AddCollection(DicoOutputDown, 0, 40)
		AddCollection(DicoOutputDown, 1, 30)
		AddCollection(DicoOutputDown, 2, 50)
		AddCollection(DicoOutputDown, 3, 20)
		AddCollection(DicoOutputDown, 4, 60)
		AddCollection(DicoOutputDown, 5, 52)
 
		DicoInputDown = New ObservableCollection(Of KeyValuePair(Of Integer, Integer))
		AddCollection(DicoInputDown, 0, 58)
		AddCollection(DicoInputDown, 5, 52)
 
	End Sub
	Private Sub AddCollection(ByRef col As ObservableCollection(Of KeyValuePair(Of Integer, Integer)), ByVal key As Integer, ByVal value As Integer)
		col.Add(New KeyValuePair(Of Integer, Integer)(key, value))
	End Sub
 
	Public Property DicoInputDown() As ObservableCollection(Of KeyValuePair(Of Integer, Integer))
		Get
			Return _DicoInputDown
		End Get
		Set(value As ObservableCollection(Of KeyValuePair(Of Integer, Integer)))
			_DicoInputDown = value
			OnPropertyChanged("DicoInputDown")
		End Set
	End Property
	Public Property DicoOutputDown() As ObservableCollection(Of KeyValuePair(Of Integer, Integer))
		Get
			Return _DicoOutputDown
		End Get
		Set(value As ObservableCollection(Of KeyValuePair(Of Integer, Integer)))
			_DicoOutputDown = value
			OnPropertyChanged("DicoOutputDown")
		End Set
	End Property
End Class

Voila, si cela peu aider.

J'avais mis un dictionnaire Dictionary(integer,integer), cela fonctionnait, mais si je voulais faire un temps réel ou simplement rafraîchir la courbe avec des nouvelles données cela ne fonctionnait plus bien sûr.

Nom : DiodeDroper4.png
Affichages : 380
Taille : 21,8 Ko

Nom : DiodeDroper4.png
Affichages : 380
Taille : 21,8 Ko

**MABROUKI** · 09/09/2020, 23h41

Envoyé par megamario

Bonjour,

C'est vraiment parfait, merci beaucoup.
Il n'y a pas une documentation la dessus quelque part?
Je la cherche, mais je n'ai rien trouvé pour le moment. A part des tuto, bien sympa, mais qui explique en général la mise en place.

Merci encore en tout cas, bonne journée.

Alas non , pas de doc MSDN pour le WPF-Toolkit-Charting.
Pour les tutos tu as ça :
https://www.codeproject.com/Articles...ar-Area-Pie-Co

tu as aussi ça plus étoffé avec plusieurs chapitres :
https://csharphardcoreprogramming.wo...charts-part-1/
bon code...

[WPF CHART]Page d'aide pour les paramètres du visualiseur graphique

VB.NET

Vue hybride

Discussions similaires

Partager

Partager