Question

对于stackoverflow来说，这可能是一个太简单的问题，但我对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

我不太明白改变动画的意思，但要禁用动画，您需要执行以下操作..

将[动画]的新参数添加到图表组件中，如此...

<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';

希望这有助于：）

Angular2 ngx-charts动画

1 个答案: