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

Question

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

在我的组件中，我像这样导入 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:[] 时才会显示图例。但随后只显示图例的标记。

我想要图表底部的图例，带有标记和标签来说明线条的含义。

Answer 1

data 属性用于创建您自己的自定义标记，默认情况下不能与 auto-generated 图例一起使用，因此您需要删除 data:[] 行.要为 auto-generated 图例标记添加标签，请设置图表的 title properties to an appropriate value as it uses the title value by default:

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

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

How to create a legend in amCharts with Angular?

charts

amcharts

typescript

angular