Wie Tooltip Mausbewegung eines polaren Flächendiagramm von Angular Charts

Question

Ich habe einen Polbereich Diagramm gebaut mit kantiger Tabelle anpassen, wie es folgt:

Ich muß anpassen, was in der geschrieben tooltip mouse hover (Jetzt zeigt es [label: value], oder [MBA010: 98.69], wie im Bild), oder entfernen Sie diese Option vollständig.

habe ich versucht, die Möglichkeiten der Anwendung wie in this plunker gezeigt, von einem similar question geliefert:

// Controller 
$scope.chart_options = { 
    tooltipTemplate: function(label) { 
    return label.label + ':' + label.value; 
    } 
}; 

<!-- View --> 
<canvas class="chart chart-polar-area" 
       chart-data="module.data" 
       chart-labels="module.labels" 
       chart-options="chart_options"></canvas> 

Aber diese Optionen nicht funktionieren auf der polaren Bereich Grafik, obwohl es auf allen anderen Diagrammtypen funktioniert.

Wie kann ich Tooltips mit Mauszeiger für dieses bestimmte Diagramm anpassen oder entfernen?

Answer 1

Sie können Tooltip Callbacks für Label verwenden, um QuickInfos eines Polardiagramms anzupassen.

Beispiel

var app = angular.module('app', ['chart.js']); 
 

 
app.controller("PolarAreaCtrl", function($scope) { 
 
    $scope.labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']; 
 
    $scope.data = [ 
 
     [3, 2, 5, 1, 4, 2] 
 
    ]; 
 
    $scope.options = { 
 
     legend: false, 
 
     tooltips: { 
 
     callbacks: { 
 
      label: function(tooltipItem, data) { 
 
       //return text to render for an individual item in the tooltip 
 
       return 'This is a custom tooltip'; 
 
      } 
 
     } 
 
     } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script> 
 
<div ng-app="app" ng-controller="PolarAreaCtrl"> 
 
    <canvas id="polarArea" class="chart chart-polarArea" chart-data="data" chart-labels="labels" chart-options="options"></canvas> 
 
</div>