莫里斯图.悬停时有自定义工具提示 [英] Morris graphs. Have custom tooltip when hover
问题描述
我正在使用 morris.js(它依赖于 raphael)来创建堆叠条形图.对于每个堆叠的条,我想将条中各个级别的拆分显示为工具提示.我尝试使用 hoverCallback:
但它似乎并没有让我控制我悬停的特定元素.我只得到那个特定栏的内容.
我在这里设置了一个 JSBIN 示例:
当您将鼠标悬停在栏上时,它会在底部显示栏的索引.我想将内容显示为工具提示.JSBIN 示例
小菜一碟.演示和代码:
参数:
1:索引:它代表记录号,即从0到n条记录.
2: content: 这是默认的悬停 div.
3: option : 你的数据在这个里面,在 return(content); 之前.执行 console.log(options) 查看详情.
4: row : 下面以row的使用为例.
hoverCallback:函数(索引、选项、内容、行){控制台日志(行);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>";返回悬停;},
UPD:
对于飞行标签,您需要在代码中添加 Morris CSS 样式表 - demo>
重要提示
飞行标签从 0.4.3
版本开始工作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.
I have setup a JSBIN example for the same here:
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
Piece of cake. Demo and 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.
2: content: this is default hover div.
3: option : you data is inside this, before return(content);. do console.log(options) to view details.
4: row : to see the use of row below is an example.
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
IMPORTANT NOTE
Flying labels works since version 0.4.3
这篇关于莫里斯图.悬停时有自定义工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!