Chart.js：更改工具提示模板

Question

我需要更改Chart.js工具提示模板，以便只有值部分以粗体显示。有tooltipTemplate选项，应该这样做。此选项的默认值为：

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

我试图编辑这样说：

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

但它在屏幕上显示strong标签作为文本的一部分，而不是渲染粗体字。我试着将它们移动到<%和%>，但它仍然不起作用。有任何想法吗？

Answer 1

该模板不识别HTML。您必须使用customTooltips选项。下面是一个例子，从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, 
     }); 
    } 
}); 

小提琴 - http://jsfiddle.net/6rxdo0c0/1/