Chart.js: zmiana szablonu podpowiedzi

Question

Potrzebuję zmienić szablon etykiety narzędzia Chart.js, aby tylko część z wartościami była pogrubiona. Istnieje opcja tooltipTemplate, która powinna zrobić dokładnie to. Domyślna wartość tej opcji to:

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

Próbowałem edycji to tak:

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

Ale to wyświetla strong tagi na ekranie jako część tekstu, zamiast renderowania pogrubiony tekst. Próbowałem przesuwać je wokół <% i %>, ale nadal nie działa. Jakieś pomysły?

Answer 1

Szablon nie rozpoznaje HTML. Musisz użyć opcji customTooltips. Poniżej znajduje się przykład dostosowane (ale nie zoptymalizowana) od 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/