如何在角度图的极区图表的鼠标悬停上自定义工具提示

Question

我有一个用Angular Chart构建的极地图，如下所示：

我需要自定义工具提示鼠标悬停中的内容（现在它显示[label：value]或[MBA010：98.69]，如图所示），或者完全删除该选项。

我已尝试应用由this plunker提供的similar question中所示的选项：

// 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作为标签，来自定义极区图表的工具提示。

示例

＆＃13;

＆＃13;

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';
            }
         }
      }
   }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;