Angular2 ngx-чарты Анимация

Question

Это может быть слишком простой вопрос для stackru, но я крайне новичок в anuglar2 и ngx-charts.

Итак, у нас есть этот простой компонент линейной диаграммы.

Моя проблема в том, что я хочу отключить анимацию, а также изменить анимацию, и я не знаю, как это сделать. Буду признателен за любую помощь (также не стесняйтесь исправлять условные обозначения кода, я всегда здесь, чтобы учиться).

import {Component} from '@angular/core';
import {single, multi, multi2} from '../data';

@Component({
  selector: 'app-line-chart',
  template: `
    <ngx-charts-line-chart
      [scheme]="colorScheme"
      [results]="multi"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      (select)="onSelect($event)">
    </ngx-charts-line-chart>
  `
})
export class LinechartComponent {
  single: any[];
  multi: any[];

  view: any[] = [500, 400];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Country';
  showYAxisLabel = true;
  yAxisLabel = 'Population';

  colorScheme = {
    domain: ['#F44336', '#3F51B5', '#8BC34A', '#2196F3', '#009688',         
    '#FF5722', '#CDDC39', '#00BCD4', '#FFC107', '#795548', '#607D8B']
  };

  // line, area
  autoScale = true;

  constructor() {
    Object.assign(this, {single, multi});
    setTimeout(() => {
      console.log('update');
      this.multi = multi2;
    }, 6000);
  }

  onSelect(event) {
    console.log(event);
  }
}

Answer 1

Я не совсем понимаю, что вы имеете в виду под изменением анимации, но чтобы отключить анимацию, вам нужно сделать следующее...

Добавьте новый параметр [animations] в компонент диаграммы следующим образом:

<ngx-charts-line-chart
  [animations]="animations"
  [scheme]="colorScheme"
  [results]="multi"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  [autoScale]="autoScale"
  (select)="onSelect($event)">
</ngx-charts-line-chart>

затем добавьте опцию так...

  // options
  animations = false; // this is where you turn your animations on and off.
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Country';
  showYAxisLabel = true;
  yAxisLabel = 'Population';

надеюсь это поможет:)