1

我的图表上有 2 个图表。

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

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

3个问题：

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

2）对于相同的reson，（因为标签），那个红点不能响应mouseOver/mouseOut/click事件。

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

我在这个例子中 ilustarte：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”属性，但它似乎不起作用。这是他们图书馆的错误，还是我错过了什么？

总结一下：

我需要该标签位于第一张图（黑线）上方，第二张图（红点）之后，中间红点的中心，并且中间红点可以响应鼠标事件。

谢谢你的帮助。

4

1 回答 1

3

不幸的是，dataLabels 可以是或低于系列，或高于系列。您不能为不同的 dataLabels 设置不同的 zIndex，因此要设置 zIndex，请使用：

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

第二件事是关于 useHTML。当设置为 true 时，HTML 标记用于渲染标签，但 HTML 标记始终位于 SVG/VML 之上，因此 zIndex 不起作用。

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

于 2013-06-12T13:42:54.360 回答