Angular-Charts - 饼图，在每个数据切片中显示标签 [英] Angular-Charts - Pie Chart,show labels inside each slice of data

问题描述

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

我是这样做的:

angular.module('App').controller('Controller', ['$scope', '$http', '$location', '$window', '$routeParams',功能($范围，$http，$位置，$窗口){var diskDataJson = {"数据": [80, 12],标签":[已用空间，可用空间]，颜色":['#9AB6F0'，'#C2D3F6']};$scope.pieDiskData = json;}]);

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

解决方案

改编自

I am learning stage of angular-chart-js. I am trying to use angular-chart.js to plot a pie chart. But I am unable to find a way for showing labels (not tooltips) on the pie chart, which describe each slice of data.

Here is how I did it:

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>

解决方案

Adapted from https://stackoverflow.com/a/25913101/360067 for angular-chart

Add the following options to your scope

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

And use that in your directive

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

---

Fiddle (with relevant sections from your code) - http://jsfiddle.net/zuhp8k5f/154/

---

这篇关于Angular-Charts - 饼图，在每个数据切片中显示标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！