自定义对象上的highcharts工具提示(renderer.circle)

时间:2013-03-20 09:11:40

标签: highcharts

我试图找出如何在自定义对象上放置工具提示。特别是在圆圈(render.circle)。

我找到了一个示例here,但它似乎不是跨浏览器(在IE 9+和Firefox上不起作用)

有什么想法吗?

$(function(){     document.ocumentElement中的var isTouch ='ontouchstart;

var renderer = new Highcharts.Renderer(
    $('#container')[0], 
    400,
    300
);

var tooltipOptions = Highcharts.getOptions().tooltip;

var tooltip = new Highcharts.Tooltip({
        renderer: renderer,
        plotLeft: renderer.box.clientLeft,
        plotTop: renderer.box.clientTop,
        plotWidth: renderer.box.clientWidth,
        plotHeight: renderer.box.clientHeight
    }, $.extend(tooltipOptions, {
        formatter: function() { return this.text; },
        distance: 0,
        style: $.extend(tooltipOptions.style, {
            pointerEvents: 'none'
        })
    })
 );

tooltip.onMouseOver = function () {
    var self = this._SVGElement;
    tooltip.refresh({
        getLabelConfig: function () {
            return {
                text: self.tooltip
            };
        },
        series: {},
        color: self.fill,
        tooltipPos: [
            self.x || self.cx,
            self.y || self.cy
        ]
    });
};

tooltip.onMouseOut = function () {
    tooltip.hide();
};

if (isTouch) {
    $(renderer.box).bind('click', function (e) {
        tooltip.onMouseOut();
    });
}

var circle = renderer.circle(100, 75, 40).attr({
    fill: '#7C75C5',
    stroke: 'black',
    'stroke-width': 1,
    tooltip: 'THIS IS CIRCLE.'
}).add();
circle.element._SVGElement = circle;

$(circle.element).on('mouseenter', tooltip.onMouseOver).on('mouseleave', tooltip.onMouseOut);

var rectangle = renderer.symbol('triangle-down', 50, 150, 100, 80).attr({
    fill: '#1050C5',
    stroke: 'black',
    'stroke-width': 1,
    tooltip: 'THIS IS TRIANGLE.'
}).add();
rectangle.element._SVGElement = rectangle;

$(rectangle.element).on('mouseenter', tooltip.onMouseOver).on('mouseleave', tooltip.onMouseOut);

});

0 个答案:

没有答案