어떻게, 내가 각도 차트로 구축 극성 영역 차트를

Question

각도 차트의 극성 영역 차트의 마우스 호버에 툴팁을 사용자 정의 툴팁 마우스를 가리 키십시오 (이미지 에서처럼 [label : value] 또는 [MBA010 : 98.69]가 표시됨) 또는 해당 옵션을 완전히 제거하십시오. similar question에 의해 공급 this plunker 같이 내가 옵션을 적용 시도

:

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

그러나 다른 모든 차트 유형에서 작동하지만 이러한 옵션이 극성 영역 차트에서 작동하지 않습니다.

이 차트의 마우스를 올리면 툴팁을 어떻게 사용자 정의하거나 제거 할 수 있습니까?

Answer 1

레이블에 Tooltip Callbacks을 사용하여 극지 차트의 툴팁을 사용자 정의 할 수 있습니다.

예

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>