HighCharts:自定义绘图的工具提示

Question

我们有一个应用程序来绘制一些生物信息学图像。HighCharts.js是一个非常好的绘图器。我知道我们可以通过API定义工具提示：

tooltip: {
    useHTML: true,
    formatter: function() { 
        return 'here the html code';
    }
},

但是如何为自定义零件添加工具提示？说在此处添加标签的工具提示

Answer 1

似乎标题字段被用作工具提示（不需要jquery ui）：

renderer.circle(200, 150, 100).attr({
    fill: '#FCFFC5',
    stroke: 'black',
    title:'HellonI am a nmultiline tooltip',
    'stroke-width': 1
}).add();

实际操作：http://jsfiddle.net/Snarkturne/NYZNT/

Answer 2

您不能在自定义对象上使用Highchart的默认工具提示。renderer.text、renderer.label等，因为它们返回SVGObject。

解决方案是创建自己的工具提示。我建议你使用一个预定义的工具提示库，比如twitter boostrap:

// your tooltip created with bootstrap
$(".yourlabel").tooltip({
// ^^^^^^^^^^
    'container': '#container',
    'placement': 'top',
    'title': 'Mytooltip'
});
// with
ren.label('Rasterized image', 100, 215)
    .attr({
         'class': 'yourlabel'
         //        ^^^^^^^^^
    })
    .css({
         color: colors[1],
         fontSize: '10px'
    })
    .add();

您可以看到，由于class属性，我们将工具提示与自定义对象链接起来。如果您选择使用twitter引导工具提示，请不要忘记使用container属性。没有它就无法工作…

下面是一个活生生的例子：http://jsfiddle.net/rttav/

这是twitter boostrap工具提示的文档：http://twitter.github.io/bootstrap/javascript.html#tooltips

Answer 3

没有自定义元素工具提示的内置选项，但是您可以为每个元素添加自己的工具提示。只需使用on()函数，类似于

ren.path(...).attr(...).add().on('mouseOver', function () { alert ('mouseOver!'); }).on('moueOut', function () { alert('mouseOut'); });