Как уничтожить холст с помощью идентификатора и добавить новый холст к тому же идентификатору - PullRequest
Новая
       23

Как уничтожить холст с помощью идентификатора и добавить новый холст к тому же идентификатору

0 голосов
/ 27 декабря 2018

Я использую линейные и гистограммы, используя Chart.js.У меня есть 2 варианта отображения их данных: до нажатия кнопки и после нажатия кнопки.Оба случая работают нормально.Но проблема в том, что при каждом нажатии кнопки и наведении курсора мыши на верхний график отображаются старые данные (все время).

Ожидаемый результат: Диаграмма больше не должна иметьпредыдущие данные, но вместо этого показывают новые данные, и пользователь может взаимодействовать с ними без проблем.

Фактический результат: Диаграмма показывает новые данные, но если пользователь наводит курсор на диаграмму, он будетмигать назад и вперед между исходными и новыми данными

Вот код

для отображения диаграмм 

<div ngDraggable class="col-lg-4 my-2 drag-block" *ngFor="let selectedItem of selectedKpi" (edge)="checkEdge($event)"
        [bounds]="myBounds" [inBounds]="inBounds">
        <mat-card>
          <mat-card-header>
            <mat-card-title>
              <h5>{{selectedItem}}</h5>
            </mat-card-title>
          </mat-card-header>
          <mat-card-content>
            <canvas id="{{selectedItem}}">{{chart}}</canvas>
          </mat-card-content>
        </mat-card>
      </div>

Код машинописного текста: 

this.selectedKpi = ["Clicks", "Orders", "Revenue", "Impressions"];

drawChart(kpi, divId, chartType, isFilled, data, labels, backgroundColor, borderColor) {
            setTimeout(function () {
              const canvas = <HTMLCanvasElement>document.getElementById(divId);
              const ctx = canvas.getContext('2d');
              this.element = document.getElementById(divId) as HTMLElement;
              this.element.style.destroy;
              this.chart = new Chart(ctx, {
                type: chartType,
                data: {
                  labels: labels,
                  datasets: [{
                    tension: 0,
                    label: kpi,
                    data: data,
                    fill: isFilled,
                    backgroundColor: backgroundColor,
                    borderWidth: 2,
                    pointBorderColor: borderColor,
                    pointRadius: 4,
                    borderJoinStyle: 'miter',
                  }]
                },
                options: {
                  responsive: true,
                  maintainAspectRatio: true,
                  scales: {
                    xAxes: [{
                      gridLines: {
                        display: true,
                        lineWidth: 1
                      }
                    }],
                    yAxes: [{
                      gridLines: {
                        display: true,
                        lineWidth: 1
                      }
                    }]
                  },
                  tooltips: {

                    mode: 'x',
                    callbacks: {
                      labelColor: function (tooltipItem, charts) {
                        return {
                          borderColor: borderColor,
                          backgroundColor: borderColor
                        };
                      },
                      labelTextColor: function (tooltipItem, charts) {
                        return '#3e95cd';
                      }
                    }
                  }, legend: {
                    display: false
                  }, emptyOverlay: {
                    fillStyle: 'rgba(74, 100, 100, 0.04)', 
                    fontColor: 'rgba(0, 0, 0, 1)', 
                    fontStrokeWidth: 0       
                  }
                }
              });
            }, 100);
          }

, пожалуйста, объясните мне, как уничтожить холст и перерисовать его, используя его идентификатор.

Я также создал демонстрацию stackblitz.Ниже приводится URL.

https://stackblitz.com/edit/angular-sqnxbq

1 Ответ

0 голосов
/ 27 декабря 2018

Это очень распространенная проблема при обновлении графиков.Пожалуйста, добавьте следующий код в начале вашего updateCharts(buttonClick: string) метода.

Chart.helpers.each(Chart.instances, function (instance) {
        instance.destroy();
      });

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

...