jquery - 莫里斯图。悬停时有自定义工具提示

Question

我正在使用 morris.js (它依赖于 raphael)来创建堆叠条形图。对于每个堆叠的条形图，我想将条形图中各个级别的分割显示为工具提示。我尝试使用 hoverCallback: 但它似乎无法让我控制我悬停的特定元素。我只获取该特定酒吧的内容。

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

当您将鼠标悬停在栏上时，它会在底部显示栏的索引。我想将内容显示为工具提示。 JSBIN example

Answer 1

小菜一碟。 Demo和代码:

<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>

参数:

1:索引:表示记录数，即从0到n条记录。

2:内容:这是默认的悬停 div。

3:选项:您的数据位于其中，在 return(content); 之前。执行 console.log(options) 查看详细信息。

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;
                    },

更新:

对于飞行标签，您需要在代码中添加 Morris CSS 样式表 - demo

重要说明

飞行标签自0.4.3版本起开始工作