Блог

Всем привет,

Я делаю визуализацию данных и хочу использовать библиотеку Chart.JS .

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

Проблема с этой идеей заключается в том, что когда я вызываю компонент <app-graph> в другом компоненте, последние переданные данные сохраняются и отображаются на диаграмме.

Это мой вопрос: как и какова наилучшая практика для отображения нескольких диаграмм? Должен ли я изменить свой компонент graph или я должен объявлять новую диаграмму каждый раз, когда мне нужна диаграмма, и забывать о своем компоненте диаграммы?

Я также пытался динамически изменять идентификатор, но это не сработало.

Иногда это работает, когда он инициализируется с помощью ng serve. На данный момент я каждый раз создаю новую диаграмму.

Я создал этот компонент, и он доступен здесь :

graph.component.ts :

  @ViewChild('canvas') canvasRef: ElementRef;
  @Input() chartType: string;
  @Input() chartDatasets: Array<any>;
  @Input() chartLabels: Array<any>;
  @Input() chartOptions: any;

  public theChartType: string;
  public theChartDatasets: Array<any> = [];
  public theChartLabels: Array<any> = [];
  public theChartOptions: any;

  public chart: any;

  constructor() { }

  ngOnInit(): void {
    console.log('Graph component');
    this.updateDataforChart();
  }

  ngOnChanges() {
    if (this.chart) {
      this.chart.destroy();
      this.chart = null;
      this.updateDataforChart();
    }
  }

  updateDataforChart() {
    // Data that will be passed
    this.theChartType = this.chartType;
    this.theChartDatasets = this.chartDatasets;
    this.theChartLabels = this.chartLabels;
    this.theChartOptions = this.chartOptions;

    const canvas = <HTMLCanvasElement> document.getElementById('myChart');
    const ctx = canvas.getContext('2d');

    this.chart = new Chart(ctx, {
      type: this.theChartType,
      data: {
        labels: this.theChartLabels, // your labels array
        datasets: [{
          data: this.theChartDatasets, 
          borderColor: '00AEFF',
          fill: true
        }],
      },
      options: this.theChartOptions,
    });

  }
  

graph.component.html :

 <div style="display: block;">
    <!-- <canvas id="customChart" #customChart>{{ chart }}</canvas> -->
    <canvas id="myChart" #myChart >{{ chart }}</canvas>
</div>
  

Когда я вызываю компонент :

 <app-graph [chartType]="chartType" [chartDatasets]="chartDatasets" [chartLabels]="chartLabels" [chartOptions]="chartOptions">    
</app-graph>