Highcharts Флаг серия подсказка не следует YAxis

Question

Я имею в виду http://jsfiddle.net/VJsjg/2/

$(function() { 
$('#container').highcharts('StockChart', { 
    chart: { 
      zoomType: 'x', 
      marginTop: 100, //avoid overlapping with navigator 
      spacingLeft: 0 
     }, 
    scrollbar: { 
     enabled: false 
    }, 

    navigator: { 
     enabled: true, 
     top: 40 
    }, 

    rangeSelector: { 
     selected: 1 
    }, 
    yAxis:[{ 
     top:140, 
     height:150 
    }], 
    series: [{ 
     id:'msft', 
     name: 'MSFT',    
     data: MSFT 
    }] 
}); 

$('#button').click(function() { 
    var chart = $('#container').highcharts(); 

    chart.addAxis({ 
     id:'secondY',    
     top:300, 
     height:150 
    }); 

    chart.addSeries({ 
     id:'adbe', 
     yAxis:'secondY', 
     name: 'ADBE', 
     data: ADBE 
    }); 
    $(this).attr('disabled', true); 

    chart.addSeries(
    // the event marker flags 
     { 
      type : 'flags', 
      data : [{ 
       x : Date.UTC(2011, 3, 25), 
       title : 'H', 
       text : 'Euro Contained by Channel Resistance' 
      }, { 
       x : Date.UTC(2011, 3, 28), 
       title : 'G', 
       text : 'EURUSD: Bulls Clear Path to 1.50 Figure' 
      }], 
      onSeries : 'adbe', 
      shape : 'circlepin', 
      width : 16 
     }); 



    }); 
}); 

Обратите внимание, что circlepin H и C находятся в правильном положении нижней серии. Однако, когда мы делаем курсор мыши, позиция всплывающей подсказки следовала за верхней серией.

С кем-либо сталкивалась такая же проблема раньше?

Answer 1

Я установил свою собственную проблему, добавив

tooltip: { 
    followPointer:true 
} 

к серии.

См. Решение http://jsfiddle.net/VGj9q/.

Answer 2

Подсказка может следовать за yAxis, добавив следующееPointer: true, но таким образом форма всплывающей подсказки стала «квадратной», а не «выносной».

Я думаю, что это ошибка в высоких диаграммах, некоторые подобные проблемы можно найти на github. Но, похоже, они не исправили это для серии «флаг».

См. http://jsfiddle.net/4jt9jxs1/2/ по этому вопросу.

Highcharts.stockChart('container', { 
 
    chart: { 
 
    \t height: 600, 
 
    }, 
 

 
navigator: { 
 
     enabled: false 
 
    }, 
 
    yAxis: [{ 
 
    id: "1", 
 
    height: 200, 
 
    },{ 
 
    id: "2", 
 
    top: 300, 
 
    height: 200, 
 
    }], 
 
    tooltip:{ 
 
     shared: false 
 
    }, 
 
    series: [{ 
 
     name: 'USD to EUR', 
 
     id: 'dataseries', 
 
     data: usdeur, 
 
     yAxis: "1" 
 
    },{ 
 
     name: 'USD to EUR1', 
 
     id: 's1', 
 
     data: usdeur, 
 
     yAxis:"2" 
 
    }, { 
 
     type: 'flags', 
 
     data: [{ 
 
      x: Date.UTC(2011, 1, 14), 
 
      title: 'A', 
 
      text: 'Shape: "squarepin"' 
 
     }, { 
 
      x: Date.UTC(2011, 3, 28), 
 
      title: 'A', 
 
      text: 'Shape: "squarepin"' 
 
     }], 
 
     onSeries: 'dataseries', 
 
     shape: 'squarepin', 
 
     width: 16 
 
    }, { 
 
     type: 'flags', 
 
     data: [{ 
 
      x: Date.UTC(2010, 2, 1), 
 
      text: 'Shape: "circlepin"' 
 
     }, { 
 
      x: Date.UTC(2010, 9, 1), 
 
      text: 'Shape: "circlepin"' 
 
     }], 
 
     shape: 'circlepin', 
 
     onSeries: 's1', 
 
     yAxis:"2", 
 
     title: 'B', 
 
     tooltip: { 
 
     \t followPointer: true, 
 
     }, 
 
     width: 16 
 
    }, { 
 
     type: 'flags', 
 
     data: [{ 
 
      x: Date.UTC(2012, 2, 10), 
 
      title: 'C', 
 
      text: 'Shape: "flag"' 
 
     }, { 
 
      x: Date.UTC(2013, 3, 11), 
 
      title: 'C', 
 
      text: 'Shape: "flag"' 
 
     }], 
 
     yAxis:"2", 
 
     color: '#5F86B3', 
 
     fillColor: '#5F86B3', 
 
     onSeries: 's1', 
 
     width: 16, 
 
     style: { // text style 
 
      color: 'white' 
 
     }, 
 
     states: { 
 
      hover: { 
 
       fillColor: '#395C84' // darker 
 
      } 
 
     } 
 
    }] 
 
});

<div id="container" style="height: 400px; min-width: 600px"></div> 
 

 
<script src="https://code.highcharts.com/stock/highstock.js"></script> 
 
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
 
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>