javascript - number - js chart min js

Chart.js multiTooltip labels

Question

Estoy tratando de obtener charts.js para mostrar el nombre de la etiqueta de cada conjunto de datos en la información sobre herramientas.

Mi código:

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 %>"

});

Con mi código anterior, aparece la información sobre herramientas al pasar el cursor sobre "Enero":

January
January - xx
January - xx

¿Alguna idea de cómo puedo conseguir que muestre lo siguiente?

January
Bob - xx
Tina - xx

Answer 1

Cambio

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 %>"
});

a:

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 %>"
});

El cambio es a la última línea

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

datasetLabel obtiene el valor de la etiqueta de los objetos del conjunto de datos (en este caso, ''Bob'' y ''Tina''), mientras que la label obtiene el título impreso en el eje x (parte del conjunto de labels )

Answer 2

Como respondí here , puede darle a multiTooltipTemplate una función. Ponga un punto de interrupción dentro de esa función con ''depurador'', y explore el objeto dado para todas las propiedades que desee. Luego construye una cadena para que se muestre en tu información sobre herramientas:

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

Answer 3

Similar a la respuesta de Hannes, pero la documentación se ha actualizado desde entonces: ahora hay varias opciones y el enlace que proporcionó ya no funciona porque esa opción está en desuso.

Estoy agregando una nueva respuesta, ya que me tomó un tiempo encontrarla.

Este es el modo x: muestra información de múltiples conjuntos de datos en la información sobre herramientas basada en el eje 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

También hay modo ''y''. El modo de etiqueta ahora está en desuso.

También puede usar el modo ''punto'', ''índice'' y ''más cercano''.

Answer 4

quiero actualizar la respuesta, porque estuve buscando por mucho tiempo.

Ahora puede cambiar la configuración de información sobre herramientas dentro de las opciones. Ver Docu: http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

En cuanto a la pregunta hecha, para mostrar todos los datos de X.

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

Saludos Hannes