Блог

У меня есть приложение, в котором отображаются сложные диаграммы. Я хотел бы добавить к ним легенду, но я понятия не имею, как это сделать.

Внутри моего компонента я импортирую 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 значение по умолчанию:

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