Chart.js: araç ipucu şablonunu değiştirme

Question

Chart.js araç ipucu şablonunu değiştirmem gerekiyor, böylece yalnızca değer bölümü kalın olarak gösteriliyor. Tam olarak bunu yapması gereken tooltipTemplate seçeneği vardır.

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

böyle düzenlemeye çalıştı: Bu seçeneğin varsayılan değeridir

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

Ama bunun yerine kalın metin kılma, metnin bir parçası olarak ekranda strong etiketlerini görüntüler. Onları <% ve %> arasında hareket ettirmeyi denedim, ancak hala çalışmıyor. Herhangi bir fikir?

Answer 1

Şablon HTML'yi tanımıyor. CustomTooltips seçeneğini kullanmanız gerekir. Aşağıda bir örnek 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 uyarlanan (ama optimize edilmemiş) olduğu

#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/