angular-google-charts如何为条形图添加图例？ 它产生的东西这是React版本的样子

问题描述

我正在尝试将当前用ReactJS编写的Google图表转换为新的Angular 10网络应用程序。我发现这个angular-google-charts似乎是React的react-google-charts的Angular版本。

不幸的是，文档部门缺少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,['Aug',382.50,];

  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上一样在右边获得两个图例吗​​？

ps：chartData数组中带注释的行是在React中生成图例所需的全部内容，但不适用于Angular

非常感谢您的帮助。

万一有人想知道我也尝试过ng2-charts，但是它比我需要的复杂得多，我想把它作为最后的资源，因为我必须改变自己的习惯数据结构要复杂得多。

解决方法

我刚刚意识到我已经定义了columns的变量类型：

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

相反，我应该初始化它：

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