Highcharts Flag系列工具提示不遵循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
        });



   });
});

请注意，圆销H和C在底部序列的正确位置。 但是，当我们进行鼠标悬停时，工具提示的位置将紧随其后。

有人遇到过同样的问题吗？

Answer 1

我通过添加一个解决了自己的问题

tooltip: {
   followPointer:true
}

系列。

有关解决方案，请参见http://jsfiddle.net/VGj9q/ 。

Answer 2

工具提示可以通过添加followingPointer：true跟随yAxis，但是通过这种方式，工具提示的形状变为“正方形”，而不是“标注”。

我认为这是一个图表错误，可以在github上找到一些类似的问题。 但似乎他们并没有针对“标志”系列进行修复。

有关此问题，请参考http://jsfiddle.net/4jt9jxs1/2/ 。

 Highcharts.stockChart('container', { chart: { 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: { 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>