Angular Chart.js Несколько Холст - PullRequest
Новая
       30

Angular Chart.js Несколько Холст

0 голосов
/ 09 апреля 2019

Код ниже можно использовать только для графика, но я должен сделать несколько графиков. Как сделать приведенный ниже код массивом диаграмм и показать их с помощью * 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 Ответ

0 голосов
/ 10 апреля 2019

Вы можете использовать @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 }],
    }
  }
};
...