Arquivos da categoria: Desenvolvimento

Como ativar o click de botão no Chart.js

Chat.js é uma ótima biblioteca JavaScript para criação de gráficos. Você pode baixá-la no endereço http://www.chartjs.org/, onde também irá encontrar tutoriais e a API dessa biblioteca.

Sua utilização é bem simples e para gerar um gráfico donut que servirá de exemplo para nosso evento de clique, vamos começar importando os arquivos .js:

<script src="~/Scripts/Chart.bundle.min.js"></script>
<script src="~/Scripts/Chart.min.js"></script>

Depois de importados, vamos criar um elemento canvas, no lugar onde desejamos que o gráfico seja exibido:

<canvas id="donutChart"></canvas>

Depois de criado o elemento canvas precisamos iniciar o gráfico utilizando o código abaixo:

<script type="text/javascript">
        // Gráfico donnut
        // Recupera o elemento canvas utilizando javaScript
        var ctxDunut = document.getElementById("donutChart");
 
        // Instancia um novo gráfico no elemento
        var myDoughnutChart = new Chart(ctxDunut, {
            type: 'doughnut',
            data: {
                labels: [
                    "Java",
                    "JavaScript",
                    "Python",
                    "C#"
                ],
                datasets: [
                    {
                        data: [20, 50, 21, 35],
                        backgroundColor: [
                            "#FF6384",
                            "#36A2EB",
                            "#FFCE56",
                            "#C5C5C5"
                        ],
                        hoverBackgroundColor: [
                            "#FF97AC",
                            "#4DADED",
                            "#FFD570",
                            "#D2D2D2"
                        ]
                    }]
            },
            options: {
                scales: {
                    gridLines: [{
                        display: false
                    }]
                },
                legend: {
                    display: true,
                    labels: {
                        fontSize: 9,
                        fontFamily: "Arial"
                    }
                }
 
            }
        });
 
        // Para mais detalhes sobre as propriedades utilizadas e como montar
        // outros tipos de gráficos, acesse a api em http://chartjs.org

O código acima vai resultar no gráfico abaixo:

chartjs - Gráfico criado

Pronto, agora que já temos o gráfico na tela, o último passo é adicionar o evento de clique. A documentação do chartjs, é um pouco vaga sobre como usar o evento de click, porém o processo é bem simples. Ao clicar no gráfico, o Chart.js retorna um conjunto de pontos, onde na posição zero desse conjunto está a fatia que foi clicada (ou o ponto caso seja um gráfico de linhas), com isso só precisamos adicionar o evento de clique ao canvas e capturar essa informação do chart.js conforme o código abaixo:

        $(document).ready(function () {
            $("#donutChart").click(
                function (evt) {
                    var activePoints = myDoughnutChart.getElementsAtEvent(evt);
 
                    if (activePoints.length == 0) {
                        return;
                    }
 
                    alert(activePoints[0]._view.label);
 
                }
            );
        });

Com isso nosso gráfico agora responde aos cliques do mouse.