Bonjour,

voici mon script React qui fonctionne, mais pas exactement que je le voudrais:
Code javascript : 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
 
import React from 'react'
import DataFieldText from './DataFieldText.js'
 
class ChartGetDatas extends React.Component {
 
    state = {
        "size": "",
        "min": "",
        "max": "",
        "type": "",
        "types": [
            "",
            "bar",
            "line",
            "radar"
        ]
    }
 
    handleMin = (min) => {
        this.setState({
            min: min,
        })
    }
 
    handleMax = (max) => {
        this.setState({
            max: max,
        })
    }
 
    handleSize = (sizeValue) => {
        this.setState({
            size: sizeValue,
        })
    }
 
    handleSubmit = (ev ) => {
        ev.preventDefault()
        console.log("c'est parti !")
        const{size, min, max} = this.state
        console.log(size, min, max)
        const url = "https://127.0.0.1:8000/stats/" + size + "/" + min + "/" + max
        fetch(url)
        .then(response => response.json())
        .then(res => {
            let chart = new Chart(document.getElementById('chartGraph'), {
                type: this.state.type,
                data: {
                    labels: res[0],
                    datasets: [{
                        label: "mois",
                        data: res[1],
                        backgroundColor: ['red', 'blue', 'yellow'],
                    }]
                }
            })
        })
        .catch(err => console.log(err))
    }
 
    handleChange = ev => {
        this.setState({
            type: ev.target.value
        })
    }
 
    render() {
        return <form onSubmit={this.handleSubmit}>
                    <h1>Renseignements pour générer des données</h1>
                    <div className="data-item">
                        <div className="form-group">
                            <label htmlFor="types">Type de graphique</label>
                            <select value={this.state.type} onChange={this.handleChange} id="types">
                                {this.state.types.map( (type, index) => {return <option key={index} value={type}>{type}</option>})}
                            </select>
                        </div>
                        <DataFieldText textLabel="taille du jeu de données" onSubmit={this.handleSize}/>
                        <DataFieldText textLabel="valeur minimum" onSubmit={this.handleMin}/>
                        <DataFieldText textLabel="valeur maximum" onSubmit={this.handleMax}/>
                    </div>
                    <button className="btn btn-primary"> Génerer le graphique</button>
                </form>
    }
}
 
export default ChartGetDatas;

le résultat est un formulaire qui renseigne quelques paramètres pour afficher un graphique avec la librairie Chart.js
L'id 'chartGraph', est celui de la balise canvas dans ma page html, là où Chart affiche le graphique.
Chart.js demande de créer un objet Chart avec l'id et la configuration ( l'objet qui suit )
je rentre des données (qui vont servir pour la configuration), je clique , et le graphique s'affiche !
Les données récupérées par la requête sont aléatoires: si je clique à nouveau, sans changer les paramètres renseignés, j'obtiens un graphique différent.

Tout ça me convient bien sauf:
si j'ai généré plusieurs graphiques à la suite, lorsque que je balade ma souris sur le canvas, par moment, les graphiques générés avant le dernier en date réapparaissent !!
Lorsque j'affiche l'objet chart dans la console, je remarque qu'il possède un id ( entre autres ).
J'imagine que tous les graphiques générés sont les uns sur les autres... il faudrait supprimer le graphique avant d'en afficher un autre.
Mais je ne sais pas comment faire !
On peut détruire l'objet précédent ? ou bien placer le canvas dans le render et en faire un "nouveau" à chaque graphique ?

Si quelqu'un à une idée de la démarche à suivre pour supprimer le graphique d'avant, je suis preneur !
Merci d'avance,

Laurent.