Угловой Chart.js Несколько холстов

#angular #canvas #chart.js #ngfor

#угловой #холст #chart.js #ngfor

Вопрос:

Приведенный ниже код можно использовать только для диаграммы, но мне нужно создать несколько диаграмм. Как я могу сделать приведенный ниже код массивом диаграмм и показать их с помощью *ngFor в Canvas.

 @ViewChild('pr_chart') chartElementRef: ElementRef;

 ngAfterViewInit() {
  let ctx = this.chartElementRef.nativeElement;
  ctx = ctx.getContext('2d');

  this.chart = new Chart(ctx, {
    type: 'line',
    options: {
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          display: false
        }],
        yAxes: [{
          display: false
        }],
      }
    },
    data: {
      labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
      datasets: [{
        data: [86, 378, 106, 306, 507, 111, 133, 221, 783, 5000],
        // label: "Africa",
        borderColor: '#3bd19c',
        fill: false
      }]
    }
  });
}

 <canvas #pr_chart></canvas>

1. Вы пытались использовать ViewChildren вместо ViewChild , чтобы получить список совпадающих ссылок вместо одной?

2. Я не знаком с этим, не могли бы вы поделиться со мной каким-нибудь примером по этому поводу?

Ответ №1:

Вы можете использовать @ViewChildren для получения нескольких ссылок <canvas #pr_chart></canvas> на экземпляры. Я собрал пример, показывающий, как это сделать, используя ваш пример выше: https://stackblitz.com/edit/angular-chartjs-multiple-charts .

По сути, у меня есть массив элементов диаграммы на моем контроллере:

 chartData: Chart.ChartData[] = [
  {
    labels: ['1500', '1600', '1700', '1750', '1800', '1850', '1900', '1950', '1999', '2050'],
    datasets: [{
      data: [86, 378, 106, 306, 507, 111, 133, 221, 783, 5000],
      borderColor: 'red',
      fill: false
    }]
  },
  {
    labels: ['1500', '1600', '1700', '1750', '1800', '1850', '1900', '1950', '1999', '2050'],
    datasets: [{
      data: [86, 378, 106, 306, 507, 111, 133, 221, 783, 5000].reverse(),
      borderColor: 'blue',
      fill: false
    }]
  }
];

Они используются для отображения нескольких диаграмм в моем шаблоне:

 <div *ngFor="let data of chartData" class="chart">
  <canvas #pr_chart></canvas>
</div>

Вместо простого захвата одной ссылки с помощью @ViewChild , вы можете захватить каждый из pr_chart экземпляров с помощью @ViewChildren :

 @ViewChildren('pr_chart', { read: ElementRef }) chartElementRefs: QueryList<ElementRef>;

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

 ngAfterViewInit() {
  this.charts = this.chartElementRefs.map((chartElementRef, index) => {
    const config = Object.assign({}, baseConfig, { data: this.chartData[index] });

    return new Chart(chartElementRef.nativeElement, config);
  });
}

Поскольку в моем примере я собирался дублировать большую часть конфигурации для каждой из диаграмм, и изменялись только данные, я создал базовую конфигурацию, которая была общей для каждой из диаграмм при ее рендеринге:

 const baseConfig: Chart.ChartConfiguration = {
  type: 'line',
  options: {
    responsive: true,
    maintainAspectRatio: false,
    legend: { display: false },
    scales: {
      xAxes: [{ display: false }],
      yAxes: [{ display: false }],
    }
  }
};