Cách đặt văn bản trên biểu đồ thanh morris.js

Question

Tôi có biểu đồ thanh morris.js. Tôi muốn đặt count trên đầu biểu đồ này. Tôi nhìn vào morris.js bar doc, không thể tìm thấy bất kỳ.

Khi di chuột phải hiển thị value nhưng trên đầu thanh sẽ hiển thị count. Có cách nào làm được việc này không? một cái gì đó giống như hình ảnh cho

Đây là mã của tôi

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 nơi bạn có thể kiểm tra nó.

Answer 1

Hãy thử bằng cách đặt mã này trong CSS

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

Answer 2

Đây là một sự khởi đầu, nó một chút hacky, nhưng nó được công việc làm:

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

và một số CSS để tạo kiểu cho các div

CSS

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

hy vọng bạn có thể chạy với điều đó để tạo hiệu ứng chính xác mà bạn đang tìm kiếm

Answer 3

Tôi chỉ tìm thấy câu hỏi này trong khi tìm kiếm các giải pháp tương tự. Điều này được thực hiện bằng javascript/jquery.

Tôi có thể chia sẻ với bạn mã mà tôi đang sử dụng mà tôi đã phát hiện bằng bản dùng thử, lỗi và nghiên cứu.

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

Kết quả trông như thế này.

Nhưng những gì bạn có thể thử, là thay đổi giá trị ở đây

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

một cái gì đó giống như

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

Sự thay đổi này là chưa được kiểm tra, nhưng sẽ đóng vai trò như là một điểm khởi đầu tốt đẹp .

Kính trọng :)

Answer 4

@chiliNUT @ abi1964 Tôi đã đặt nhiều biểu đồ nhưng tôi gặp sự cố với CSS. Các dữ liệu, chiều cao thanh vv tất cả các công trình tốt nhưng cáC# đang được xếp chồng lên nhau trên đầu trang. Tôi đã thử mọi lần lặp lại vị trí trong CSS. Ý tưởng hay một Fiddle làm thế nào để sửa lỗi này?

image of multiple graphs w/#'s stacking

Answer 5

Bạn có thể mở rộng Morris để đạt được điều này.Vui lòng tham khảo answer này để xem đoạn mã hoạt động đầy đủ.

Thêm một tài sản:

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

Thêm một nguyên mẫu để vẽ nhãn:

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

Sửa đổi Bar.prototype.drawSeries tạo các mẫu prototype, thêm những dòng này (trước khi người cuối cùng khác):

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

Sau đó đặt thuộc tính labelTop thành true trong cấu hình của Thanh Morris:

labelTop: true