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) {
        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样式表添加到代码 - demo

重要提示

飞行标签自版本 0.4.3

起作用

Answer 2

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

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

2 个答案: