Warning: file_get_contents(/data/phpspider/zhask/data//catemap/6/eclipse/9.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Highcharts标志工具提示与该标志重叠。_Highcharts_Highstock - Fatal编程技术网

Highcharts标志工具提示与该标志重叠。

Highcharts标志工具提示与该标志重叠。,highcharts,highstock,Highcharts,Highstock,当标志标题和标志文本都超过一定长度时,工具提示开始与标志本身重叠。因此,鼠标很容易在工具提示上移动。因此,鼠标无法与图表交互,因为它位于工具提示上方,而不是直接位于图表上方。只有当图表移出工具提示区域时,鼠标才会再次开始与图表交互 当有很多标志时,与图表交互变得非常困难 尝试将鼠标悬停在标题较长的旗帜上: 代码如下: $(function() { $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usde

当标志标题和标志文本都超过一定长度时,工具提示开始与标志本身重叠。因此,鼠标很容易在工具提示上移动。因此,鼠标无法与图表交互,因为它位于工具提示上方,而不是直接位于图表上方。只有当图表移出工具提示区域时,鼠标才会再次开始与图表交互

当有很多标志时,与图表交互变得非常困难

尝试将鼠标悬停在标题较长的旗帜上:

代码如下:

$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {

    // Create the chart
    $('#container').highcharts('StockChart', {


        rangeSelector : {
            selected : 1
        },

        title : {
            text : 'USD to EUR exchange rate'
        },

        yAxis : {
            title : {
                text : 'Exchange rate'
            }
        },

        series : [{
            name : 'USD to EUR',
            data : data,
            id : 'dataseries',
            tooltip : {
                valueDecimals: 4
            }
        }, {
            type : 'flags',
            data : [{
                x : Date.UTC(2011, 1, 14),
                title : 'A',
                text : 'Shape: "squarepin"'
            }, {
                x : Date.UTC(2011, 3, 28),
                title : 'Long tooltip title',

                text : 'This is a really really really long tooltip text.'
            }],
            onSeries : 'dataseries',
            shape : 'squarepin',
        }, {
            type : 'flags',
            data : [{
                x : Date.UTC(2011, 2, 1),
                title : 'B',
                text : 'Shape: "circlepin"'
            }, {
                x : Date.UTC(2011, 3, 1),
                title : 'B',
                text : 'Shape: "circlepin"'
            }],
            shape : 'circlepin',
            width : 16
        }, {
            type : 'flags',
            data : [{
                x : Date.UTC(2011, 2, 10),
                title : 'C',
                text : 'Shape: "flag"'
            }, {
                x : Date.UTC(2011, 3, 11),
                title : 'C',
                text : 'Shape: "flag"'
            }],
            color : '#5F86B3',
            fillColor : '#5F86B3',
            onSeries : 'dataseries',
            width : 16,
            style : {// text style
                color : 'white'
            },
            states : {
                hover : {
                    fillColor : '#395C84' // darker
                }
            }
        }]
    });
});
}))


有什么优雅的解决办法吗?

事实上,我自己也找到了一个解决办法。通过使工具提示跟随鼠标,鼠标将永远不会越过工具提示。这不是一个完美的解决方案,而是一个好办法。 使用选项:

tooltip: {
       followPointer : true
}
演示:
您也可以使用工具提示定位器