禁用morris行中单行的标签

Question

我有两条线的莫里斯图表。我想禁用其中一行的标签，但允许另一行的标签。

我在文档中找到了“hideHover”选项，但它似乎是一个无法应用于各行的全局设置：

...
pointFillColors: [ '#039be5', '#C9302C'],
pointStrokeColors: [ '#039be5', '#C9302C'],
hideHover: "always"
...

然后我尝试了这个，认为它可能有效：

...
pointFillColors: [ '#039be5', '#C9302C'],
pointStrokeColors: [ '#039be5', '#C9302C'],
hideHover: ["always",'auto'],
...

从上图中您可以看到我想要删除的标签。

唉，没有成功。

有没有人知道这样做的方法？

Answer 1

您可以使用hoverCallback来实现目标。循环遍历content元素，只获取标题并排除您不想要的行：

hoverCallback: function (index, options, content, row) {
    var finalContent = "";
    var indexHeader = 0;
    var indexLineToIgnore = 1;

    // Get the data
    $(content).each(function (i, e) {
        if (i == indexHeader) {
            finalContent += e.outerHTML;
        } else {
            if (i != indexLineToIgnore) {
                finalContent += e.outerHTML;
            }
        }
    });

    return finalContent;
}

请尝试以下代码段：

var data = [
    { "date": "1/1/2010", "a": "5", "b": null },
    { "date": "5/2/2010", "a": "6", "b": "20" },
    { "date": "6/3/2010", "a": "7", "b": "1" },
    { "date": "7/4/2010", "a": "8", "b": "9" },
    { "date": "8/5/2010", "a": "9", "b": "4" },
    { "date": "9/6/2010", "a": "10", "b": "2" }
];

new Morris.Line({
    element: 'chart',
    data: data,
    xkey: 'date',
    ykeys: ['a', 'b'],
    labels: ['Series A', 'Series B'],
    hideHover: 'auto',
    parseTime: false,
    resize: true,
    pointFillColors: ['#039be5', '#C9302C'],
    pointStrokeColors: ['#039be5', '#C9302C'],
    hoverCallback: function (index, options, content, row) {
        var finalContent = "";
        var indexHeader = 0;
        var indexLineToIgnore = 1;

        // Get the data
        $(content).each(function (i, e) {
            if (i == indexHeader) {
                finalContent += e.outerHTML;
            } else {
                if (i != indexLineToIgnore) {
                    finalContent += e.outerHTML;
                }
            }
        });

        return finalContent;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>

<div id="chart"></div>