Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

É possível pegar índice de uma lista (ul) pelo evento de click?

Estou utilizando o google charts para apresentar relatório de vendas das lojas.

É possível pegar qual índice (número) da lista foi clicado? Coloquei o listener no tag nav e quando clicar na li queria retorna o índice para atualizar a variável posicaoAtual e gerar um novo gráfico.

Segue página html

<!DOCTYPE>
   <html>
       <head>
           <title>DashBoad</title>

           <meta content="text/html; charset=utf-8">
           <meta name="*viewport*" content="width=device-width">

           <LINK href="estilos.css" rel="stylesheet" type="text/css">                                   
           <!-- Carrega a AJAX API -->
            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

       </head>

       <body class="container">

            <header style="width:100%"> 
                <h1 class="textocenter">Acompanhamento de Consórcios</h1>
            </header>

            <main>

               <div style="width:100%;margin: 0 auto;">

                 <div class="areaMenu">

                    <nav id="listas">
                        <ul> 
                            <li>Todos</li>
                            <li>Ilheus</li>
                            <li>Ag2</li>
                            <li>Ag3</li>
                            <li>Ag4</li>
                            <li>Ag5</li>
                            <li>Ag6</li>
                            <li>Ag7</li>
                            <li>Ag8</li>
                            <li>Ag9</li>
                            <li>Ag10</li>
                        </ul>
                    </nav>
                 </div>

                 <div id="chart" class="graficoPrincipal bordas"></div>

               </div>
            </main>

       <script type="text/javascript" src="charts.js"></script>

       </body>
   </html>

Segue javascript

google.charts.load('current', {'packages':['corechart', 'table'], 'language': 'pt-br'});
   google.charts.setOnLoadCallback(criarGrafico);

   var data = [];
       data[0] = [['Mes', 'Vendas', 'Canc', 'Qtd Venda', 'Qtd Canc'],
                  ['janeiro', 430000, 210752, 9, 5],     
                 ];
       data[1] = [['Mes', 'Vendas', 'Canc', 'Qtd Venda', 'Qtd Canc'],
                  ['janeiro', 95000, 0, 2, 0],
                 ];
       data[2] = [['Mes', 'Vendas', 'Canc', 'Qtd Venda', 'Qtd Canc'],
                  ['janeiro', 0, 0, 0, 0],
                 ]; 

   var posicaoAtual = 0;
   function criarGrafico(){

       var dataTable = new  google.visualization.arrayToDataTable(data[posicaoAtual]);

       var options = {
                     legend: {
                              position:'bottom'
                     },
                     hAxis:{title:'meses'},
                     seriesType: 'bars',
                     series:[{type:'line', pointSize: 10, targetAxisIndex:2, color:'#2E2EFE'},
                             {type:'line', pointSize: 10, targetAxisIndex:2, color:'#DF0101'},
                             {type:'bars', targetAxisIndex:0, color:'#5882FA'},
                             {type:'bars', targetAxisIndex:0, color:'#FF4000'}],
                     vAxes:[{title:'Quant.'}, 
                            {title:'Valor', format:'#.###'}],
                     hAxes: [{title: 'Meses', textPosition:'out'}],
                   };

        var chart = new google.visualization.ComboChart(document.getElementById('chart'));

        chart.draw(dataTable, options);

   }
   var lis = document.querySelector('#listas');

   lis.addEventListener("click", function(event){
          var origem = event.target;

          if (origem.tagName == "LI")
             console.log(origem.textContent);

   });
3 respostas
solução!

Boa tarde, Danilo! Como vai?

Trabalhar com a posição é ruim pq vc deixa o seu JS acoplado demais a forma como o HTML foi escrito! Se amanhã a ordem dos seus itens mudarem o seu JS irá ficar comprometido!

Em vez disso, indico utilizar a dataset API. Dê uma olhada no link anterior e veja como funciona! Com ela vc vai conseguir atribuir um valor ao seu item e recuperar esse valor no JS de modo a identificar qual gráfico vc tem que carregar.

O que vc acha da ideia?

Muito bom! Ficará muito mais simples para implementar e também para dar manutenção.

Obrigado!

É isso aí, Danilo!

Por nada! Sempre que tiver alguma dúvida não hesite em recorrer ao pessoal aqui do fórum!

Grande abraço!