Chart.js: thay đổi mẫu tooltip

Question

Tôi cần thay đổi mẫu chú giải công cụ Chart.js, do đó phần giá trị duy nhất được hiển thị bằng chữ in đậm. Có tùy chọn tooltipTemplate, nên thực hiện chính xác điều này. Giá trị mặc định của tùy chọn này là:

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%" 

tôi đã cố gắng chỉnh sửa nó như thế này:

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><strong><%= value %></strong>%" 

Nhưng nó sẽ hiển thị strong thẻ trên màn hình như một phần của văn bản, thay vì dựng hình chữ in đậm. Tôi đã thử di chuyển chúng xung quanh <% và %>, nhưng nó vẫn không hoạt động. Bất kỳ ý tưởng?

Answer 1

Mẫu không nhận dạng HTML. Bạn phải sử dụng tùy chọn customTooltips. Dưới đây là một ví dụ chuyển thể (nhưng không được tối ưu hóa) từ https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html

HTML

<canvas id="myChart" width="400" height="200"></canvas> 
<div id="chartjs-tooltip"></div> 

CSS

#chartjs-tooltip { 
    opacity: 0; 
    position: absolute; 
    background: rgba(0, 0, 0, .7); 
    color: white; 
    padding: 3px; 
    border-radius: 3px; 
    -webkit-transition: all .1s ease; 
    transition: all .1s ease; 
    pointer-events: none; 
    -webkit-transform: translate(-50%, 0); 
    transform: translate(-50%, 0); 
} 

JS

var ctx = $("#myChart").get(0).getContext("2d"); 

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [{ 
     label: "My First dataset", 
     fillColor: "rgba(220,220,220,0.2)", 
     strokeColor: "rgba(220,220,220,1)", 
     pointColor: "rgba(220,220,220,1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(220,220,220,1)", 
     data: [65, 59, 80, 81, 56, 55, 40] 
    }] 
}; 

var myLineChart = new Chart(ctx).Line(data, { 
    customTooltips: function (tooltip) { 
     var tooltipEl = $('#chartjs-tooltip'); 

     if (!tooltip) { 
      tooltipEl.css({ 
       opacity: 0 
      }); 
      return; 
     } 

     tooltipEl.removeClass('above below'); 
     tooltipEl.addClass(tooltip.yAlign); 

     // split out the label and value and make your own tooltip here 
     var parts = tooltip.text.split(":"); 
     var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>'; 
     tooltipEl.html(innerHtml); 

     tooltipEl.css({ 
      opacity: 1, 
      left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px', 
      top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px', 
      fontFamily: tooltip.fontFamily, 
      fontSize: tooltip.fontSize, 
      fontStyle: tooltip.fontStyle, 
     }); 
    } 
}); 

Fiddle - http://jsfiddle.net/6rxdo0c0/1/