Как использовать HTML в пользовательской подсказке в угловых диаграммах?

Question

Можно ли отображать HTML в всплывающей подсказке на диаграмме с использованием угловой диаграммы 1.0? я построил график ниже, но нужно сделать два значения на отдельных строках в подсказке, однако уш тег появляется в виде текста

<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 здесь: http://plnkr.co/jtOM2PIccrb87wmFZc0p

Один из способов заключается положить одну строку в «этикетка» обратного вызова, а другой в обратном вызове «beforeLabel», но до сих пор не делают цвета, стили шрифтов и т.д.

Answer 1

Вы должны использовать массив для «имитации» новую строку:

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; 
     } 
    } 
},