如何使用 Angular 在 amCharts 中创建图例？答案

【问题标题】：How to create a legend in amCharts with Angular?如何使用 Angular 在 amCharts 中创建图例？
【发布时间】：2020-10-01 11:57:35
【问题描述】：

我有一个显示复杂图表的应用程序。我想为这些添加一个图例，但我不知道该怎么做。

在我的组件中，我像这样导入amcharts：

import { AmChartsService } from '@amcharts/amcharts3-angular';

然后我调用这个函数：

  getCharts(id: string) {
    this.charts.forEach(chart => {
      const amChart = this.AmChartsService.makeChart(chart.id, this.chartService.getById(MyEnum.config));
    });
  }

我传递给上述函数的配置在我的图表服务中定义如下：

const charts: Chart[] = [
  { 
    id: MyEnum.config,
    data: {
      ...
      },
      valueAxes: [{
      ...
      }],
      balloon: {
      ...
      },
      chartCursor: {
      ...
      },
      legend: {
        position: 'bottom',
        bottom: 10,
        left: 15,
        width: 'auto',
        autoMargins: false,
        data: []
      },
    }
  }
];

仅当我从配置中删除 data:[] 时才会显示图例。但随后只显示图例的标记。

我想在图表底部添加一个带有标记和标签的图例来说明线条的含义。

【问题讨论】：

标签： angular typescript charts amcharts

【解决方案1】：

data 属性用于创建您自己的自定义标记，默认情况下不能与自动生成的图例一起使用，因此您需要删除 data:[] 行。要将标签添加到自动生成的图例标记，请将图表的 title 属性设置为适当的值，因为它使用 title 值 by default：

"graphs": [{
  "title": "graph 1",
  // ...
},{ 
  "title": "graph 2",
  // ...
}]

【讨论】：