Question

我正在构建一个Angular 8应用程序，该应用程序加载了一些条形图。我的问题是，当页面加载或用户从后端加载新数据时，如何设置条形高度的动画。

The bar chart itself 这是HTML代码，显示了我如何构建图表以及基于研究结果为实现目标所做的尝试：

<div class="chart-container" *ngIf="!loading ">
  <div class="bars-container">
    <div class="bar-container" *ngFor="let value of data; let i = index">
      <div
        class="bar"
        [@expand]="{ value: true, params: { elemH: dataLog[i][j] } }"
        *ngFor="let valor of valores; let j = index"
        [style.height.%]="dataLog[i][j]"
        [style.backgroundColor]="seriesColors[j]"
        [style.flexBasis.%]="barWidth"
      >
        <span>{{ valor }}</span>
      </div>
    </div>
  </div>
</div>

这是我获取所有条形图的相对高度的方法：

@Component({
  selector: 'app-grafico-vertical',
  templateUrl: './grafico-vertical.component.html',
  styleUrls: ['./grafico-vertical.component.scss'],
  animations: [
    trigger('expand', [
      transition(':enter', [animate(2000, style({ height: '{{elemH}}%' }))], {
        params: { elemH: 0 }
      })
    ])
  ]
})
export class GraficoVerticalComponent implements OnInit {
  @Input() data: number[][];
  @Input() barWidth: number;
  @Input() seriesColors: string[];
  @Input() loading = false;

  maxValue: number;
  dadosLog: number[][];

  constructor() {}

  ngOnInit() {
    this.maxValue= Math.max(
      ...this.data.reduce((acc, cur) => acc.concat(cur), [])
    );

    this.dadosLog = this.data.map(values =>
      values.map(
        value =>
          (Math.log10(valor === 1 ? 10 : value) * 100) /
          Math.log10((this.maxValue === 1 ? 10 : this.maxValue) * 1.5)
      )
    );
  }
}

所以，我的问题是，如果可能的话，如何将这个高度值传递给动画？那我怎么触发呢？

OBS：我省略了一些与酒吧本身无关的代码。

如何在角度8动画中传递变量以动画化高度？

0 个答案: