莫里斯图。悬停时有自定义工具提示 [英] Morris graphs. Have custom tooltip when hover

问题描述

我使用morris.js（它依赖于raphael）创建堆叠条形图。对于每个堆叠的条，我想显示在条中的各个级别的分割作为工具提示。我尝试使用 hoverCallback：，但它似乎并没有给我控制我悬停在特定的元素。我只获得该特定栏的内容。

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.

我在这里设置了一个JSBIN示例：

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

推荐答案

蛋糕。 演示和代码：

<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) {
        return(content);
    },
    xkey: 'y',
    ykeys: ['a', 'b'],
    stacked: true,
    labels: ['Series A', 'Series B'] // rename it for the 'onhover' caption change
});
</script>

UPD：

对于飞行标签，您需要将Morris CSS样式表添加到代码中 - 演示

For flying label, you need to add Morris CSS stylesheet to the code - demo

重要注意

飞行标签版本 0.4.3

这篇关于莫里斯图。悬停时有自定义工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！