highcharts - 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:'Hello\nI am a \nmultiline tooltip',
    'stroke-width': 1
}).add();

在行动：http: //jsfiddle.net/Snarkturne/NYZNT/

Answer 2

There is no built-in option for custom elements tooltip, however you can add your own tooltip to each element. Just use on() function, something like that:

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

Answer 3

您不能在自定义对象上使用 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