0

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

不幸的是，文档部门缺少 Angular 库。我能够从谷歌搜索中获得部分工作图表，并且能够复制与现有图表相同的结果，但我无法弄清楚如何设置图例，目前它们是空的。

这是我拥有的当前代码：

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 版本的样子

反应JS

有谁知道我怎样才能让右边的两个图例像 React 一样填充？

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

任何帮助深表感谢。

如果有人想知道我也尝试过ng2-charts，但它比我需要的更复杂，我想把它作为最后一个资源，因为我必须将我的数据结构转换为更复杂的一个让它工作。

4

1 回答 1

0

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

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

相反，我应该初始化它：

columns = ['Month', 'Income', 'Expenses', ];
于 2020-09-05T22:29:13.693 回答