嗨,大家在角度图表中面临一个问题。即使用户选择了所有图例,我也在使用图表来显示比例值。
选择图例时这是HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script data-require="chartjs@*" data-semver="2.2.1" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Stacked Bar Chart</h1>
<canvas class="chart chart-bar" chart-type="type" chart-data="data" chart-labels="labels"
chart-series="series" chart-options="options" chart-colors="colors">
</canvas>
</body>
</html>
和javascript
var app = angular.module('plunker', ['chart.js']);
app.controller("MainCtrl", function($scope) {
$scope.labels = ["Jan", "Feb", "Mars", "Apr", "May", "Jun",
"Jul","Aug","Sep","Oct","Nov","Dec"
];
$scope.type = "bar";
$scope.series = ['Series A', 'Series B'];
$scope.options = {
title: {
display: true,
text: "Chart.js Bar Chart - Stacked"
},
tooltips: {
intersect: true
},
scales: {
xAxes: [{
barThickness: 15,
categoryPercentage: 0.1,
stacked: true,
ticks: {
autoSkip: false
},
scaleLabel: {
display: true,
labelString: "Process Area"
},
gridLines: {
display: false
}
}],
yAxes: [{
stacked: true,
categorySpacing: 0,
display: true,
maxBarThickness: 0,
position: 'left',
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: "# of Corrective Action"
}
}]
},
elements: {
line: {
fill: false
}
},
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 15
}
}
};
$scope.data = [
[65, 59, 90, 81, 56, 55, 40,10,60,90,84,63],
[28, 48, 40, 19, 96, 27, 100,50,40,90,31,70]
];
$scope.colors = ['#00ADF9'];
});
Plunker演示:http://plnkr.co/edit/OXpRBqngdimzxDp1t7Qh?p=preview
供参考
我希望在没有选择图例时显示相同的比例值。