如何在 Angular Charts 的极区图的鼠标悬停时自定义工具提示

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

示例

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>