Aide création d un graphique avec point mobile drag and drop

**moijerem** · 26/03/2017, 20h33

Bonjour voila je voudrais savoir s'il est possible de charger un tableau avec 4 courbes de 10 points chacune
avec la possibilité de :
bouger les points avec la souris mais également la possibilité de rentrée les coordonné du point.
Une fois les points paramètres j aimerais récupèrent les valeurs dans un fichier
Merci pour vos réponses :p

**moijerem** · 27/03/2017, 20h22

une video vaut plus que des mots j aimerais faire le même style de graphique

**jopopmk** · 30/03/2017, 07h54

Salut,

tu utilises un contrôle ChartChépakoi ou tu pars from scratch ?

**MABROUKI** · 30/03/2017, 15h05

bonjour

Le control Chart de Microsoft permet cela et bien plus ,mais il faut que tu le code...

Mais tu dois donner ton code pour qu'on puisse t'aider ....
Avec des videos on est plutôt parti pour visionner le dernier jeu de StartRek !!!

**moijerem** · 30/03/2017, 18h19

Envoyé par MABROUKI

bonjour

Le control Chart de Microsoft permet cela et bien plus ,mais il faut que tu le code...

Mais tu dois donner ton code pour qu'on puisse t'aider ....
Avec des videos on est plutôt parti pour visionner le dernier jeu de StartRek !!!

Bonjour Mabrouki,

