Graph not hiding value from last column

Asked

Viewed 70 times

-2

The last value of the column is not hidden. 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>
  • 1

    If you can be more clear, by saying what you intend to do and what is going wrong and putting it within the question and not in the title of the question. It’ll be easier to help you.

  • https://jsfiddle.net/jvt7z0bq/

  • Good afternoon João. When I click to hide the seller’s values 4, the column hides, but the value of that column still appears.

  • Clarify your specific issue or add other details to highlight exactly what you need. The way it’s written here, it’s hard to know exactly what you’re asking. See the page How to ask for help in clarifying this question.

  • I was able to solve with a help. In the loop loop inside the foreach a check was made. if(! dataset. _meta[0]. Hidden)

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 );
                                }
                            }
                        });
                    }
                }
  • That and the solution to your question?

  • This was the solution to my problem. Thank you very much for your help and attention.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.