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

如何解决如何使用Angular在amCharts中创建图例？

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

我在组件内部导入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：[] 时，才会显示图例。但是随后只显示了图例的标记。

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

解决方法

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

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