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

Version imprimable

2 pièce(s) jointe(s)

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)

Pièce jointe 578708

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:

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)

Pièce jointe 578711

Je vous remercie

bonjour

pour :

Citation:

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:

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

1 pièce(s) jointe(s)

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:

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"
Pièce jointe 578744

Citation:

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:

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

09/09/2020, 08h39
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.

1 pièce(s) jointe(s)

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:

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:

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:

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:

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

Mon VM de test (datacontext):

Code:

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.

Pièce jointe 578846

Citation:

Envoyé par megamario

Bonjour à tous,

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.

Un dictionnaire Dictionary(integer,Double) c'est une mauvaise direction, il faut un Observable c.à.d un ObservableCollection(KeyValuePair(Of Integer, Double)) capable de notifier le changement de collection.
De plus pour le "RealTime" tu peux utiliser un Timer Wpf versus DispatcherTimer.
l'exemple de code qui suit illustre le mécanisme d'une hypothétique ObservableCollectionn dénommée "ValueList" de 10 points,bindée au Chart:
- l'on pousse les éléments un-à-un jusqu'à 10
- si le total dépasse 10,on retire le 1er et on ajoute le nouvel arrivant à la fin.

Code:

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
Imports System.ComponentModel
Imports System.Collections.ObjectModel
Public Class ViewModelBase
    Implements INotifyPropertyChanged
 
    Public Event PropertyChanged(sender As Object, e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
    Public Sub OnPropertyChanged(nomProp As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(nomProp))
    End Sub
End Class
 
'----------------------------------------------
Public Class MainVM
    Inherits ViewModelBase
    Public Sub New()
    End Sub
    Private m_totalPoint As Integer = 10
    Public Property TotalPoint As Integer
        Get
            Return m_totalPoint
        End Get
        Set(value As Integer)
            m_totalPoint = value
            OnPropertyChanged("TotalPoint")
        End Set
    End Property
    Private m_valueList As New ObservableCollection(Of KeyValuePair(Of Integer, Double))
    Public Property ValueList As ObservableCollection(Of KeyValuePair(Of Integer, Double))
        Get
            Return m_valueList
        End Get
        Set(value As ObservableCollection(Of KeyValuePair(Of Integer, Double)))
            m_valueList = value
            OnPropertyChanged("ValueList")
        End Set
    End Property
 
End Class

code xaml du Form User:

Code:

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
<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfBindToDictionary" 
    xmlns:toolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"        
    Title="Window1" Height="350" Width="525"
    Loaded="Window_Loaded">
    <Window.DataContext>
        <local:MainVM/>
    </Window.DataContext>
    <Grid>
 
        <toolkit:Chart  Name="lineChart" Title="Line Series Demo" 
 
		VerticalAlignment="Top" Margin="5,5,5,5" Height="254">
        <toolkit:LineSeries  
 
                DependentValuePath="Value" 
                IndependentValuePath="Key" 
                ItemsSource="{Binding Path=ValueList}" 
 
		        IsSelectionEnabled="True">
 
            </toolkit:LineSeries> 
 
        </toolkit:Chart>
    </Grid>
</Window>

et son important code behind.vb (à cause du DispatcherTimer qui fait le gros boulot y compris le rafraichiment UI)

Code:

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
Imports System.Collections.ObjectModel
Imports System.Windows.Threading
 
Public Class Window1
    Private dispatcherTimer As DispatcherTimer
    Private mainVM As MainVM
    Private rnd As New Random
    Private totPoint As Integer
    Private x As Integer = -1
    Public Sub New()
 
        ' Cet appel est requis par le concepteur.
        InitializeComponent()
 
        ' Ajoutez une initialisation quelconque après l'appel InitializeComponent().
        mainVM = CType(Me.DataContext, MainVM)
    End Sub
 
 
 
    Private Sub Window_Loaded(sender As System.Object, e As System.Windows.RoutedEventArgs)
        dispatcherTimer = New DispatcherTimer()
        AddHandler dispatcherTimer.Tick, AddressOf dispatcherTimer_Tick
        dispatcherTimer.Interval = New TimeSpan(0, 0, 1)
        dispatcherTimer.Start()
    End Sub
 
    Private Sub dispatcherTimer_Tick(sender As Object, e As EventArgs)
        totPoint = mainVM.TotalPoint
 
        Dim valueList As ObservableCollection(Of KeyValuePair(Of Integer, Double)) = mainVM.ValueList
        Dim indexFirst As Integer = 0
        Dim indexLast As Integer = valueList.Count - 1
 
 
        If valueList.Count > totPoint Then
            valueList.RemoveAt(indexFirst)
        Else
 
            x += 1
            Dim y As Double = rnd.Next(20, 100)
            Dim kv As New KeyValuePair(Of Integer, Double)(x, y)
            valueList.Add(kv)
            CommandManager.InvalidateRequerySuggested()
        End If
 
 
 
 
    End Sub
 
End Class

bon code...

09/09/2020, 23h41
MABROUKI

Citation:

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