web-dev-qa-db-fra.com

Chart.js 2.0: comment changer le titre de l'infobulle

Pardonnez-moi pour mon anglais parfois pauvre. Le néerlandais est ma langue maternelle.

J'ai créé un linechart Chart.js qui me montre ma consommation d'énergie rapportée par mon compteur intelligent de puissance principal. Je l'ai fait fonctionner presque comme je le veux, mais il y a une chose que je n'arrive pas à faire fonctionner comme je veux parce que je ne comprends pas une petite chose.

Avec l'aide de l'utilisateur "iecs" sur le sujet "Chart.js V2: Ajouter un préfixe ou un suffixe à l'étiquette de l'infobulle" J'ai pu changer l'étiquette à l'infobulle. Il montre maintenant bien mon préfixe et suffixe souhaité:

tooltips: {
    enabled: true,
    mode: 'single',
    backgroundColor: 'rgba(0,0,0,0.9)',
    titleFontSize: 14,
    titleFontStyle: 'bold',
    titleFontColor: "#FFF",
    bodyFontSize: 12,
    bodyFontStyle: 'normal',
    bodyFontColor: "#FFF",
    footerFontSize: 12,
    footerFontStyle: 'normal',
    footerFontColor: "#FFF",
    cornerRadius: 5,
    callbacks: {
        label: function(tooltipItems, data) { // Solution found on https://stackoverflow.com/a/34855201/6660135
            //Return value for label
            return 'Usage: ' + tooltipItems.yLabel*1000 + ' watt';
        }
    }
}

Lorsque j'essaie d'ajouter exactement le même code pour modifier le titre, j'ai obtenu undefined à l'endroit où une date et une heure devraient être affichées:

tooltips: {
    enabled: true,
    mode: 'single',
    backgroundColor: 'rgba(0,0,0,0.9)',
    titleFontSize: 14,
    titleFontStyle: 'bold',
    titleFontColor: "#FFF",
    bodyFontSize: 12,
    bodyFontStyle: 'normal',
    bodyFontColor: "#FFF",
    footerFontSize: 12,
    footerFontStyle: 'normal',
    footerFontColor: "#FFF",
    cornerRadius: 5,
    callbacks: {
        title: function(tooltipItems, data) {
            //Return value for title
            return 'Date: ' + tooltipItems.xLabel + ' GMT+2';
        },
        label: function(tooltipItems, data) { // Solution found on https://stackoverflow.com/a/34855201/6660135
            //Return value for label
            return 'Usage: ' + tooltipItems.yLabel*1000 + ' watt';
    }
}

Avec la réponse de l'utilisateur "Lukman" sur le sujet "Imprimer le contenu de l'objet JavaScript? [Dupliquer]" J'ai découvert que je pouvais afficher le contenu de "l'outil tooltipItems":

alert(tooltipItems.toSource())

Cela a montré une différence intéressante concernant l'objet "tooltipItems" entre le "titre" et le "label".

L'objet "tooltipItems" au "label" affiche ceci comme contenu:

({xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0})

Alors que l'objet "tooltipItems" au "titre" affiche ceci comme contenu:

[{xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0}]

Les caractères de début et de fin sont différents. Celui de "label" peut être lu avec tooltipItems.yLabel mais celui de "title" ne peut pas être lu avec tooltipItems.xLabel car cela me montre "indéfini". Le titre entier sera désormais Date: undefined GMT+2 instances de Date: 2016-08-07 23:41:57 GMT+2

Qu'est-ce que j'ai mal fait? Quelqu'un peut-il m'expliquer les différences entre les 2 sorties du contenu de l'objet de "tooltipItems" et comment lire les index "xLabel" et "yLabel"?

javascriptphpjqueryhtmlchart.js
24
Jeroen Maathuis

J'ai également rencontré un problème similaire, mais j'ai été résolu avec cela.

return 'Date: ' + tooltipItems[0].xLabel + ' GMT+2';
19
Ryo