这个问题引用了我之前的问题:
Hover on areas not on point in Highchart-polygon
我有一个代码，其中使用多系列数据。 1. 多边形类型 2. 线类型(x,y)。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" href="style.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type='text/javascript'>
$(function() {
var chart;
var options = {
chart : {
type : 'polygon',
renderTo : 'container',
zoomType:''
},
title : {
text : ''
},
credits: {
enabled: false
},
yAxis : {
title : false,
gridLineWidth : 0,
lineWidth : 0,
labels : {
enabled : false
}
},
xAxis : [{
title : true,
gridLineWidth : 0,
lineWidth : 1,
labels : {
enabled : true
},
plotLines: [{
color: '#FF0000',
width: 2,
value:61570783
}]
},
],
plotOptions : {
series : {
lineWidth : '.2px',
lineColor : 'black',
dashStyle: 'solid'
}
},
series : [ {} ],
tooltip: {
formatter :function (){
return this.series.options.someText;
}
}
};
$("#container").html("<div style='style:margin:0 auto'><center><font size='5'>Loading Data....</font></center></div>") ;
$.getJSON('data.json', function(data) {
options.series=data;
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; max-width: 800px; height: 800px; margin: 0 auto"></div>
<br>
</body>
</html>
data.json
[{"showInLegend": false,"someText": "AAA", "color": "#FAFAFA", "data": [[61565285, 182], [61565385, 382], [61564937.5, 1277], [61564837.5, 1077]] }
,{"showInLegend": false,"someText": "BBB", "color": "#FAFAFA", "data": [[61565385, 382], [61565403.5, 419], [61564956, 1314], [61564937.5, 1277]] }
,{"name": "Position","enableMouseTracking": false,"lineColor": " #008000 ", "data": [[ 61564299 ,0 ],[ 61565194 ,0 ],[ 61565376 ,0 ],[ 61565576 ,0 ],[ 61565613 ,0 ],[ 61565882 ,0 ],[ 61565908 ,0 ],[ 61567753 ,0 ],[ 61568095 ,0 ],[ 61568460 ,0 ],[ 61569306 ,0 ],[ 61569830 ,0 ],[ 61570073 ,0 ],[ 61570783 ,0 ],[ 61570936 ,0 ],[ 61571348 ,0 ],[ 61571382 ,0 ],[ 61571478 ,0 ],[ 61572273 ,0 ],[ 61572522 ,0 ],[ 61573540 ,0 ],[ 61573684 ,0 ],[ 61573791 ,0 ],[ 61573936 ,0 ],[ 61574104 ,0 ],[ 61574602 ,0 ]],"marker": {"enabled" : true,"fillColor" : "green","radius" : 3}}
]
上面的代码对于多边形上的鼠标悬停效果很好，但是我如何才能为线系列 [x,y,"mouseevertext"] 提供类似的文本，以便我可以看到有关鼠标悬停在线系列中的点上的点的信息。
我找到了类似的例子，但它是单维线。
http://jsfiddle.net/fc0crcu3/4/但它似乎没有按照我需要的方式工作。
最佳答案
用 fiddle 编辑 Working fiddle with your dataset
如果您想要折线图的每个点的自定义数据和该多边形的多边形自定义数据而不是其点，请使用此:
tooltip: {
formatter :function (){
if(this.series.options.someText)
return this.series.options.someText;
if(this.point.mousevertext)
return this.point.mousevertext;
}
}
或者，如果您希望整个折线图的自定义数据相同(而不是在线聊天的不同点上)，您可以使用与多边形相同的东西(请参阅 fiddle here )
return this.series.options.someText;
注意 - (虽然您的数据未排序，但在控制台中看到错误 15)
以类似的方式，您可以将自定义数据放入对象中，然后回调它，唯一的区别是您的问题行
[x,y,"mouseevertext"] 这样我就可以看到有关鼠标悬停在线条系列中的点上的点的信息。 这意味着您需要有关点悬停的数据。所以它很简单:在创建 json 响应或格式化响应时，添加客户字段，如
data.push({x:item,y:yValue, color:"whatevercolor", id:item.uuid, mousevertext: 'yourMouseOverText'});
并在工具提示格式化程序函数中将其返回为
this.point.mousevertext//assuming that custom is your data to be shown.
在上一个问题中，您询问了整个多边形的悬停效果，这就是我们使用的原因 options.someText 但在这里，如果是行，您可以简单地获取数据
关于javascript - 如何为同一图表中两种不同类型的系列添加两个不同的鼠标悬停？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33219415/