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

Question

我正在使用morris.js(它依赖于raphael)来创建堆积条形图.对于每个堆叠的条形图,我想在条形图中显示各个级别的分割作为工具提示.我尝试使用hoverCallback:它, 但它似乎并没有让我控制我正在盘旋的特定元素.我只获得该特定栏的内容.

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

当您将鼠标悬停在条形图上时,它会显示底部条形图的索引.我想将内容显示为工具提示.JSBIN示例

Answer 1

小菜一碟.演示和代码:

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

UPD:

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

重要的提示

飞行标签自版本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
});