Angular-Charts - 饼图，在每个数据切片中显示标签答案

【问题标题】：Angular-Charts - Pie Chart,show labels inside each slice of dataAngular-Charts - 饼图，在每个数据切片中显示标签
【发布时间】：2015-07-30 08:48:30
【问题描述】：

我正在学习 angular-chart-js 的阶段。我正在尝试使用 angular-chart.js 绘制饼图。但我无法找到一种在饼图上显示标签（不是工具提示）的方法，它描述了每个数据片。

我是这样做的：

angular.module('App').controller('Controller', ['$scope', '$http', '$location', '$window', '$routeParams',
    function($scope, $http, $location, $window) {
        var diskDataJson = {
            "data": [80, 12],
            "labels": [Used space, Free Space],
            "colours": ['#9AB6F0', '#C2D3F6']
        };
    
        $scope.pieDiskData = json;
    }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table border="0" width="100%">
  <tr>
    <td style="border-left: 1px solid #0099CC" width="25%">
      <center><span><label ng-bind-html="'load.static.dashboard.system.DUSAGE' | translate"/></span>
      </center>
      <canvas id="pie33" class="chart chart-pie chart-xs ng-isolate-scope" height="120" width="240" data="pieDiskData.data" labels="pieDiskData.labels" colours="pieDiskData.colours" legend="true"></canvas>
    </td>
  </tr>
</table>

【问题讨论】：

标签： javascript angularjs chart.js angular-chart

【解决方案1】：

改编自 https://stackoverflow.com/a/25913101/360067 用于角图

将以下options 添加到您的作用域

$scope.options = {
    tooltipEvents: [],
    showTooltips: true,
    tooltipCaretSize: 0,
    onAnimationComplete: function () {
        this.showTooltip(this.segments, true);
    },
};

并在你的指令中使用它

<canvas id="pie33" options="options"...

小提琴（包含代码中的相关部分）-http://jsfiddle.net/zuhp8k5f/154/

【讨论】：

是的，我现在明白了，在角度图表中，我们可以使用 chart.js 中的自定义选项来管理工具提示
你能分享一下小提琴吗，因为在上面的“jsfiddle.net/zuhp8k5f”中我无法显示图表
@TomNijs - 谢谢！ angular chart.js 的 rawgit 链接指向 master 上的 dist 文件夹。我已将其更改为指向特定版本。

【解决方案2】：

您也可以使用自定义插件来实现相同的行为。

1.确保将 showAllTooltips 设置为 true

  options: any = {showAllTooltips: true,legend: {position: 'left'}};

2.在ngOnInit

上注册您的自定义插件

    Chart.pluginService.register({
  beforeRender: function (chart) {
    if (chart.config.options.showAllTooltips) {
      // create an array of tooltips
      // we can't use the chart tooltip because there is only one tooltip per chart
      chart.pluginTooltips = [];
      chart.config.data.datasets.forEach(function (dataset, i) {
        chart.getDatasetMeta(i).data.forEach(function (sector, j) {
          chart.pluginTooltips.push(new Chart.Tooltip({
            _chart: chart.chart,
            _chartInstance: chart,
            _data: chart.data,
            _options: chart.options.tooltips,
            _active: [sector]
          }, chart));
        });
      });

      // turn off normal tooltips
      chart.options.tooltips.enabled = false;
    }
  },
  afterDraw: function (chart, easing) {
    if (chart.config.options.showAllTooltips) {
      // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
      if (!chart.allTooltipsOnce) {
        if (easing !== 1) {
          return;
        }
        chart.allTooltipsOnce = true;
      }

      // turn on tooltips
      chart.options.tooltips.enabled = true;
      Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
        tooltip.initialize();
        tooltip.update();
        // we don't actually need this since we are not animating tooltips
        tooltip.pivot();
        tooltip.transition(easing).draw();
      });
      chart.options.tooltips.enabled = false;
    }
  }
});

【讨论】：