工具提示覆盖高图中的栏

时间:2013-05-23 06:19:01

标签: highcharts

如何避免Highcharts中的工具提示涵盖整个栏? 我正在尝试创建具有向下钻取功能的条形图,但下面示例中的“John”栏我总是被工具提示本身所覆盖,这使得向下钻取非常困难。

http://jsfiddle.net/3XZwV/

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Column chart with negative values'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                series: {
                    cursor: 'pointer'
                }
            },
            series: [{
                name: 'John',
                data: [-1, -1, -1, -1, 2]
            }, {
                name: 'Jane',
                data: [2, -2, -3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, -2, 5]
            }]
        });
    });

1 个答案:

答案 0 :(得分:5)

如果您有兴趣,可以通过几种方式完成。

修正工具提示的位置

使用tooltip positioner修复工具提示的位置。

        tooltip: {
        positioner: function () {
            return { x: 80, y: 50 };
        }

一个工作示例是here

使用followPointer

使用跟随指针选项。您可以避免遇到的问题并允许工具提示仍处于浮动状态。

tooltip:{
            followPointer:true
        },

另一个工作示例是here