Question

我有一个使用串行amchart构建的类别linegraph。当光标悬停在类别上时，我就这样做了所有类别中的所有点的大小加倍：

"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中，当你用光标悬停在它上面时，有没有办法提出一点？

1 个答案: