如何在morris.js条形图上放置文本

Question

我有一个morris.js条形图.我想放在count这张图的顶部.我调查了morris.js酒吧文档,找不到任何内容.

在悬停时它应该显示value但在栏顶部应该显示count.有没有办法做到这一点？像给定图像的东西

这是我的代码

Morris.Bar ({
  element: 'bar-example',
  data: [
    {mapname: 's1', value: 10, count: 3},
    {mapname: 's2', value: 4, count: 4},
    {mapname: 's3', value: 12, count: 13}
  ],
  xkey: 'mapname',
  ykeys: ['value'],
  labels: ['No. of days'],
  barRatio: 0.4,
  xLabelAngle: 35,
  hideHover: 'auto',
  barColors: function (row, series, type) {
    console.log("--> "+row.label, series, type);
    if(row.label == "s1") return "#AD1D28";
    else if(row.label == "s2") return "#DEBB27";
    else if(row.label == "s3") return "#fec04c";
  }
});

这是一个可以测试它的链接.

Answer 1

我在寻找同样的解决方案时发现了这个问题.这是在javascript/jquery中完成的.

我可以与您分享我正在使用的代码,我通过试验,错误和研究发现了这些代码.

function parseSVG(s) {
        var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
        div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
        var frag= document.createDocumentFragment();
        while (div.firstChild.firstChild)
            frag.appendChild(div.firstChild.firstChild);
        return frag;
    }

var theData = [
    {mapname: 's1', value: 10, count: 3},
    {mapname: 's2', value: 4, count: 4},
    {mapname: 's3', value: 12, count: 13}
  ]

Morris.Bar ({
element: 'bar-example',
data: theData,
  xkey: 'mapname',
  ykeys: ['value'],
  labels: ['No. of days'],
  barRatio: 0.4,
  xLabelAngle: 35,
  hideHover: 'auto',
  barColors: function (row, series, type) {
    console.log("--> "+row.label, series, type);
    if(row.label == "s1") return "#AD1D28";
    else if(row.label == "s2") return "#DEBB27";
    else if(row.label == "s3") return "#fec04c";
  }
});

var items = $("#bar-example").find( "svg" ).find("rect");
$.each(items,function(index,v){
    var value = theData[index].count;
    var newY = parseFloat( $(this).attr('y') - 20 );
    var halfWidth = parseFloat( $(this).attr('width') / 2 );
    var newX = parseFloat( $(this).attr('x') ) +  halfWidth;
    var output = '<text style="text-anchor: middle; font: 12px sans-serif;" x="'+newX+'" y="'+newY+'" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" font-size="12px" font-family="sans-serif" font-weight="normal" transform="matrix(1,0,0,1,0,6.875)"><tspan dy="3.75">'+value+'</tspan></text>';
    $("#bar-example").find( "svg" ).append(parseSVG(output));
});

输出看起来像这样.

但是你可以尝试的是改变这里的值

var newY = parseFloat( $(this).attr('y') - 20 );

喜欢的东西

var halfHeight = parseFloat( $(this).attr('height') / 2 );
var newY = parseFloat( $(this).attr('y') - halfHeight );

这种变化未经测试,但将作为一个良好的起点.

问候 :)

Answer 2

您可以扩展Morris来实现此目的。请参考此答案以查看完整的工作片段。

添加属性：

Bar.prototype.defaults["labelTop"] = false;

添加原型以绘制标签：

Bar.prototype.drawLabelTop = function(xPos, yPos, text) {
    var label;
    return label = this.raphael.text(xPos, yPos, text)
        .attr('font-size', this.options.gridTextSize)
        .attr('font-family', this.options.gridTextFamily)
        .attr('font-weight', this.options.gridTextWeight)
        .attr('fill', this.options.gridTextColor);
};

修改Bar.prototype.drawSeries原型，添加以下行（在其他行之前）：

if (this.options.labelTop && !this.options.stacked) {
    label = this.drawLabelTop((left + (barWidth / 2)), top - 10, row.y[sidx]);
    textBox = label.getBBox();
    _results.push(textBox);
}

然后labelTop在您的Morris Bar配置中将该属性设置为true：

labelTop: true

Answer 3

尝试将此代码放入CSS中

.morris-hover{position:absolute;z-index:1000;}