如何在同一個圖表中爲兩種不同類型的系列添加兩個不同的鼠標？

此問題涉及到我剛纔的問題：如何在同一個圖表中爲兩種不同類型的系列添加兩個不同的鼠標？

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/但它似乎並沒有以我需要的方式工作。

來源

2015-10-19 logicstar

在你找到的演示中，'series.keys'缺失，像這樣：http://jsfiddle.net/fc0crcu3/7 /雖然我不確定你的問題。爲什麼你不能使用與多邊形相同的點格式？ –

@PawełFus我覺得，在一個折線圖上，他希望每個點的自定義數據，而多邊形的多邊形custon數據不是它的要點 - 我想http：//jsfiddle.net/Nishith/onhfLqdm/35/ –

編輯與小提琴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; 
     } 
    }

或者如果您希望自定義數據在整個折線圖上相同（而不是在線聊天的不同點上），則可以使用與polygone相同的東西（請參見fiddle here）

return this.series.options.someText;

注 - （雖然你的數據不排序，在控制檯看到錯誤15）

以類似的方式，你可以把自定義的數據在你的對象，然後你把那個叫回來，唯一的區別有你的問題的線

[x，y，「mousevertext」]，以便我可以看到有關鼠標懸停點上的點信息系列。這意味着你需要關於懸停點數據。所以它的簡單：雖然JSON響應或格式化響應的創建，加入custome場像

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，但在這種情況下，你可以簡單地獲取數據

來源

2015-10-19 18:42:00

只是爲了得到更清晰圖片...數據應該像[{「x」：「2542」，「y」：「0」，「color」：「red」，「id」：「item.uuid」，「mousevertext」：「sometext 「}，{」x「：」452433「，」y「：」0「，」color「：」red「，」id「：」item。uuid「，」mousevertext「：」sometext「，{」x「：」542354「，」y「：」0「，」color「：」red「，」id「：」item.uuid「，」mousevertext「：「sometext」}]我需要將它推入數據或分配給數據，因爲我的系列是混合的，所以我只需要爲行和pushor分配數據創建單獨的json文件並繪製它？ – logicstar

如何在同一個圖表中爲兩種不同類型的系列添加兩個不同的鼠標？

回答

相關問題