Chart.js multiTooltip 레이블

Chart.js multiTooltip 레이블

---

툴팁에있는 각 데이터 세트의 레이블 이름을 표시하도록 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 %>"

});

위 코드를 사용하면 "1 월"위에 마우스를 올려 놓으면 도구 설명이 표시됩니다.

January
January - xx
January - xx

다음을 표시하는 방법에 대한 아이디어가 있습니까?

January
Bob - xx
Tina - xx

---

변화

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데이터 세트 객체 (이 경우 'Bob'및 'Tina')에서 레이블 값을 label가져 오는 반면 x 축 ( labels배열의 일부)에 캡션을 인쇄합니다.

---

오랫동안 검색했기 때문에 답변을 업데이트하고 싶습니다.

이제 옵션 내에서 도구 설명 설정을 변경할 수 있습니다. Docu 참조 : http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

질문은 모든 X 데이터를 표시합니다.

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

건배 Hannes

---

As I answered here, you can give multiTooltipTemplate a function. Put a breakpoint inside that function with 'debugger', and explore the given object for all the properties you'd like. Then construct a string to be displayed in your tooltip:

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

---

Similar to the answer by Hannes but the documentation has been updated since then - There are various options now and the link he provided no longer goes anywhere as that option is deprecated.

I'm adding a new answer as it took me a while to find.

This is x mode - displays multiple dataset info in tooltip based on x axis

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

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

There is also 'y' mode. Label mode is now deprecated.

You can also use 'point', 'index' and 'nearest' mode.

참고URL : https://stackoverflow.com/questions/24510278/chart-js-multitooltip-labels