Discussion :

[SylvainM]

Bonjour à tous,

(précision importante préliminaire : je ne suis pas développeur et il me manque des fondamentaux de la programmation )

Je tente de faire un graphique avec Chart.js, dont l'axe X est temporel, et je suis pas loin de parvenir à mes fins avec ce JsFiddle : http://jsfiddle.net/dajfbbL2/
Mais j'ai encore 2 problèmes à résoudre :
- je ne comprends pas pourquoi les données qui devraient s'afficher à l’abscisse "2000" et "2010" sont décalées par rapport à l'axe ?
- j'aimerais, si possible, n'afficher sur l'axe X que les années correspondant aux données (1945, 2000 et 2010).

Auriez-vous des conseils pour avancer sur ces points ?

Merci à vous

[SylvainM]

je ne comprends pas pourquoi les données qui devraient s'afficher à l’abscisse "2000" et "2010" sont décalées par rapport à l'axe ?

Bon, sans comprendre vraiment la cause, j'ai trouvé comment résoudre le problème de décalage : j'avais fixé le max de l'axe X sur la date actuelle (2017). Mais l'axe étant gradué tous les 20 ans (unit: 'year', unitStepSize: 20), ça ne tombait pas juste. En mettant 2020, ça s'aligne correctement.

Maintenant, comme je le disais, j'aimerais n'afficher sur l'axe que les dates où il y a des données (1945, 2000 et 2010). Pensez-vous que cela soit possible ?

[mathieu]

Les valeurs affichées sur l'axe sont liées à la grille donc ça sera surement compliqué d'afficher seulement les années avec des valeurs.

Par contre, il est possible d'afficher toutes les légendes des points.
J'ai rajouté un code que j'ai trouvé pour modifier votre exemple là :
http://jsfiddle.net/dajfbbL2/5/
Ce n'est pas très joli puisqu'il y a beaucoup de textes mais c'est un début de piste à explorer.

[SylvainM]

Merci Mathieu pour ta réponse.
Effectivement, j'avais aussi pensé aux Tooltips pour afficher ces dates. Il doit certainement y avoir moyen de les épurer pour le contenu (n'afficher que l'année plutôt que "Mon Jan 01 1945 00:00:00 GMT+0100".
Ça marche avec (tooltipItems.xLabel).getFullYear() par exemple, mais je ne sais comment l'appliquer au "titre du tooltip" ?

Code :

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

1
2
3
4
5
6
    tooltips: {mode: 'label',
                callbacks: {
                    label: function(tooltipItems, data) { 
                        return tooltipItems.yLabel + ' m/ha en ' + (tooltipItems.xLabel).getFullYear() ;
                    }
                }},

[mathieu]

Il y a plusieurs éléments qui peuvent être personnalisés dont le titre :
http://www.chartjs.org/docs/latest/c...ltip-callbacks

Ça donne ça pour le moment :
http://jsfiddle.net/dajfbbL2/17/
Il y a encore à résoudre le soucis des 2 éléments qui se superpose mais là je n'ai pas d'idées pour ça.

[NoSmoking]

Bonjour,
pourquoi ne pas laisser les « toolTips » s'afficher simplement au survol ce qui le comportement habituel ?

[SylvainM]

désolé pour le délai, j'étais passé sur d'autres sujet

pourquoi ne pas laisser les « toolTips » s'afficher simplement au survol ce qui le comportement habituel ?

C'est que Mathieu essaye de répondre à ma demande initiale qui serait d'afficher les 3 dates sur le graphique.
Mais effectivement, les Tooltips affichés en permanence ne me satisfont pas non plus...
Malgré tout, merci beaucoup Mathieu car ton exemple m'a permis de mieux formater mes Tooltips.

Si quelqu'un trouve une solution pour afficher, ailleurs que dans les Tooltips, les 3 dates de mes données, ça m'intéresserait (l'idéal étant sur l'Axe X, mais ça a l'air compliqué)

Une idée peut-être idiote (et que je ne sais dans tous les cas pas faire tout seul), serait d'ajouter un dataset à ordonnée zéro, et d'afficher les tooltips "permanents" pour ces points uniquement (sans couleur pour la série)

[SylvainM]

Une idée peut-être idiote

En image, voici mon "idée idiote" :