在图表内显示标签 - angular.js 和 chart.js
show label inside the chart - angular.js and chart.js
我正在尝试显示图表的信息,而无需用户将鼠标悬停在图表的任何部分上。我正在使用 Chart.js 和 Angular.js
我的疑惑和这个一样question here!
html代码:
<div class="wrapper-chart" >
<canvas
id="pie"
class="chart chart-pie"
chart-data="data"
chart-labels="labels"
chart-options="options"
chart-colors="colors"
legend = "true"
chart-series="series">
</canvas>
</div>
angular代码:
angular
.module('myBeeApp.controllers')
.controller('chartHome', chartHome);
chartHome.$inject = [
'$scope'
];
function chartHome(
$scope
){
$scope.labels = ["Primavera", "Verão", "Outono", "Inverno"];
$scope.data = [32, 53, 14, 79];
$scope.options = {
showToolTips: true,
tooltipEvents: [],
onAnimationComplete: function() {
this.showTootip(this.datasets[0].bars,true);
},
title: {
display: true,
text: 'Quantidade por Estação',
fontColor: '#ff8c1b',
fontFamily: 'HelveticaNeue',
fontSize: 26,
},
legend: {
display: true
},
cutoutPercentage: 50,
};
$scope.colors = ["#FF7400", "#C85B00", "#FFB77B", "#E3831E"];
}
图表已正确生成,但尚未显示任何信息。
生成的图表(我的图表):
我多么希望它会是这样(带有标签):
我已经尝试过这段代码,但是没有对我有用!
$scope.options = {
tooltipEvents: [],
showTooltips: true,
tooltipCaretSize: 0,
onAnimationComplete: function () {
this.showTooltip(this.segments, true);
},
};
我也试过根本没用!(这就是为什么我认为这不是一个重复的问题)
版本:angular - v1.6.6 ; angular-图表-v1.1.1; chart.js - v2.7.1
谢谢你所做的一切!
我遵循了你提到的相同 。我更改了图表类型、标签、颜色和数据。它根据需要在图表中显示标签而不悬停
angular.module('App', ["chart.js"]);
angular.module('App').controller('Controller', ['$scope', '$http', '$location', '$window',
function($scope, $http, $location, $window) {
$scope.options = {
tooltipEvents: [],
showTooltips: true,
tooltipCaretSize: 0,
onAnimationComplete: function() {
this.showTooltip(this.segments, true);
},
};
var diskDataJson = {
"data": [32, 53, 14, 79],
"labels": ["Primavera", "Verão", "Outono", "Inverno"],
"colours": ["#FF7400", "#C85B00", "#FFB77B", "#E3831E"]
};
$scope.pieDiskData = diskDataJson;
}
]);
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.css">
<div ng-app="App">
<div ng-controller="Controller">
<canvas id="pie33" chart-options="options" class="chart chart-doughnut chart-xs ng-isolate-scope" height="120" width="240" chart-data="pieDiskData.data" chart-labels="pieDiskData.labels" chart-colours="pieDiskData.colours" chart-legend="true"></canvas>
</div>
</div>
Fiddle 演示
我正在尝试显示图表的信息,而无需用户将鼠标悬停在图表的任何部分上。我正在使用 Chart.js 和 Angular.js
我的疑惑和这个一样question here!
html代码:
<div class="wrapper-chart" >
<canvas
id="pie"
class="chart chart-pie"
chart-data="data"
chart-labels="labels"
chart-options="options"
chart-colors="colors"
legend = "true"
chart-series="series">
</canvas>
</div>
angular代码:
angular
.module('myBeeApp.controllers')
.controller('chartHome', chartHome);
chartHome.$inject = [
'$scope'
];
function chartHome(
$scope
){
$scope.labels = ["Primavera", "Verão", "Outono", "Inverno"];
$scope.data = [32, 53, 14, 79];
$scope.options = {
showToolTips: true,
tooltipEvents: [],
onAnimationComplete: function() {
this.showTootip(this.datasets[0].bars,true);
},
title: {
display: true,
text: 'Quantidade por Estação',
fontColor: '#ff8c1b',
fontFamily: 'HelveticaNeue',
fontSize: 26,
},
legend: {
display: true
},
cutoutPercentage: 50,
};
$scope.colors = ["#FF7400", "#C85B00", "#FFB77B", "#E3831E"];
}
图表已正确生成,但尚未显示任何信息。
生成的图表(我的图表):
我多么希望它会是这样(带有标签):
我已经尝试过这段代码,但是没有对我有用!
$scope.options = {
tooltipEvents: [],
showTooltips: true,
tooltipCaretSize: 0,
onAnimationComplete: function () {
this.showTooltip(this.segments, true);
},
};
我也试过
版本:angular - v1.6.6 ; angular-图表-v1.1.1; chart.js - v2.7.1
谢谢你所做的一切!
我遵循了你提到的相同
angular.module('App', ["chart.js"]);
angular.module('App').controller('Controller', ['$scope', '$http', '$location', '$window',
function($scope, $http, $location, $window) {
$scope.options = {
tooltipEvents: [],
showTooltips: true,
tooltipCaretSize: 0,
onAnimationComplete: function() {
this.showTooltip(this.segments, true);
},
};
var diskDataJson = {
"data": [32, 53, 14, 79],
"labels": ["Primavera", "Verão", "Outono", "Inverno"],
"colours": ["#FF7400", "#C85B00", "#FFB77B", "#E3831E"]
};
$scope.pieDiskData = diskDataJson;
}
]);
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.css">
<div ng-app="App">
<div ng-controller="Controller">
<canvas id="pie33" chart-options="options" class="chart chart-doughnut chart-xs ng-isolate-scope" height="120" width="240" chart-data="pieDiskData.data" chart-labels="pieDiskData.labels" chart-colours="pieDiskData.colours" chart-legend="true"></canvas>
</div>
</div>
Fiddle 演示