HighCharts：定制绘图的工具提示

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

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

但是如何为定制零件添加工具提示？假设为标签添加工具提示here

来源

2013-07-07 Joy

您无法在自定义对象上使用Highchart的默认工具提示。 renderer.text,renderer.label等，因为他们返回SVGObject。

解决方案是创建您自己的工具提示。我会建议你使用预定义的工具提示库像Twitter自举：

// 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的自举提示文档：http://twitter.github.io/bootstrap/javascript.html#tooltips

来源

2013-07-08 10:32:52

有自定义元素提示没有内置的选项，但是您可以将自己的工具提示添加到每个元素。只要使用on()功能，这样的事情：

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

来源

2013-07-08 12:13:52

看来，标题字段用作工具提示（不需要jQuery的用户界面）：

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/

来源

2013-07-18 17:16:45

HighCharts：定制绘图的工具提示

回答

相关问题