Наклейки multiTooltip Chart.js

Я пытаюсь получить charts.js для отображения имени метки из каждого набора данных во всплывающей подсказке.

Мой код:

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

});

С моим кодом выше отображается всплывающая подсказка при наведении указателя над "Январь":

January
January - xx
January - xx

Любые идеи, как я могу заставить его отображать следующее?

January
Bob - xx
Tina - xx

Ответы

Ответ 1

Измените

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

Это изменение относится к последней строке

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

datasetLabel получает значение метки из объектов набора данных (в данном случае "Боб" и "Тина" ), тогда как label получает заголовок, напечатанный на оси х (часть массива labels)

Ответ 2

хочу обновить ответ, потому что я долго искал.

Теперь вы можете изменить настройки всплывающих подсказок внутри опций. См. Документ: http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

Что касается заданного вопроса, чтобы показать все данные X.

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

Приветствия Ханнес

Ответ 3

Как я ответил здесь, вы можете дать функции multiTooltipTemplate. Поместите контрольную точку внутри этой функции с помощью "отладчика" и исследуйте данный объект для всех свойств, которые вы хотите. Затем создайте строку, которая будет отображаться в подсказке:

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

Ответ 4

Как и в случае с Hannes, но с тех пор документация обновлена. Теперь есть различные варианты, и ссылка, которую он предоставил, больше не идет, поскольку этот параметр устарел.

Я добавляю новый ответ, поскольку мне потребовалось некоторое время, чтобы найти.

Это x-режим - отображает информацию о нескольких наборах данных в подсказке на основе оси 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

Существует также режим "y". Режим ярлыков теперь устарел.

Вы также можете использовать режим "точка", "индекс" и "ближайший".