0

Estou utilizando o gráfico em linha do ng2-charts, ele possui uma boa visualização no meu monitor, porém no mobile fica uma má visualização dos dados.

Meu gráfico na visualização padrão do monitor:

inserir a descrição da imagem aqui

O mesmo gráfico redimensionado:

inserir a descrição da imagem aqui

Meu html:

<div class="col-12 col-lg-8 pt-4 p-2">
   <div class="card">
      <div class="m-3">
         <h5 class="mt-2 pt-3">Total de vendas por dia</h5>
         O quanto você vende por dia em cada conta?
      </div>
      <div class="mt-3">
         <div id="rowOpcoesGrafico" class="row">
            <i (click)="alteraCoresGrafico()" class="fas fa-palette opcoesGrafico ml-3 pl-3" matTooltipPosition="above" matTooltip="Alterar cores do gráfico"></i>
            <div id="colunaMesAnoGrafico" class="col-xl-3 col-12">
               <label class="dataPesquisaGrafico" for="dataPesquisaGrafico">Mês/Ano:</label>
               <input name="dataPesquisaGrafico" id="dataPesquisaGrafico" [(ngModel)]="dataPesquisarGrafico" placeholder="mês/ano" type="text" mask="00/0000" class="form-control" aria-describedby="start-date">
               <span (click)="atualizaGrafico(dataPesquisarGrafico)" matTooltip="Atualizar gráfico" class="input-group-addon" id="start-date"><span class="fas fa-sync-alt opcoesGrafico ml-2"></span></span>
            </div>
         </div>
         <canvas baseChart width="400" height="100"
         [datasets]="lineChartDataMes05"
         [labels]="diasMesAtualEscolhido"
         [options]="lineChartOptions"
         [colors]="lineChartColors"
         [legend]="lineChartLegend"
         [chartType]="lineChartType">
         </canvas>
      </div>
   </div>
</div>

No meu TS eu defini:

  public lineChartOptions:any = {
    responsive: true
  };

Penso que o ideal seria manter o height do gráfico e o Width eu der um overflow: auto na div, porém quando redimensiona o canvas automaticamente fica desse tamanho e se eu aumento através do css ele continua com as linhas do gráfico pequeno.

Alguém tem alguma ideia de como deixar esse gráfico apresentável no mobile?

1 Resposta 1

0

Consegui resolver dessa forma:

HTML:

<canvas baseChart width="600" height="larguraGrafico"
     [datasets]="lineChartDataMes05"
     [labels]="diasMesAtualEscolhido"
     [options]="lineChartOptions"
     [colors]="lineChartColors"
     [legend]="lineChartLegend"
     [chartType]="lineChartType">
</canvas>

Agora a largura do meu gráfico é definida através de uma propriedade do meu ts.

Meu ts ficou dessa forma:

ngOnInit(){
//Pega o tamanho da tela
    var widthTela = screen.width;

    //Em monitores grandes, a largura 100 resulta em uma boa visualização do gráfico
    this.larguraGrafico = 100;

    //Se a largura da tela for maior que 556, define a propriedade responsive como true, para ocupar todo o conteúdo da div
    if(widthTela > 556){
      this.lineChartOptions.responsive = true
    }else{
      //Caso for menor que 556 (dispositivos moveis), então define uma largura minima de 450 para que consiga visualizar corretamente as linhas do gráfico em conjunto com um overflow na div.
      this.lineChartOptions.responsive = false;
      this.larguraGrafico = 450
    }
}

E então apliquei no card do meu gráfico:

#cardGrafico{
    overflow: auto;
}

Meu resultado no mobile:

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .