如何在morris.js條形圖上放置文本

Question

我有一個morris.js條形圖。我想將count放置在該圖的頂部。我看着morris.js bar doc，找不到任何。

懸停時，應顯示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"; 
    } 
}); 

Here is a link在那裏你可以測試它。

Answer 1

嘗試通過將這些代碼CSS

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

Answer 2

這是一個開始，它有點哈克，但它能夠完成任務：

JS

var graphData= [ 
    {mapname: 's1', value: 10, count: 3}, 
    {mapname: 's2', value: 4, count: 4}, 
    {mapname: 's3', value: 12, count: 13} 
    ]; //store this to its own var so we can access the counts later 


var bar=Morris.Bar ({ 
    element: 'bar-example', 
    data:graphData, 
    xkey: 'mapname', 
    ykeys: ['value'], 
    labels: ['No. of days'], 
    barSizeRatio:0.4, //I think you meant barSizeRatio, not barSize 
    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"; 
    } 
}); 


//first, find the width of a bar 
//this is bar-example width, divided by three, times barSizeRatio 
var barWidth=($('#bar-example').width()/3)*(0.4); 

//now each thru each bar (rect) 

jQuery('rect').each(function (i) { 
    var pos=$(this).offset(); 
    var top=pos.top; 
    top-=20; //originate at the top of the bar 

    //get the height of the bar 
    var barHeight=bar.bars[i]; 
    top+=barHeight/2; //so we can now stick the number in the vertical-center of the bar as desired 
    var left=pos.left; 
    //move it over a bit 
    left+=barWidth/2; 
    //-size of element... 
    left-=10;//should approximately be horizontal center 

    $div=jQuery('<div class="count" style="top:'+top+'px;left:'+left+'px;" />'); 
    $div.text(graphData[i].count); //get the count 
    jQuery('body').append($div); //stick it into the dom 
    console.log($div); 
}); 

和一些CSS來設置div的樣式

CSS

.count{ 
    position:absolute; 
    width:10px; 
    height:20px; 
    line-height:20px; 
    color:white; 
    font-weight:bold; 
    } 

希望你可以與運行創造

Answer 3

我剛剛發現了這個問題，同時尋找同樣的解決方案，你正在尋找確切的療效。這是在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 = theJson[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 4

@chiliNUT @ abi1964我放置多個圖表，但我有一個問題瓦特/ CSS。數據，酒吧高度等所有工作正常，但＃被堆疊在上面。我已經嘗試了CSS中每個位置的迭代。想法或小提琴如何解決這個問題？

image of multiple graphs w/#'s stacking

Answer 5

可以擴展莫里斯實現這一目標。請參閱此answer以查看完整的工作片段。

添加一個屬性：

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 protoype，加上幾行（之前的最後一個人）：

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

然後在您的Morris Bar配置中將labelTop屬性設置爲true：

labelTop: true