Маркировка под пузырьком на пузырьковой диаграмме в amcharts4

Я пытался придумать, как пометить пузырь под ним на amcharts 4 в пузырьковой диаграмме следующим образом:

пример пузырьковой диаграммы

Но я не нахожу в этом ничего официального.

Если вы нажимаете LabelBullet на серию, метки центрируются на точке данных, затем вы можете использовать dx / dy для корректировки их положения, но проблема заключается в пузырьковой диаграмме, размер пузырьков изменяется относительно точки данных.

Это то, что я придумал до сих пор, но я надеялся, что у кого-то может быть что-то более официальное:

            const bulletLabel = series.bullets.push(new am4charts.LabelBullet());
            bulletLabel.label.text = options.bubbleLabelText;
            bulletLabel.label.paddingTop = 20;
            bulletLabel.label.fontSize = 12;
            series.heatRules.push(
                {
                    target: bulletLabel,
                    min: options.minRadius || 5,
                    max: options.maxRadius || 60,
                    property: 'dy'
                }
            );

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


javascript amcharts4 amcharts
person ShaneTheKing    schedule 19.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы захотите использовать адаптер для LabelBullet's dy. Когда это произойдет, проверьте dataItem.bullets пули, чтобы получить ссылку на ее CircleBullet (используется для пузырей), проверьте его радиус, а затем используйте его для своего dy. Вы также можете указать логику, если хотите, чтобы она находилась выше или ниже CircleBullet, например если значение меньше 10, идти выше, иначе идти ниже.

// Sample data
{
  "date": "2015-01-08",
  "ay": 8,
  "by": 12.3,
  "aValue": 5,
  "bValue": 13,
  bubbleLabelText: "test"
}

const bulletLabel = series.bullets.push(new am4charts.LabelBullet());
bulletLabel.label.text = "{bubbleLabelText}";
bulletLabel.label.fontSize = 12;
bulletLabel.adapter.add('dy', (dy, bullet) => {
  let radiusDy = dy;
  bullet.dataItem.bullets.iterator()(firstBullet => {
    const circleBullet = firstBullet[1];
    if (bullet.dataItem.dataContext.bubbleLabelText) {
      radiusDy = circleBullet.circle.radius;
      if(bullet.dataItem.values.valueY.value >= 10) {
        radiusDy += 12;
      } else {
        radiusDy = -1 * radiusDy - 12;
      }
    }
  })
  return radiusDy;
});

Вот ответвление нашего Пузырьковая диаграмма XY с демонстрацией оси на основе даты с приведенным выше кодом:

https://codepen.io/team/amcharts/pen/a86361c54a4c369e8c49bdd931f8d0f5

Вы можете попробовать сделать что-то подобное с Label внутри CircleBullet (как его дочерний элемент), повозиться с его valign и / или CircleBullet contentValign, но вам все равно придется динамически настраивать их dy, чтобы они были немного выше / ниже круга.

Надеюсь это поможет.

person notacouch    schedule 30.08.2019
comment
Отлично, спасибо за ответ! Никогда бы не подумал об этом решении, думаю, надо больше привыкать к идее адаптеров. - person ShaneTheKing; 30.08.2019
comment
@ShaneTheKing Добро пожаловать! Ага, адаптеры, ListTemplates, много новых мощных нововведений в v4. Часто бывает несколько способов делать что-то. Например, правила нагрева - это, по сути, удобный инструмент для адаптеров! - person notacouch; 31.08.2019