Как обновить данные Chart в асинхронном режиме в Angular Chart.js? - PullRequest
Новая
       38

Как обновить данные Chart в асинхронном режиме в Angular Chart.js?

0 голосов
/ 27 апреля 2018

У меня есть проект, основанный на ngx-admin стартер пуст (без всех библиотек). Я импортировал angular2-chartjs lib в package.json . График составлен правильно.

Мне нужно обновить данные диаграммы, когда я получаю ответ от сервера, в асинхронным способом.

Я прочитал документацию Chart.js, которая сообщает об этом способе обновления данных, следующим образом: 

    function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
    }

Но это ChartJs , а ngx-admin использует angular2-chartjs .

В моем компоненте я инициализировал диаграмму с пустыми данными: 

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'performance',
  template: `
  <chart type="line" [data]="data" [options]="options"></chart>
`,
  styleUrls: ['./performance.component.scss'],
})
export class PerformanceComponent implements OnDestroy {
  private PERFORMANCE_ENDPOINT = environment.performanceREST;
  data: any;
  options: any;
  themeSubscription: any;

  constructor(private theme: NbThemeService, private restService: TableService, http: Http) {
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

      const colors: any = config.variables;
      const chartjs: any = config.variables.chartjs;

      this.data = {
        labels: [],
        datasets: [{
          data: [],
          label: '',
          backgroundColor: NbColorHelper.hexToRgbA(colors.primary, 0.3),
          borderColor: colors.primary,
        }, {
          data: [],
          label: '',
          backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.3),
          borderColor: colors.danger,
        }, {
          data: [],
          label: '',
          backgroundColor: NbColorHelper.hexToRgbA(colors.info, 0.3),
          borderColor: colors.info,
        }],
      };

      this.options = {
        responsive: true,
        maintainAspectRatio: false,
        elements: {
          line: {
            tension: 0,
            fill: false,
          },
        },
        scales: {
          xAxes: [{
            gridLines: {
              display: true,
              color: chartjs.axisLineColor,
            },
            ticks: {
              fontColor: chartjs.textColor,
            },
          }],
          yAxes: [{
            gridLines: {
              display: true,
              color: chartjs.axisLineColor,
            },
            ticks: {
              fontColor: chartjs.textColor,
            },
          }],
        },
        legend: {
          labels: {
            fontColor: chartjs.textColor,
          },
        },
      };
    });

    // ## HERE I WOULD LIKE TO IMPLEMENT REST HTTP TO RETRIEVE DATA FROM SERVER ##
    // this.restService.endPoint = this.PERFORMANCE_ENDPOINT;
    // this.restService.getElements()
    //   .then((result) => {
    //     // tslint:disable-next-line:no-console
    //     console.log('PerformanceRESULT: ' + result);
    //     this.data.datasets.forEach((dataset) => {
    //       dataset.data.push(result);
    //     });
    //   });
  }

  protected addData(chart, label, data) {
    this.data.labels.push(label);
    this.data.datasets.forEach((dataset) => {
      dataset.data.push(data);
    });
    // chart.update();
  }

  protected removeData(chart) {
    this.data.labels.pop();
    this.data.datasets.forEach((dataset) => {
      dataset.data.pop();
    });
    // chart.update();
  }

  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }
}

Кто-то здесь знает, что посоветуете решить мою проблему? (пример приветствуется).

Спасибо

1 Ответ

0 голосов
/ 12 мая 2018

Кажется, обнаружение изменений не сработало https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

Я исправил свой случай, обновив весь объект параметров

...