Graph not hiding value of last column [closed]

-2

The last column value does not hide. When I hide the seller 4 the chart does not hide the values of the seller

<!DOCTYPE HTML>

<html lang="pt-br">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/Chart.js"></script>
    </head>
    <body>
        <div>
            <canvas id='grafico' style='width:100%;height:350px;'></canvas>
        </div>
        <script>
            var ctx = document.getElementById('grafico');
            var ctx = document.getElementById('grafico').getContext('2d');

            var data = {
                labels: [
                    "Janeiro",
                    "Fevereiro",
                    "Março",
                ],
                datasets: [
                    {
                        label: "Vendedor 1",
                        backgroundColor: 'rgba(64, 126, 192, 1)',
                        data: [10, 49, 80],
                    },
                    {
                        label: "Vendedor 2",
                        backgroundColor: 'rgba(99, 171, 99, 1)',
                        data: [20, 39, 50],
                    },
                    {
                        label: "Vendedor 3",
                        backgroundColor: 'rgba(255, 226, 151, 1)',
                        data: [35, 29, 20],
                    },
                    {
                        label: "Vendedor 4",
                        backgroundColor: 'rgba(188, 86, 86, 1)',
                        data: [45, 19, 10],
                    }
                ]
            };

            var chart_pagamento = new Chart(ctx, {
                data: data,
                type: 'bar',
                options:{
                    scaleShowVerticalLines: false,
                    responsive: false,
                     title: {
                        display: true,
                        text: 'Solicitações tratadas - SLA'
                    },
                    legend: {
                        display: true,
                        position:'bottom',
                    },

                    scales:{
                        display:true,
                        gridLines : {
                            display : false
                        },
                        yAxes: [
                            {
                                position: 'left',
                                ticks: {
                                    min: 0,
                                },
                                 gridLines : {
                                    display : false
                                }
                            },
                        ],
                        xAxes: [{                           
                            gridLines : {
                                //display : false
                            },
                        }]
                    },

                    animation: {
                        duration: 0,
                        onComplete: function () {
                            var ctx = this.chart.ctx;
                            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'bold', Chart.defaults.global.defaultFontFamily);
                            ctx.fillStyle = this.chart.config.options.defaultFontColor;
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'bottom';
                            this.data.datasets.forEach(function (dataset) {
                                for (var i = 0; i < dataset.data.length; i++) {
                                    var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                                    ctx.fillText(dataset.data[i], model.x, model.y - 5 );
                                }
                            });
                        }
                    }
                },
            });
        </script>
    </body>
</html>
    
asked by anonymous 21.03.2017 / 21:21

1 answer

0
animation: {
                    duration: 0,
                    onComplete: function () {
                        var ctx = this.chart.ctx;
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'bold', Chart.defaults.global.defaultFontFamily);
                        ctx.fillStyle = this.chart.config.options.defaultFontColor;
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';
                        this.data.datasets.forEach(function (dataset) {
                            for (var i = 0; i < dataset.data.length; i++) {
                                if(!dataset._meta[0].hidden)
                                {
                                    var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                                    ctx.fillText(dataset.data[i], model.x, model.y - 5 );
                                }
                            }
                        });
                    }
                }
    
21.03.2017 / 21:46