Voici mon code pour générer les 4 courbes en question dans mon chart. Un bouton est mis à jours toutes les seconde via un timer (points de courbes récupérés via des textbox car l'utilisateur interagi avec les données)

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
'MAJ COURBE
        Try
 
            Me.Chart1.ChartAreas(0).AxisX.MajorGrid.LineColor = Color.Transparent
            'Rendre la couleur du quadrillage dans le sens y transparente
            Me.Chart1.ChartAreas(0).AxisY.MajorGrid.LineColor = Color.Transparent
 
            '-------------------------------------------------------------------------------------------
            'Canal A
            Me.Chart1.Series.Clear()
            Me.Chart1.Series.Add("Canal A")
            Me.Chart1.Series(0).ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line
            Me.Chart1.Series(0).BackGradientStyle = GradientStyle.Center
            Me.Chart1.Series(0).BorderWidth = 3
            Me.Chart1.Series("Canal A").Points.AddXY(Val(ParaH1_CA.Text), Val(txt_valeur1CA.Text))
            Me.Chart1.Series("Canal A").Points.AddXY(Val(ParaH2_CA.Text), Val(txt_valeur2CA.Text))
            Me.Chart1.Series("Canal A").Points.AddXY(Val(ParaH3_CA.Text), Val(txt_valeur3CA.Text))
            Me.Chart1.Series("Canal A").Points.AddXY(Val(ParaH4_CA.Text), Val(txt_valeur4CA.Text))
            Me.Chart1.Series("Canal A").Points.AddXY(Val(ParaH5_CA.Text), Val(txt_valeur5CA.Text))
            Me.Chart1.Series("Canal A").Points.AddXY(Val(ParaH6_CA.Text), Val(txt_valeur6CA.Text))
            Me.Chart1.Series("Canal A").Points.AddXY(Val(ParaH7_CA.Text), Val(txt_valeur7CA.Text))
            Me.Chart1.Series("Canal A").Points.AddXY(Val(ParaH8_CA.Text), Val(txt_valeur8CA.Text))
            Me.Chart1.Series("Canal A").Points.AddXY(Val(ParaH9_CA.Text), Val(txt_valeur9CA.Text))
            Me.Chart1.Series("Canal A").Points.AddXY(Val(ParaH10_CA.Text), Val(txt_valeur10CA.Text))
            Me.Chart1.Series(0).MarkerSize = 10
            Me.Chart1.Series(0).MarkerStyle = MarkerStyle.Circle
            Chart1.ChartAreas(0).AlignmentOrientation = AreaAlignmentOrientations.Horizontal
 
 
            '-------------------------------------------------------------------------------------------
            'Canal B
            Me.Chart1.Series.Add("Canal B")
            Me.Chart1.Series(1).ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line
            Me.Chart1.Series(1).BackGradientStyle = GradientStyle.Center
            Me.Chart1.Series(1).BorderWidth = 3
            Me.Chart1.Series("Canal B").Points.AddXY(Val(ParaH1_CB.Text), Val(txt_valeur1CB.Text))
            Me.Chart1.Series("Canal B").Points.AddXY(Val(ParaH2_CB.Text), Val(txt_valeur2CB.Text))
            Me.Chart1.Series("Canal B").Points.AddXY(Val(ParaH3_CB.Text), Val(txt_valeur3CB.Text))
            Me.Chart1.Series("Canal B").Points.AddXY(Val(ParaH4_CB.Text), Val(txt_valeur4CB.Text))
            Me.Chart1.Series("Canal B").Points.AddXY(Val(ParaH5_CB.Text), Val(txt_valeur5CB.Text))
            Me.Chart1.Series("Canal B").Points.AddXY(Val(ParaH6_CB.Text), Val(txt_valeur6CB.Text))
            Me.Chart1.Series("Canal B").Points.AddXY(Val(ParaH7_CB.Text), Val(txt_valeur7CB.Text))
            Me.Chart1.Series("Canal B").Points.AddXY(Val(ParaH8_CB.Text), Val(txt_valeur8CB.Text))
            Me.Chart1.Series("Canal B").Points.AddXY(Val(ParaH9_CB.Text), Val(txt_valeur9CB.Text))
            Me.Chart1.Series("Canal B").Points.AddXY(Val(ParaH10_CB.Text), Val(txt_valeur10CB.Text))
            Me.Chart1.Series(1).MarkerSize = 10
            Me.Chart1.Series(1).MarkerStyle = MarkerStyle.Circle
            '------------------------------------------------------------------------------------------
 
            '-------------------------------------------------------------------------------------------
            'Canal C
            Me.Chart1.Series.Add("Canal C")
            Me.Chart1.Series(2).ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line
            Me.Chart1.Series(2).BackGradientStyle = GradientStyle.Center
            Me.Chart1.Series(2).BorderWidth = 3
            Me.Chart1.Series("Canal C").Points.AddXY(Val(ParaH1_CC.Text), Val(txt_valeur1CC.Text))
            Me.Chart1.Series("Canal C").Points.AddXY(Val(ParaH2_CC.Text), Val(txt_valeur2CC.Text))
            Me.Chart1.Series("Canal C").Points.AddXY(Val(ParaH3_CC.Text), Val(txt_valeur3CC.Text))
            Me.Chart1.Series("Canal C").Points.AddXY(Val(ParaH4_CC.Text), Val(txt_valeur4CC.Text))
            Me.Chart1.Series("Canal C").Points.AddXY(Val(ParaH5_CC.Text), Val(txt_valeur5CC.Text))
            Me.Chart1.Series("Canal C").Points.AddXY(Val(ParaH6_CC.Text), Val(txt_valeur6CC.Text))
            Me.Chart1.Series("Canal C").Points.AddXY(Val(ParaH7_CC.Text), Val(txt_valeur7CC.Text))
            Me.Chart1.Series("Canal C").Points.AddXY(Val(ParaH8_CC.Text), Val(txt_valeur8CC.Text))
            Me.Chart1.Series("Canal C").Points.AddXY(Val(ParaH9_CC.Text), Val(txt_valeur9CC.Text))
            Me.Chart1.Series("Canal C").Points.AddXY(Val(ParaH10_CC.Text), Val(txt_valeur10CC.Text))
            Me.Chart1.Series(2).MarkerSize = 10
            Me.Chart1.Series(2).MarkerStyle = MarkerStyle.Circle
            '------------------------------------------------------------------------------------------
 
            '-------------------------------------------------------------------------------------------
            'Canal D
            Me.Chart1.Series.Add("Canal D")
            Me.Chart1.Series(3).ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line
            Me.Chart1.Series(3).BackGradientStyle = GradientStyle.Center
            Me.Chart1.Series(3).BorderWidth = 3
            Me.Chart1.Series("Canal D").Points.AddXY(Val(ParaH1_CD.Text), Val(txt_valeur1CD.Text))
            Me.Chart1.Series("Canal D").Points.AddXY(Val(ParaH2_CD.Text), Val(txt_valeur2CD.Text))
            Me.Chart1.Series("Canal D").Points.AddXY(Val(ParaH3_CD.Text), Val(txt_valeur3CD.Text))
            Me.Chart1.Series("Canal D").Points.AddXY(Val(ParaH4_CD.Text), Val(txt_valeur4CD.Text))
            Me.Chart1.Series("Canal D").Points.AddXY(Val(ParaH5_CD.Text), Val(txt_valeur5CD.Text))
            Me.Chart1.Series("Canal D").Points.AddXY(Val(ParaH6_CD.Text), Val(txt_valeur6CD.Text))
            Me.Chart1.Series("Canal D").Points.AddXY(Val(ParaH7_CD.Text), Val(txt_valeur7CD.Text))
            Me.Chart1.Series("Canal D").Points.AddXY(Val(ParaH8_CD.Text), Val(txt_valeur8CD.Text))
            Me.Chart1.Series("Canal D").Points.AddXY(Val(ParaH9_CD.Text), Val(txt_valeur9CD.Text))
            Me.Chart1.Series("Canal D").Points.AddXY(Val(ParaH10_CD.Text), Val(txt_valeur10CD.Text))
            Me.Chart1.Series(3).MarkerSize = 10
            Me.Chart1.Series(3).MarkerStyle = MarkerStyle.Circle
            '------------------------------------------------------------------------------------------
 
            'Canal valeur mini et maxi
            Me.Chart1.Series.Add(" ")
            Me.Chart1.Series(4).ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line
            Me.Chart1.Series(4).BackGradientStyle = GradientStyle.Center
            Me.Chart1.Series(4).BorderWidth = 3
            Me.Chart1.Series(" ").Points.AddXY(0, 0)
            Me.Chart1.Series(" ").Points.AddXY(24, 0)
 
 
        Catch ex As Exception
 
        End Try

L'idée c'est de pouvoir déplacer chaque point avec la souris sur l'axe des X et Y en récupérant ces nouvelles valeurs dans le textbox concerné
Si vous avez des idées je suis preneur

Merci à tous pour vos éventuel piste

**MABROUKI** · 01/04/2017, 02h31

bonjour

La fonction Chart1.ChartAreas(0).AxisX.PixelPositionToValue(e.X) permet de convertir la valeur e.X (valeur en pixel ) en valeur absolue dans la Zone graphique(le chartarea)...
Moyennant cette fonction de conversion et à condition que la position souris convertie ne sorte pas des limites d'axes principal X données par :
- Chart1.ChartAreas(0).AxisX.Minimum
- Chart1.ChartAreas(0).AxisX.Maximum
et idem pour les limites d'axes principal Y ....
On peut sélectionner un point du graphe et le "draguer" avec souris...
code .vb exmple :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
Imports System.Windows.Forms.DataVisualization.Charting
 
Public Class FormDataPoints
    Private points As New List(Of PointF)
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Me.Chart1.Series(0).Points.Clear()
        GetData()
    End Sub
    Private Sub GetData()
        Dim rnd As New Random
        For x As Double = 0 To 100
 
            Dim y As Double = 14 * x
            points.Add(New PointF(x, y))
        Next
 
        'DataGridView1.DataSource = points
 
 
        Chart1.Series(0).ChartType = SeriesChartType.Line
        Chart1.Series(0).XValueMember = "X"
        Chart1.Series(0).YValueMembers = "Y"
        Chart1.Series(0).BorderWidth = 2
 
 
        Chart1.Series(0).MarkerColor = Color.Brown
        Chart1.Series(0).MarkerStyle = MarkerStyle.Circle
        Chart1.Series(0).MarkerSize = 8
        With Chart1.Series(0)
            .Name = "Series Points"
            .Points.DataBind(points, "X", "Y", Nothing)
        End With
 
 
        'Move legend to bottom and center
        Chart1.Legends(0).Docking = Docking.Bottom
        Chart1.Legends(0).Alignment = StringAlignment.Center
 
    End Sub
 
 
 
    Private selectedDataPoint As DataPoint = Nothing
    Private Sub Chart1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Chart1.MouseDown
        selectedDataPoint = Nothing
 
        If e.Button = MouseButtons.Left Then
            Dim hitResult As HitTestResult = Chart1.HitTest(e.X, e.Y)
            If hitResult Is Nothing Then Return
            If hitResult.ChartElementType = ChartElementType.DataPoint Then
                selectedDataPoint = CType(hitResult.Object, DataPoint)
 
                ' Show point value as label
                selectedDataPoint.IsValueShownAsLabel = True
            End If
 
 
 
        End If
    End Sub
 
    Private Sub Chart1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Chart1.MouseMove
        If selectedDataPoint Is Nothing Then Return
        If e.Button = MouseButtons.Left Then
 
            '  X value from current cursor position
            Dim xValue As Double = Chart1.ChartAreas(0).AxisX.PixelPositionToValue(e.X)
            xValue = Math.Max(xValue, Chart1.ChartAreas(0).AxisX.Minimum)
            xValue = Math.Min(xValue, Chart1.ChartAreas(0).AxisX.Maximum)
 
        '  Y value from current cursor position
            Dim yValue As Double = Chart1.ChartAreas(0).AxisY.PixelPositionToValue(e.Y)
            yValue = Math.Max(yValue, Chart1.ChartAreas(0).AxisY.Minimum)
            yValue = Math.Min(yValue, Chart1.ChartAreas(0).AxisY.Maximum)
 
 
        ' Update selected point X,Y value
 
        selectedDataPoint.XValue = xValue
            'selectedDataPoint.XValue = -selectedDataPoint.XValue
        selectedDataPoint.YValues(0) = yValue
 
        ' Invalidate chart
        Chart1.Invalidate()
        End If
 
 
    End Sub
 
    Private Sub Chart1_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Chart1.MouseUp
        If selectedDataPoint Is Nothing Then Return
        If e.Button = MouseButtons.Right Then
 
 
            ' Hide point label
            selectedDataPoint.IsValueShownAsLabel = False
 
            ' reset selected object
            selectedDataPoint = Nothing
 
            ' Invalidate chart
            Chart1.Invalidate()
 
 
        End If
    End Sub
End Class

bon code....

Aide création d un graphique avec point mobile drag and drop

VB.NET

Vue hybride

Discussions similaires

Partager

Partager