Wie verwende ich HTML in benutzerdefinierten Tooltip in eckigen Charts?

Question

Ist es möglich, HTML in einem Tooltip auf einem Diagramm mit dem eckigen Diagramm 1.0 zu rendern? Ich habe das Diagramm unten gebaut, aber müssen zwei Werte in separaten Zeilen im Tooltip machen, aber die br-Tag als Text erscheinen

<div ng-app="doughnutApp" ng-controller="DoughnutCtrl as doughnutCtrl"> 
    <canvas id="doughnut" 
      class="chart chart-doughnut" 
      chart-data="doughnutCtrl.labelsValues.values" 
      chart-labels="doughnutCtrl.labelsValues.labels" 
      chart-options="doughnutCtrl.chartOptions"> 
    </canvas> 
</div> 

<script> 
    var app = angular.module('doughnutApp', ['chart.js']); 
    app.controller('DoughnutCtrl', function() { 
    var vm = this; 
    vm.labelsValues = { 
     "labels": ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7", "Label 8"], 
     "values": [1, 2, 3, 4, 5, 6, 7, 8] 
    }; 

    vm.chartOptions = { 
     tooltips: { 
     callbacks: { 
      label: function(tooltipItem, data) { 
      return "Line 1<br/>Line 2"; 
      } 
     } 
     } 
    }; 
    }); 
</script> 

Plunker hier Arbeiten: http://plnkr.co/jtOM2PIccrb87wmFZc0p

Eine Abhilfe ist Setzen Sie eine Zeile in den Callback "Label" und die andere in den Callback "beforeLabel", aber das würde immer noch keine Farben, Schriftstile usw.

Answer 1

Sie sollten ein Array für "simulieren" neue Zeile:

tooltips: { 
    //mode: "label", 
    callbacks: { 
     label: function(tooltipItem, data) { 
      var legend = new Array(); 
      for(var i in data.datasets){ 
       legend.push(
        data.datasets[i].label + ": " + parseFloat(data.datasets[i].data[tooltipItem.index]) 
       ); 
      } 

      return legend; 
     } 
    } 
},