Angular-Charts - 饼图,在每个数据片段内显示标签 [英] Angular-Charts - Pie Chart,show labels inside each slice of data
本文介绍了Angular-Charts - 饼图,在每个数据片段内显示标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在学习角度图表-js的阶段。我试图使用angular-chart.js绘制饼图。但是我无法找到在饼图上显示标签(不是工具提示)的方法,它描述了每个数据片段。
以下是我的方法:
angular.module('App')。controller('Controller',['$ scope','$ http','$ location','$ window','$ routeParams',函数($ scope,$ http,$ location,$ window){var diskDataJson = {data:[80,12],labels:[已用空间,可用空间],颜色:['#9AB6F0' ,'#C2D3F6']}; $ scope.pieDiskData = json;}]);
< script src =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js>< / script>< table border =0width =100%> < TR> < td style =border-left:1px solid#0099CCwidth =25%> < center>< span>< label ng-bind-html ='load.static.dashboard.system.DUSAGE'| translate/>< / span> < /中心],[ < canvas id =pie33class =chart chart-pie chart-xs ng-isolate-scopeheight =120width =240data =pieDiskData.datalabels =pieDiskData.labelscolors = pieDiskData.colourslegend =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屋!
查看全文