Chart.js: modifica del template tooltip

Question

Ho bisogno di cambiare il template tooltip di Chart.js, in modo che solo la parte value sia visualizzata in grassetto. C'è un'opzione tooltipTemplate, che dovrebbe fare esattamente questo. Il valore di default di questa opzione è:

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

ho provato a modificarlo in questo modo:

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

ma visualizza strong tag sullo schermo come parte del testo, invece di rendere il testo in grassetto. Ho provato a spostarli intorno a <% e %>, ma ancora non funziona. Qualche idea?

Answer 1

Il modello non riconosce l'HTML. Devi usare l'opzione customTooltips. Di seguito un esempio adattato (ma non ottimizzato) da 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/