Блог

Я пытаюсь преобразовать мою текущую диаграмму Google, написанную на ReactJS, в новое веб-приложение Angular 10. Я нашел это angular-google-charts, которые, похоже, являются угловой версией react-google-charts от React.

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

Вот текущий код, который у меня есть:

 import { Component, OnInit } from '@angular/core';
import { ChartType } from 'angular-google-charts';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {

  chartType = ChartType.Bar;
  chartOptions = {
    colors: ['#216f31', '#a00909'],
    legend: { position: 'top', maxLines: 3 },
  };
  columns: ['Income', 'Expenses', ];

  chartData = [
    // ['Month', 'Income', 'Expenses'],
    ['Apr', 1398.36, 0],
    ['May', 3255.20, 2704.15],
    ['Jun', 390, 3348.40],
    ['Jul', 1300.00, 0],
    ['Aug', 382.50, 0],
  ];

  constructor() {
  }

  ngOnInit(): void {
  }

}  

 <fieldset class="position-relative ml-2">
  <legend class="display-4 mb-0">Chart</legend>
  <google-chart style="width: 90%; height: 80%;"
            [type]="chartType"
            [options]="chartOptions"
            [columns]="columns"
            [data]="chartData"></google-chart>
</fieldset>  

Это то, что он производит

Так выглядит версия React

У кого-нибудь есть идеи, как я могу заполнить две легенды справа, как это было на React one?

ps: закомментированная строка в chartData массиве — это все, что требуется для создания легенд в React, но это не работает на Angular

Любая помощь очень ценится.

На случай, если кому-то интересно, я также пробовал ng2-charts, но это сложнее, чем то, что мне нужно, и я хотел бы оставить это в качестве последнего ресурса, поскольку мне нужно преобразовать свою структуру данных в гораздо более сложную, чтобы это работало.

Я только что понял, что определил тип переменной, для columns которой:

 columns: ['Income', 'Expenses', ];
  

Вместо этого я должен был инициализировать его:

 columns = ['Month', 'Income', 'Expenses', ];