web-dev-qa-db-fra.com

Étiquettes multi-outils Chart.js

J'essaie d'obtenir que charts.js affiche le nom de l'étiquette de chaque jeu de données dans l'info-bulle.

Mon code:

var barChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [

        {
            label: "Bob",
            fillColor : "rgba(88,196,246,0.5)",
            strokeColor : "rgba(88,196,246,0.8)",
            highlightFill: "rgba(88,196,246,0.75)",
            highlightStroke: "rgba(88,196,246,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            label: "Tina",
            fillColor : "rgba(74,211,97,0.5)",
            strokeColor : "rgba(74,211,97,0.8)",
            highlightFill : "rgba(74,211,97,0.75)",
            highlightStroke : "rgba(74,211,97,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }

    ]
}

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Line(barChartData, {
    responsive : true,
    animation: true,
    barValueSpacing : 5,
    barDatasetSpacing : 1,
    tooltipFillColor: "rgba(0,0,0,0.8)",                
    multiTooltipTemplate: "<%= label %> - <%= value %>"

});

Avec mon code ci-dessus, l'info-bulle en survolant "Janvier" affiche:

January
January - xx
January - xx

Des idées comment je peux l'obtenir pour afficher ceci?

January
Bob - xx
Tina - xx
javascriptchart.js
59
Alosyius

Changement

window.myBar = new Chart(ctx).Line(barChartData, {
   responsive : true,
   animation: true,
   barValueSpacing : 5,
   barDatasetSpacing : 1,
   tooltipFillColor: "rgba(0,0,0,0.8)",                
   multiTooltipTemplate: "<%= label %> - <%= value %>"
});

à:

window.myBar = new Chart(ctx).Line(barChartData, {
   responsive : true,
   animation: true,
   barValueSpacing : 5,
   barDatasetSpacing : 1,
   tooltipFillColor: "rgba(0,0,0,0.8)",                
   multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
});

Le changement est à la dernière ligne

multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"

datasetLabel obtient la valeur de l'étiquette à partir des objets du jeu de données (dans ce cas, 'Bob' et 'Tina'), alors que label obtient la légende imprimée sur l'axe des x (une partie de la labels tableau)

132
MBaig

vouloir mettre à jour la réponse, parce que je cherchais depuis longtemps.

Vous pouvez maintenant modifier les paramètres des info-bulles dans les options. Voir Docu: http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

Quant à la question posée, afficher toutes les données X.

window.myBar = new Chart(ctx).Line(barChartData, {
  tooltips: {
   mode: 'label'
 }           
});

Vive Hannes

9
Hannes Oberreiter

Comme j'ai répondu ici , vous pouvez donner une fonction à multiTooltipTemplate. Placez un point d'arrêt à l'intérieur de cette fonction avec 'debugger' et explorez l'objet donné pour toutes les propriétés souhaitées. Construisez ensuite une chaîne à afficher dans votre info-bulle:

multiTooltipTemplate: function(v) {debugger; return someManipulation(v);}
tooltipTemplate: function(v) {return someOtherManipulation(v);}
1
Ariel Cabib

Semblable à la réponse de Hannes mais la documentation a été mise à jour depuis - Il existe différentes options et le lien qu'il a fourni ne va plus nulle part, cette option étant obsolète.

J'ajoute une nouvelle réponse car il m'a fallu un certain temps pour trouver.

Il s’agit du mode x: affiche des informations sur plusieurs jeux de données dans une info-bulle basée sur l’axe x.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'x'
        }
    }
})

http://www.chartjs.org/docs/latest/general/interactions/modes.html#x

Il y a aussi le mode 'y'. Le mode étiquette est maintenant obsolète.

Vous pouvez également utiliser les modes "point", "index" et "le plus proche".

0
Jonathan Wood