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

Varun Jain 发表于 Dev

瓦伦·贾恩

我正在使用morris.js（对raphael有依赖性）来创建堆叠的条形图。对于每个堆叠的条，我都希望显示条中各个级别的拆分作为工具提示。我尝试使用，hoverCallback:但似乎无法控制我要悬停的特定元素。我只得到该特定栏的内容。

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

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

鲁宾·卡祖莫夫（Ruben Kazumov）

小菜一碟。演示和代码：

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

UPD：

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

重要的提示

浮动标签自0.4.3版开始适用

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。