Javascript 莫里斯图形始终显示标签

当用户将鼠标悬停在数据点上时，Morris图表显示标签

我希望始终显示这些悬停。我尝试过使用hideHover:false选项，但这似乎不起作用（）

我还想使用hoverCallback函数，这样我就可以使用HTML，并且只显示可用的数据（或者从外部数组引入数据）

---

我附上了一份我努力实现的基本陈述

这里是我的快速自定义，用于始终显示标签，但仅在将鼠标悬停在所有点上后才能工作。希望这有帮助

步骤1：像这样编辑源文件morris.js（这里我使用v0.5.0版）：

Line.prototype.hoverContentForRow=函数（索引）{
var内容，j，行，y，_i，_len，_ref；
行=此。数据[索引]；
content=“”+row.label+”；
_ref=第y行；
对于（j=_i=0，_len=_ref.length；_i<_len；j=++_i）{
y=_ref[j]；
content+=“\n”+this.options.labels[j]+”：\n”+（this.yLabelFormat（y））+“\n”；
}
if（typeof this.options.hoverCallback==='function'）{
//在此处编辑下面的行。添加新参数“row.\u x，row.\u ymax”
content=this.options.hoverCallback（index，this.options，content，row.src，row.\ux，row.\uymax）；
}
返回[content，row.\u x，row.\u ymax]；
};

步骤2：在定义图中：编辑事件“hoverCallback”，如下所示：

function ShowDSTheoNgay(data) {
    var line = new Morris.Line({
        element: 'LINECHART_DSTheoNgay',
        resize: true,
        data: data,
        xkey: 'ngay',
        ykeys: ['dsOnline', 'dsOffline'],
        labels: ['Online', 'Offline'],
        lineColors: ['#61af20', "#a86400"],
        hideHover: false,
        hoverCallback: function (index, options, content, row, x , y) {
            var default_html = "<div class='morris-hover morris-default-style'> </div>";
            var default_html = $(default_html).append(content);
            moveTo($(default_html), $('#LINECHART_DSTheoNgay'), x, y);
            return '';
        }
    });
}

函数显示通道（数据）{
var线=新莫里斯线({
元素：“线条图”，
调整大小：对，
数据：数据，
xkey:‘ngay’，
ykeys:['dsOnline'，'dsOffline']，
标签：[“在线”、“离线”]，
线条颜色：['#61af20'，“#a86400”]，
隐藏者：错，
hoverCallback：函数（索引、选项、内容、行、x、y）{
var default_html=“”；
var default_html=$（default_html）.append（content）；
移动到（$（默认值为html），$（'LINECHART'udtheongay'），x，y）；
返回“”；
}
});
}

步骤3：添加自定义“移动到”功能：

function moveTo(el, options, x, y) {
    options.append(el);
    var hoverHeight, hoverWidth, left, parentHeight, parentWidth, top;
    parentWidth = options.innerWidth();
    parentHeight = options.innerHeight();
    hoverWidth = el.outerWidth();
    hoverHeight = el.outerHeight();

    left = Math.min(Math.max(0, x - hoverWidth / 2), parentWidth - hoverWidth);
    if (y != null) {
        top = y - hoverHeight - 10;
        if (top < 0) {
            top = y + 10;
            if (top + hoverHeight > parentHeight) {
                top = parentHeight / 2 - hoverHeight / 2;
            }
        }
    } else {
        top = parentHeight / 2 - hoverHeight / 2;
    }

    el.css({
        left: left + "px",
        top: parseInt(top) + "px"
    });

    return;
}

函数移动到（el，选项，x，y）{
选项。附加（el）；
变量hoverHeight、hoverWidth、left、parentHeight、parentWidth、top；
parentWidth=options.innerWidth（）；
parentHeight=options.innerHeight（）；
hoverWidth=el.outerWidth（）；
悬停高度=标高外高度（）；
left=Math.min（Math.max（0，x-hoverWidth/2），parentWidth-hoverWidth）；
如果（y！=null）{
顶部=y-悬停高度-10；
如果（顶部<0）{
top=y+10；
如果（顶部+悬停高度>父级高度）{
顶部=父高度/2-悬停高度/2；
}
}
}否则{
顶部=父高度/2-悬停高度/2；
}
el.css({
左：左+像素，
顶部：parseInt（顶部）+“px”
});
返回；
}

---

注意：此代码是我的快速自定义代码。我现在不太关注性能。

我又看了一遍，我认为隐藏选项是一种误导，因为它依赖于onmouseover事件。我真正想要的是当图形第一次加载时，显示所有标签的东西，不管鼠标是否移动。我查看了morris.js文件，默认情况下hideHover为false。所以，将hideHover设置为false不会改变任何事情：（嗨，我知道这是一篇老帖子，但我想知道你是否找到了解决这个问题的方法。不，对不起。从来没有。对不起，没有用！

function ShowDSTheoNgay(data) {
    var line = new Morris.Line({
        element: 'LINECHART_DSTheoNgay',
        resize: true,
        data: data,
        xkey: 'ngay',
        ykeys: ['dsOnline', 'dsOffline'],
        labels: ['Online', 'Offline'],
        lineColors: ['#61af20', "#a86400"],
        hideHover: false,
        hoverCallback: function (index, options, content, row, x , y) {
            var default_html = "<div class='morris-hover morris-default-style'> </div>";
            var default_html = $(default_html).append(content);
            moveTo($(default_html), $('#LINECHART_DSTheoNgay'), x, y);
            return '';
        }
    });
}

function moveTo(el, options, x, y) {
    options.append(el);
    var hoverHeight, hoverWidth, left, parentHeight, parentWidth, top;
    parentWidth = options.innerWidth();
    parentHeight = options.innerHeight();
    hoverWidth = el.outerWidth();
    hoverHeight = el.outerHeight();

    left = Math.min(Math.max(0, x - hoverWidth / 2), parentWidth - hoverWidth);
    if (y != null) {
        top = y - hoverHeight - 10;
        if (top < 0) {
            top = y + 10;
            if (top + hoverHeight > parentHeight) {
                top = parentHeight / 2 - hoverHeight / 2;
            }
        }
    } else {
        top = parentHeight / 2 - hoverHeight / 2;
    }

    el.css({
        left: left + "px",
        top: parseInt(top) + "px"
    });

    return;
}