如何在amCharts v4中创建股票事件？

Question

是否可以在amCharts v4中指示一系列事件，类似于v3股票图表中的“股票事件”？

Answer 1

虽然我是专门针对v4的，但对v3并不熟悉，但我相信您可以使用Bullets模拟其中的某些功能。

项目符号是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;
  }
});

根据图表的不同，获取不同对象的工具提示以使其相互配合可能会很棘手。如果已启用Chart Cursor，则有cursorTooltipEnabled property可以防止在项目符号上触发工具提示。为了简化这种情况，我要做的是根据唯一的股票事件项目符号创建一个不可见的系列。对于每个股票事件，使用适配器将其配对的系列“ 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

屏幕截图：