第二个系列背后的Highcharts标签（但在第一个系列之上）

Question

我的图表上有两张图表。

与第二个图表中的特定点相关的一个标签，该标签需要放置在该点的中心（不上/下/旁）

当我们将鼠标悬停在红点上时（在第二张图中），会触发一个函数。

3个问题：

1）此标签涵盖红色中间点。 我需要它在红点后面。

2）对于相同的共鸣（由于标签），红点无法响应到mouseOver / mouseOut / click事件。

3）我还希望标签高于第一张图（黑线）。

我在此示例中说明了这一点： http://jsfiddle.net/yoav_barnea/YHwMf/

$(function () {
var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container',     
    height: 300
},
    tooltip:{
        enabled:false
    },

  //--------the series section:---------- 

 series: [
   //--- series 1:-----
 {
    data: [{x:4, y:15}, {x:12, y:7}, {x:25, y:27}],
    type:"spline",
    color:"black",
    zIndex:1
 },
   //--- series 2:-----
 {
   data: [  {x:3, y:3},

            {
               x:8,
               y:10,

               dataLabels:
                {  
                  enabled:true,
                  useHTML:true,
                  zIndex:4,
                  backgroundColor:"gray",
                  align:"center",
                  verticalAlign:"middle",
                  x:-20,
                  y:5,
                  color:"white",

                    formatter:function(){return "<b> vlaue:"+ this.y+"  <b/><br/>  my choice";}
               }
            }, // end of custom point




          {x:20, y:20}
         ]  ,   // end of points related to series 2   
       //--------------
     zIndex:10,
     type:"scatter",
     color:"red",
     point:{              
        events:{           
                 mouseOver: function (e) {
                    $("#message").text("you enter a red dot!").css("color","red");
                 } ,
             mouseOut: function (e) {
                    $("#message").text("please hover on the red dots").css("color","black");
                 }

        }            
      }   

 } // end of  series  2  


]   

}); // end of highcharts definitions

});// end of ready function

另外，来自highcharts文档：

The Z index of the data labels. The default Z index puts it above the series. Use a Z index of 2 to display it behind the series. Defaults to 6.

我尝试使用'zIndex'属性，但它似乎不起作用。这是他们图书馆的错误，还是我错过了什么？

总结：

我需要在中心中间的红点，以及中间红点可以响应鼠标事件。

感谢您的帮助。

Answer 1

不幸的是，dataLabel可以是系列的，也可以是以上的。您不能为不同的dataLabels设置不同的zIndex，因此要设置zIndex使用：

    plotOptions: {
        series: {
            dataLabels: {
                zIndex: 1
            }
        }
    }

第二件事是关于useHTML。设置为true时，HTML标记用于呈现标签，但HTML标记始终高于SVG / VML，因此zIndex将不起作用。

示例：http://jsfiddle.net/YHwMf/17/