9

disculpen tengo un problemilla, tengo dos graficos highchart que quiero mostrar la mitad y mitad, he notado que cuando coloco fxLayout y fxFlex , los graficos se reducen a pequeño y quisiera que abarquen todo el ancho

cuando doy clic en el cuadradito chiquito se minimiza y cuando le sigo dando se agranda como quiero

cuando doy clic varias clic al ultimo si se grafica todo el ancho

introducir la descripción de la imagen aquí

He intenado con este codigo pero nada, si me podrian ayudar por favor.

<div fxLayout="row wrap">
  <div fxFlex="50" fxFlex.gt-sm="50" fxFlex.sm="100">
    <mat-card class="default">
        <p class="text-blue ml-1 mt-1">Transacciones por Corresponsal</p>
      <mat-card-content > 
          <app-graphic-basic [config_graphic]='config_graphic_tcorr' class="grafica-full-fix"></app-graphic-basic> 
      </mat-card-content>
     
    </mat-card>
  </div>
  <div fxFlex="50" fxFlex.gt-sm="50" fxFlex.sm="100" >
    <mat-card class="default">
        <p class="text-blue ml-1 mt-1">Transacciones por Territorio</p>
      <mat-card-content > 
      
            <app-graphic-basic [config_graphic]='config_graphic_tteri' class="grafica-full-fix"></app-graphic-basic>  
       
      </mat-card-content> 
      
    </mat-card>
    
  </div>
</div>

Adjunto la imagen como se ve introducir la descripción de la imagen aquí

Quisiera que se vea asì

introducir la descripción de la imagen aquí

componente del graphic-basic.component con respecto a css no tiene ninguno

<div fxLayout="row wrap">
    <div 
        *ngFor='let item of carousel;'
        fxFlex="100" 
        fxFlex.gt-sm="20" 
        fxFlex.sm="50" 
        [@animate]="{value:'*',params:{scale:'.9',delay:'300ms'}}">
        <mat-card>
            <mat-card-title fxLayoutAlign="start center">
                <small class="text-muted">{{item.desc}}</small>
                <span fxFlex></span>
                <mat-chip class="icon-chip" [style.background-color]="item.avance.color" selected="true" *ngIf="item.avance.value">
                    <mat-icon>trending_up</mat-icon>{{item.avance.value | percent :'.0-0'}}
                </mat-chip>
            </mat-card-title>
            <mat-card-content>
                <h3 class="m-0 font-normal">{{item.value | localNumber :item.format}}</h3>
                <small class="text-muted">{{item.unit}}</small>
            </mat-card-content>
        </mat-card>
    </div>
</div>


<div *ngIf="isLoadingGraphic">
    <div fxLayout="row" fxLayout.lt-sm="column" class="shop-top-toolbar">
        <span fxFlex></span>
        <div [fxHide.lt-md]="true">
            <button mat-icon-button [color]="grilla === 50 ? 'primary' : ''" (click)="red()">
                <mat-icon>apps</mat-icon>
            </button>
        </div>
        <span fxFlex="20px"></span>
    </div>


    <div fxLayout="row wrap">
        <div fxFlex="100" [fxFlex.gt-sm]="grilla" *ngFor='let cg of config_graphic;let i=index'>
            <div class="m-033">
                <highcharts-chart [Highcharts]="Highcharts" [(update)]="update[i]" [options]="co[i]" 
                    [runOutsideAngular]=true style="width: 100%; height: 400px;max-height: 80vh; display: block;">
                </highcharts-chart>
            </div>
        </div>
    </div>

  
</div>

he encontrado que con esto se cambia el tamaño, coloco la clase pero no se renderiza, como si no lo esta leyendo

introducir la descripción de la imagen aquí

4
  • ya intentaste esto stackoverflow.com/questions/34586670/…?
    – junior
    el 27 abr. 2021 a las 14:54
  • @junior amigo ayudame
    – PieroDev
    el 27 abr. 2021 a las 15:03
  • Piero, ¿has revisado e intentado replicar el contenido de la respuesta del enlace que te ha dado el buen @junior ?
    – fredyfx
    el 28 abr. 2021 a las 15:50
  • @fredyfx si pero igual nada , se grafica bien cuando le doy clic en esos cuadritos chiquitos pero yo quiero que por defecto muestre grande
    – PieroDev
    el 28 abr. 2021 a las 16:29

2 respuestas 2

4

Bueno la soluciòn que hice, es hacerle un seguimiento con Inspeccionar Elemento y ver que estilos se agregaban en cada direcctires de Angular. Observaba que se agregaban estas clases dinamicas mismo de Higcharts por lo que le agregue :Host ::ng-deep y la clase para que funcione.

:host ::ng-deep  .ng-tns-c13-4 {
  flex-flow: row wrap; box-sizing: border-box; display: flex;
}

:host ::ng-deep .ng-tns-c13-4 .ng-star-inserted{
  flex: 1 1 100%; box-sizing: border-box; max-width: 100%;
}

introducir la descripción de la imagen aquí

3
+25

Creo que el problema es el ancho de pantalla, tienes configurado en el div

fxFlex.sm="50" 

Eso provoca que el responsive fuerce a que ocupe la mitad del tamaño en las pantallas pequeñas-medianas, en tu ejemplo de código seria solo eliminar la parte que lo fuerza en el componente del graphic-basic.component

<div fxLayout="row wrap">
    <div 
        *ngFor='let item of carousel;'
        fxFlex="100" 
        [@animate]="{value:'*',params:{scale:'.9',delay:'300ms'}}">
        <mat-card>
            <mat-card-title fxLayoutAlign="start center">
                <small class="text-muted">{{item.desc}}</small>
                <span fxFlex></span>
                <mat-chip class="icon-chip" [style.background-color]="item.avance.color" selected="true" *ngIf="item.avance.value">
                    <mat-icon>trending_up</mat-icon>{{item.avance.value | percent :'.0-0'}}
                </mat-chip>
            </mat-card-title>
            <mat-card-content>
                <h3 class="m-0 font-normal">{{item.value | localNumber :item.format}}</h3>
                <small class="text-muted">{{item.unit}}</small>
            </mat-card-content>
        </mat-card>
    </div>
</div>


<div *ngIf="isLoadingGraphic">
    <div fxLayout="row" fxLayout.lt-sm="column" class="shop-top-toolbar">
        <span fxFlex></span>
        <div [fxHide.lt-md]="true">
            <button mat-icon-button [color]="grilla === 50 ? 'primary' : ''" (click)="red()">
                <mat-icon>apps</mat-icon>
            </button>
        </div>
        <span fxFlex="20px"></span>
    </div>
2
  • 1
    podrias hacer un ejemplo
    – PieroDev
    el 28 abr. 2021 a las 14:50
  • si le he quitado pero igual
    – PieroDev
    el 30 abr. 2021 a las 16:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.