Как создать стоковую акцию в amCharts v4? - PullRequest
Новая
       9

Как создать стоковую акцию в amCharts v4?

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

Можно ли указывать события вдоль ряда в amCharts v4, аналогично событию Stock в графике состояния v3?

Mockup of events on a chart

1 Ответ

0 голосов
/ 01 марта 2019

Хотя я был специально включен для v4 и не знаком с v3, я уверен, что вы можете смоделировать некоторые из этих функций, используя Bullet s .

ПуляContainer (в основном родительский заполнитель для любого визуального объекта или дополнительных Container, которые вы хотите), которые будут отображаться в каждой точке данных.Вы можете поставить метку там, а также линию и любую другую форму, например: 

var stockBullet = series.bullets.push(new am4charts.Bullet());
stockBullet.dy = -20;

var circle = stockBullet.createChild(am4core.Circle);
circle.stroke = "#000";
circle.strokeWidth = 1;
circle.radius = 10;
circle.fill = series.fill.brighten(-0.3);
circle.dy = -10;

var line = stockBullet.createChild(am4core.Line);
line.stroke = "#000";
line.strokeWidth = 1;
line.height = 20;
var label = stockBullet.createChild(am4core.Label);
label.fill = am4core.color("#000");
label.strokeWidth = 0;
label.dy = -20;
label.textAlign = "middle";
label.horizontalCenter = "middle"

Поскольку мы не хотим, чтобы пуля появлялась в каждой точке данных, только на Stock Events, мы можемобработайте это, как только маркеры будут готовы на диаграмме, просматривая их данные, отключая их при необходимости, в противном случае предоставляя текст для нашей метки (и, возможно, tooltipText, если необходимо) (предположим, что в данных есть свойство stockEvent): 

stockBullet.events.on("inited", function(event) {
  if (event.target.dataItem && event.target.dataItem.dataContext && event.target.dataItem.dataContext.stockEvent) {
    event.target.children.getIndex(2).text = event.target.dataItem.dataContext.stockEvent.text;
  } else {
    event.target.disabled = true;
  }
});

Получить подсказки разных объектов, чтобы они хорошо играли друг с другом, может быть непросто, в зависимости от вашей диаграммы, например, если для него включен Курсор диаграммы , есть cursorTooltipEnabled свойство , чтобы предотвратить срабатывание всплывающей подсказки над пулями.Чтобы упростить ситуацию в этом случае, я сделал невидимую серию для каждой уникальной акции.Для каждого фондового события используйте адаптеры, чтобы установить для его парной серии 'tooltipText то, что вам нужно, а для базовой видимой серии - от tooltipText до "": 

series.adapter.add("tooltipText", function(text, target) {
  if (target.tooltipDataItem.dataContext.stockEvent) {
     return "";
  }
  return text;
});
// ...
hiddenSeries.adapter.add("tooltipText", function(text, target) {
  if (target.tooltipDataItem.dataContext.stockEvent) {
     return target.tooltipDataItem.dataContext.stockEvent.description;
  }
  return "";
});

Вот демонстрационная версия:

https://codepen.io/team/amcharts/pen/337984f18c6329ce904ef52a0c3eeaaa

Снимок экрана:

screenshot of demo

...