Создайте легенды для каждого пузыря в amcharts v4 - PullRequest
Новая
       5

Создайте легенды для каждого пузыря в amcharts v4

0 голосов
/ 26 февраля 2019

Я пытаюсь создать пузырьковую диаграмму, используя библиотеку amCharts версии 4.Каждый пузырь здесь представляет другую страну, имеющую различный цвет.Теперь мне нужно создать легенды для каждого пузыря, присутствующего на графике.Я не могу достичь того же.Может ли кто-нибудь помочь мне за это.

Я использую нижеупомянутое руководство для создания пузырьковой диаграммы.

https://www.amcharts.com/demos/zoomable-bubble-chart

1 Ответ

0 голосов
/ 27 февраля 2019

Согласно официальным документам вы можете использовать пользовательские данные для своей легенды. 

chart.legend = new am4charts.Legend();
chart.legend.data = [{
  "name": "2016",
  "fill":"#72A6B2"
}, {
  "name": "2017",
  "fill": "#667E93"
}, {
  "name": "2018",
  "fill": "#488BB2"
}];

Чтобы адаптировать их к своим данным и создать легенду для всех стран, вы можете использовать следующиефрагмент: 

chart.legend = new am4charts.Legend();
chart.legend.data = chart.data.map(i => ({
  "name": i.title, 
  "fill": i.color
}));

Чтобы обновить данные для переключателя легенды, вы можете добавить скрытое свойство к вашим значениям данных и сообщить amcharts, чтобы оно использовалось для скрытия некоторых маркеров. 

series.dataFields.hidden = "hidden";

ДобавьтеИдентификатор данных для данных легенды и скрытое свойство, если вы хотите скрыть некоторые страны при инициализации. 

chart.legend.data = chart.data.map(i => ({
  id: i.id, 
  name: i.title, 
  fill: i.color,
  visible: !i.hidden
}));

Добавьте событие нажатия в легенду для обновления диаграммы.Используйте событие "up", поскольку event.target.isActive обновляется после вызова события "hit". 

chart.legend.itemContainers.template.events.on("up", (event) => {
  const id = event.target.dataItem.dataContext.id;
  chart.data.find(i => i.id === id).hidden = !event.target.isActive;
  chart.validateData();
});

Я создал этот код пера в качестве ссылки.

...