Question

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

我希望这些悬停始终显示出来。我尝试过使用hideHover：false选项，但这似乎不起作用（http://jsfiddle.net/N7NpT/）。

var day_data = [
    {"elapsed": "I", "value": 34},
    {"elapsed": "II", "value": 24},
    {"elapsed": "III", "value": 3},
    {"elapsed": "IV", "value": 12},
    {"elapsed": "V", "value": 13},
    {"elapsed": "VI", "value": 22},
    {"elapsed": "VII", "value": 5},
    {"elapsed": "VIII", "value": 26},
    {"elapsed": "IX", "value": 12},
    {"elapsed": "X", "value": 19}
];
Morris.Line({
    element: 'graph-line',
    data: day_data,
    xkey: 'elapsed',
    ykeys: ['value'],
    labels: ['value'],
    lineColors:['#000'],
    parseTime: false,
    hideHover: false,
});

我还想使用hoverCallback函数，这样我就可以使用HTML，只显示数据（如果可用）（或从外部数组中引入数据）。

我附上了我想要实现的基本代表。 awesome gimp skills image

Answer 1

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

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

Line.prototype.hoverContentForRow = function(index) {
  var content, j, row, y, _i, _len, _ref;
  row = this.data[index];
  content = "<div class='morris-hover-row-label'>" + row.label + "</div>";
  _ref = row.y;
  for (j = _i = 0, _len = _ref.length; _i < _len; j = ++_i) {
    y = _ref[j];
    content += "<div class='morris-hover-point' style='color: " + (this.colorFor(row, j, 'label')) + "'>\n  " + this.options.labels[j] + ":\n  " + (this.yLabelFormat(y)) + "\n</div>";
  }
  if (typeof this.options.hoverCallback === 'function') {
      //edit the line bellow right here. add new params "row._x, row._ymax"
      content = this.options.hoverCallback(index, this.options, content, row.src, row._x, row._ymax);
  }
  return [content, row._x, row._ymax];
};

第2步：在您的定义图表中：编辑活动＆＃39; hoverCallback＆＃39;像这样：

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

第3步：添加自定义＆＃39; moveTo＆＃39;功能：

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

注意：此代码是我的快速自定义。我现在不专注于表演。

Morris图表始终显示标签

1 个答案: