Evento Click destaca parte do gráfico
No Evento do mouse Click destaca parte do gráfico.
by Andresa Prates
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body ng-app ng-controller="GraficoController">
<div>
<canvas id="andresaProjeto"></canvas>
</div>
</body>
<script>
function GraficoController($http,$element, $attrs) {
var vm = this;
vm.myLabels=[];
vm.myValues=[];
vm.myHoverColor=[];
vm.myForteColor=[];
//funçoes
vm.listarProjeto = listarProjeto();
function listarProjeto(){
vm.dados = [];
vm.dados = [
{
"codigo": 1,
"label": " Brasília",
"porcentagem": 30,
"valor": 30000,
"base": "#FF0000",
"light": "#FF3C3C",
"dark": "#800080"
}, {
"codigo": 2,
"label": " São Paulo ",
"porcentagem": 15,
"valor": 15000,
"base": "#9E3534",
"light": "#C85959"
}, {
"codigo": 3,
"label": " Rio de Janeiro",
"porcentagem": 25,
"valor": 25000,
"base": "#FF8000",
"light": "#FFA953"
}, {
"codigo": 4,
"label": " Outros",
"porcentagem": 20,
"valor": 20000,
"base": "rgba(75, 192, 192, 0.2)",
"light": "rgba(153, 102, 255, 0.2)"
}
]
angular.forEach(vm.dados, function(item){
vm.myLabels.push(item.label);
vm.myValues.push(item.valor);
vm.myHoverColor.push(item.light);
vm.myForteColor.push(item.base);
});
gerarGrafico();
}
function gerarGrafico(){
vm.data = {
...