jQuery 莫里斯图。悬停时有自定义工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19800089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Morris graphs. Have custom tooltip when hover
提问by Varun Jain
I am using morris.js (which has a dependency on raphael) for creating stacked bar graphs. For each stacked bar I want to show the split for the various levels in the bar as a tooltip. I tried using the hoverCallback:but it doesn't seem to give me control over the particular element I am hovering over. I only get the content for that particular bar.
我正在使用 morris.js（它依赖于 raphael）来创建堆叠条形图。对于每个堆叠的条，我想将条中各个级别的拆分显示为工具提示。我尝试使用 ， hoverCallback:但它似乎并没有让我控制我悬停的特定元素。我只得到那个特定栏的内容。
I have setup a JSBIN example for the same here:
我在这里设置了一个 JSBIN 示例：
When you hover over the bar it shows the index of the bar at the bottom. I want to show the content as a tool tip instead.JSBIN example
当您将鼠标悬停在栏上时，它会在底部显示栏的索引。我想将内容显示为工具提示。JSBIN 示例
回答by Ruben Kazumov
Piece of cake. Demoand code:
小菜一碟。演示和代码：
<script type="text/javascript">
Morris.Bar({
element: 'bar-example',
data: [
{y: '2006',a: 100,b: 90},
{y: '2007',a: 75,b: 65},
{y: '2008',a: 50,b: 40},
{y: '2009',a: 75,b: 65},
{y: '2010',a: 50,b: 40},
{y: '2011',a: 75,b: 65},
{y: '2012',a: 100,b: 90}
],
hoverCallback: function(index, options, content, row) {
return(content);
},
xkey: 'y',
ykeys: ['a', 'b'],
stacked: true,
labels: ['Series A', 'Series B'] // rename it for the 'onhover' caption change
});
</script>
ARGUMENTS:
参数：
1: index:it represents record number i.e. from 0 to n records.
1：索引：代表记录号，即从0到n条记录。
2: content:this is default hover div.
2：内容：这是默认的悬停div。
3: option :you data is inside this, before return(content);. do console.log(options) to view details.
3：选项：你的数据在这个里面，在 return(content); 之前。执行 console.log(options) 查看详细信息。
4: row :to see the use of row below is an example.
4：row ：看下面row的用法就是一个例子。
hoverCallback: function (index, options, content, row) {
console.log(row);
var hover = "<div class='morris-hover-row-label'>"+row.period+"</div><div class='morris-hover-point' style='color: #A4ADD3'><p color:black>"+row.park1+"</p></div>";
return hover;
},
UPD:
更新：
For flying label, you need to add Morris CSS stylesheet to the code - demo
对于飞行标签，您需要在代码中添加 Morris CSS 样式表 -演示
IMPORTANT NOTE
重要的提示
Flying labels works since version 0.4.3
飞行标签从0.4.3版开始工作
回答by asdasd
http://jsbin.com/finuqazofe/1/edit?html,js,output
http://jsbin.com/finuqazofe/1/edit?html,js,output
{ y: ..., x: ..., label: "my own label"},'
...
Morris.Line({
hoverCallback: function(index, options, content) {
var data = options.data[index];
$(".morris-hover").html('<div>Custom label: ' + data.label + '</div>');
},
...
other params
});
