在 amcharts 中，当您将鼠标悬停在某个点上时，是否有办法将其向前移动？

Question

我有一个使用系列 amchart 构建的类别线图。当光标悬停在类别上时，我将类别中的所有点都放大一倍，如下所示：

"chartCursor": {
                            "categoryBalloonEnabled": false,
                            "cursorAlpha": 1,
                            "zoomable": true,
                            "graphBulletSize": 3,
                            "animationDuration": .1,
                            "fullWidth": true,
                            "valueLineAlpha" : .1,
                            "oneBalloonOnly": true
            },

唯一的问题是，如果增大尺寸使项目符号与序列中更靠下的点重叠，则后者会保留在图表的最前面，在放大图像的顶部。这不好，因为我使用的是实际包含必要信息的自定义项目符号。我的问题是：有没有什么办法可以让光标修改的点暂时移到图表的前面，让图像无障碍地看？

我知道我可以将图像放入气球中，但我不想那样做。

Answer 1

由于项目符号是 SVG 树的一部分，并且从技术上讲，在 SVG 中无法设置元素的 "z-index"（每个后续节点都绘制在前一个节点之上），唯一解决方法是在悬停时操纵图表上项目符号的实际顺序。

为此，我们可以使用图表光标的 changed 事件：

"listeners": [ {
  "event": "changed",
  "method": function( e ) {
    if ( e.index === undefined )
      return;
    for ( var i = 0; i < e.chart.graphs.length; i++ ) {
      // get graph
      var graph = e.chart.graphs[ i ];
      var holder = graph.bulletSet.node;

      // find the bullet and move it
      for ( var x = 0; x < graph.allBullets.length; x++ ) {
        var bullet = graph.allBullets[ x ];
        if ( bullet.graphDataItem.index === e.index ) {
          holder.appendChild( bullet.node );
          break;
        }
      }
    }
  }
} ]

上面的代码会将当前悬停的类别的项目符号移动到它们各自容器的末尾，因此它们被绘制在任何其他项目符号之上。

这里是 working example。

在 amcharts 中，当您将鼠标悬停在某个点上时，是否有办法将其向前移动？

In amcharts, is there a way to bring a point forward when you hover over it with your cursor?

amcharts