如何让AM Charts 4折线图的三角形数据点沿线段方向旋转？

核心思路 #

由于JSON配置无法直接定义复杂的旋转逻辑，需要在图表初始化完成后，通过代码给三角形数据点添加旋转适配器，计算当前点与前一个点的线段角度，调整三角形朝向。

步骤1：JSON配置保留Bullet定义 #

确保你的JSON配置中正确定义圆形和三角形两个Bullet，并控制显示逻辑：

{
  "series": [
    {
      "type": "LineSeries",
      "dataFields": {
        "valueY": "value",
        "dateX": "date"
      },
      "bullets": [
        // 仅第一个点显示的圆形Bullet
        {
          "type": "CircleBullet",
          "radius": 6,
          "fill": "#000",
          "adapter": {
            "visible": (visible, target) => target.dataItem.index === 0
          }
        },
        // 非第一个点显示的三角形Bullet
        {
          "type": "TriangleBullet",
          "width": 10,
          "height": 10,
          "fill": "#000",
          "adapter": {
            "visible": (visible, target) => target.dataItem.index !== 0
          }
        }
      ]
    }
  ]
}

步骤2：Vue3中添加旋转适配器 #

在图表初始化完成后（监听ready事件），获取三角形Bullet并添加旋转适配器：

// 假设chart是你的AM Charts实例
chart.events.on('ready', () => {
  const lineSeries = chart.series.getIndex(0);
  const triangleBullet = lineSeries.bullets.getIndex(1);

  triangleBullet.adapter.add('rotation', (_, target) => {
    const dataItem = target.dataItem;
    // 第一个点无前置点，跳过旋转
    if (!dataItem?.prevDataItem) return 0;

    const prevPoint = dataItem.prevDataItem.point;
    const currentPoint = dataItem.point;
    // 计算两点间线段的角度
    const dx = currentPoint.x - prevPoint.x;
    const dy = currentPoint.y - prevPoint.y;
    let angle = Math.atan2(dy, dx) * (180 / Math.PI);
    // 调整90度让三角形指向线段延伸方向
    angle += 90;
    return angle;
  });
});

关键说明 #

• adjustRotation和autoRotate不适用于折线图的TriangleBullet：前者是地图系列的专属属性，后者仅针对特定箭头类Bullet，对三角形无效。
• 无需使用valueToPosition：数据项的point属性已经是转换后的图表坐标，直接用它计算线段角度即可。
• 必须在图表ready事件后执行：此时数据已加载，数据项的point属性才会有效。

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