如何在amCharts 5股票图表中添加股息图标及Tooltip

1. 准备含股息字段的数据源 #

首先要确保你的股票数据里包含股息信息，给每个数据点添加dividend字段，有股息的日期填入具体金额，无股息则设为0或null：

const stockData = [
  { date: new Date(2024, 0, 2), open: 190, high: 192, low: 188, close: 191, dividend: 0 },
  { date: new Date(2024, 0, 3), open: 191, high: 193, low: 189, close: 192, dividend: 0.23 },
  // 其他交易日数据...
];

2. 渲染股息标记（字母D） #

使用SpriteSeries创建自定义的"D"标记，绑定到有股息的日期上，默认放在对应K线的最低价下方：

const dividendSeries = chart.series.push(
  am5stock.SpriteSeries.new(root, {
    valueXField: "date",
    valueYField: "low",
    sprite: am5.Label.new(root, {
      text: "D",
      fontSize: 10,
      fill: am5.color("#666"),
      centerY: am5.p100,
      paddingBottom: 2
    })
  })
);

// 仅加载有股息的数据点
dividendSeries.data.setAll(stockData.filter(item => item.dividend > 0));

3. 添加股息Tooltip #

给标记绑定hover触发的Tooltip，展示具体股息金额：

dividendSeries.bullets.push(() => {
  return am5.Bullet.new(root, {
    // 透明点击区域，不影响视觉但能触发Tooltip
    sprite: am5.Circle.new(root, {
      radius: 8,
      fill: am5.color("#fff"),
      opacity: 0
    }),
    tooltipText: "股息: ${dividend} USD"
  });
});

4. 优化标记位置（可选） #

如果觉得标记位置不够美观，可通过适配器调整偏移量，让标记在最低价下方再错开一段距离：

dividendSeries.sprites.template.adapters.add("dy", (dy, target) => {
  const dataItem = target.dataItem;
  return dataItem ? -10 : dy; // 向下偏移10像素
});

内容的提问来源于stack exchange，提问作者jalogar