チャートに 2 つのグラフがあります。
2 番目のグラフの特定のドットに関連する 1 つのラベル。そのラベルは、そのドットの中心に配置する必要があります(上/下/横ではありません)。
赤い点 (2 番目のグラフ) にマウスを合わせると、関数がトリガーされます。
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
また、ハイチャートのドキュメントから：
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」プロパティで遊んでみましたが、うまくいかないようです。これは彼らのライブラリのバグですか、それとも何か不足していますか?
要約する：
ラベルを最初のグラフ (黒い線) の上、 2 番目のグラフ (赤い点) の後ろ、中央の赤い点の中央に配置し、中央の赤い点がマウス イベントに応答できるようにする必要があります。
ご協力いただきありがとうございます。