Question

这个问题涉及我之前的问题：

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}} 
]

上面的代码适用于多边形上的mousever，但是如何为行系列[x，y，“mousevertext”]提供类似的文本，这样我就可以看到有关鼠标悬停点的信息。

我发现了类似的例子，但它是单维线。

http://jsfiddle.net/fc0crcu3/4/但似乎没有按照我需要的方式工作。

Answer 1

使用小提琴编辑 Working fiddle with your dataset

如果您想要对该多边形的多边形custon数据中的折线图和的每个点的自定义数据而不是其点，请使用此：

 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，＆＃34; mousevertext＆＃34;]以便我可以看到有关鼠标悬停在线上点的信息。这意味着您需要悬停的数据点。所以它很简单：在创建json响应或格式化响应时，添加像

这样的custome字段

data.push({x:item,y:yValue, color:"whatevercolor", id:item.uuid, mousevertext: 'yourMouseOverText'});

并在tooltip formatter函数中将其恢复为

this.point.mousevertext//assuming that custom is your data to be shown.

在上一个问题中，您询问了整个多边形的悬停效果，这就是我们使用的原因 options.someText但是在行的情况下你可以简单地获取数据

如何在同一图表中为两种不同类型的系列添加两个不同的鼠标？

1 个答案: