gpt4 book ai didi

javascript - 在angular-chart.js的饼图中显示数据标签

转载 作者:行者123 更新时间:2023-12-04 19:49:28 29 4
gpt4 key购买 nike

我已经使用angular-chart.js创建了一个饼图,并且效果很好。现在,我需要在不起作用的饼图的每个部分上显示数据值。

我尝试使用Chart.PieceLabel.js,并在选项部分添加了以下代码。没用我不确定如何将其与angular-chart.js一起使用,因为它最初是为chart.js编写的

pieceLabel: {
render: 'label'
}

我已经使用过onAnimationComplete,但是它似乎没有用。我没有收到任何错误消息。这是我的代码。我要去哪里错了?谢谢您的帮助! :)

html
 <canvas id="pie" class="chart chart-pie"
chart-data="data" chart-labels="labels" chart-options="options" width="500" height="300" chart-colors="colors"></canvas>

JS代码
$scope.options = {
legend: {
display: true,
position: "bottom"
},
tooltipEvents: [],
showTooltips: true,
tooltipCaretSize: 0,
onAnimationComplete: function () {
this.showTooltip(this.segments, true);
}
};
$scope.data = tempData;
$scope.labels = tempLabels;

柱塞链接:
https://embed.plnkr.co/zlBWzJ/

最佳答案

在你的pl下,我取代了

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>


</script>
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script>

(function(angular) {
'use strict';
angular.module('myApp', ['chart.js'])

.controller('myController', [function() {
var ctrl = this;


ctrl.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
ctrl.data = [300, 500, 100];
ctrl.data.label = [300, 500, 100];

ctrl.options = {
legend: {
display: true,
position: "bottom"
},
tooltipEvents: [],
showTooltips: true,
tooltipCaretSize: 0,
onAnimationComplete: function() {
this.showTooltip(this.segments, true);
},
};


}]);


})(window.angular);
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script>

<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
-->


<body ng-app="myApp" ng-controller="myController as ctrl">
<canvas id="pie" class="chart chart-pie" chart-data="ctrl.data" chart-labels="ctrl.labels" chart-options="ctrl.options">
</canvas>

</body>

关于javascript - 在angular-chart.js的饼图中显示数据标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48058601/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com