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

工具提示可以通过添加followPointer：true来跟随yAxis，但是这样，工具提示形状变为“方形”，而不是“标注”。

我认为这是一个highcharts的错误，在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>

Highcharts Flag系列工具提示不遵循yAxis

2 个答案: