Диаграмма JS - Обновление не работает, когда я получаю данные из API для получения новых данных - PullRequest
Новая
       7

Диаграмма JS - Обновление не работает, когда я получаю данные из API для получения новых данных

0 голосов
/ 13 июля 2020

У меня проблема, когда при обновлении диаграммы новыми данными данные просто добавляются в диаграмму.

.ts файл 

export class InfoComponent implements OnInit {

  public chart: Chart = [];
  id: any;
  date = [];
  price = [];

  constructor(private cryptoAPIService: CryptoAPIService, private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.id = this.route.snapshot.paramMap.get('id');
    console.log(this.id);
    this.getValueById(1);
  }


  getValueById(period) {

    if (typeof this.chart.canvas !== "undefined") {
        console.log(this.date[0]);
        return this.cryptoAPIService.getChartValues(this.id, period).subscribe(res => {
        for(let val of res[0]) {
          var temp = new Date(val[0]).toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric', hour12: false, hour: '2-digit', minute: '2-digit' });
          this.date.push(temp);
          val[1] = Math.round((val[1] + Number.EPSILON) * 100) / 100; // round to 2 decimals
          this.price.push(val[1]);
        }
        console.log("Chart created");
        console.log(this.date);

        this.chart.data.labels = this.date;
        this.chart.data.datasets[0].data = this.price;
        this.chart.update();
      });
    } else {
    return this.cryptoAPIService.getChartValues(this.id, period).subscribe(res => {
      for(let val of res[0]) {
        var temp = new Date(val[0]).toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric', hour12: false, hour: '2-digit', minute: '2-digit' });
        this.date.push(temp);
        val[1] = Math.round((val[1] + Number.EPSILON) * 100) / 100; // round to 2 decimals
        this.price.push(val[1]);
      }
      this.chart = new Chart('canvas', {
        type: 'line',
        data: {
          labels: this.date,
          datasets: [
            {
              data: this.price,
              borderColor: '#45b6fe'
            },
          ]
        },
        options: {
          tooltips: {
            callbacks: {
              label: (tooltipItems, data) => {
                  return '$' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index];
              }
          },
        },
          legend: {
            display: false
          },
          scales: {
            xAxes: [{
              display: true
            }],
            yAxes: [{
              ticks: {
                userCallback: function(tick) {
                  return '$' + tick.toString() ;
                }
              },
              display: true
            }],
          }
        }
      });
      console.log("Chart created");
    });
  }
}
}

HTML файл 

<a (click)="getValueById(1)">24h</a>
<a (click)="getValueById(7)">7 Days</a>
<a (click)="getValueById(30)">Month</a>
<a (click)="getValueById(365)">Year</a>

<div id="chartDiv" class="chart" *ngIf="chart">
  <canvas id="canvas">{{ chart }}</canvas>
</div>

Итак, я пробовал это при обновлении, чтобы увидеть, где проблема: 

this.chart.data.labels = [10,15,22,14];
this.chart.data.datasets[0].data = [1,111,24,24];

После этого данные отображаются нормально, без добавления . Отображается как новая диаграмма, что мне действительно нужно, но с данными из API.

Мне интересно, почему он не сбрасывает диаграмму, когда я использую данные из API, какие-либо решения?

...