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

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

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

Рабочий плункер здесь: http://plnkr.co/jtOM2PIccrb87wmFZc0p

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


chart.js angularjs angular-chart
person Joseph McCarthy    schedule 30.08.2016    source источник
comment
читая документацию по Chart.js, похоже, что там нет никакой функциональности использовать HTML для всплывающей подсказки   -  person Joseph McCarthy    schedule 16.09.2016

Ответы (1)


arrow_upward
5
arrow_downward

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

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;
        }
    }
},
person icy    schedule 03.03.2017
comment
Большое спасибо, долго искал этот ответ. Работал на меня. - person Ananthapadmanabhan; 19.02.2020
comment
Заменить цикл на: return data.datasets.map(dataset => dataset.label + ': ' + parseFloat(dataset.data[tooltipItem.index])); - person Dem Pilafian; 15.06.2020