chart.js 막대 차트의 툴팁 사용자 정의

Question

chart.js 막대 차트에서 툴팁을 사용자 화하고 싶습니다.

$(function() { 
    var barData = no_houses_person 

var barOptions = { 
    scaleBeginAtZero: true, 
    scaleShowGridLines: true, 
    scaleGridLineColor: "rgba(0,0,0,.05)", 
    legend: { 
     display: true, 
     position: 'top' 
    }, 
    scaleGridLineWidth: 1, 
    barShowStroke: true, 
    barStrokeWidth: 1, 
    barValueSpacing: 5, 
    barDatasetSpacing: 1, 
    responsive: true, 
}; 
    var ctx = document.getElementById("barChart").getContext("2d"); 
    var myNewChart = new Chart(ctx, { 
    type: 'bar', 
    data: barData, 
    options: barOptions 
}); 
}); 

내가 barOptions에 tooltipTemplate: "<%if (label){%><%=label%> <%}%>(<%= value %> example)",를 추가하는 시도했지만 아무 효과가 없습니다 :이 내 코드입니다. 예를 들어 당신은 단지 도구 설명 텍스트를 수정하려면 있도록

Answer 1

Chart.js이 ..., V2의 +에 Object interfaces에 템플릿에서 이동

tooltips: { 
    callbacks: { 
     label: function(tooltipItem) { 
      return "$" + Number(tooltipItem.yLabel) + " and so worth it !"; 
     } 
    } 
} 

결과 :

Codepen : Chart.js Custom Tooltip

더 복잡한 툴팁 사용자 정의는 github :에서 샘플을 참조하십시오.