2015-05-28 3 views
8

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 è:Chart.js: modifica del template tooltip

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?

risposta

13

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/

+0

Grazie s, questo lo fa :) – cincplug

+0

Qualche possibilità potresti aggiungere un aggiornamento per chartjs v2? –

+2

@MatthewHerbst - la cartella dei campioni del progetto GitHub chart.js ne ha già una (https://github.com/chartjs/Chart.js/blob/master/samples/line-customTooltips.html). Saluti! – potatopeelings