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

कोशिश सीएसएस

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

Answer 2

यहाँ में इस कोड को रखकर एक शुरुआत है, इसकी एक सा hacky है, लेकिन यह काम किया जाता है:

जे एस

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

और कुछ सीएसएस divs शैली

सीएसएस

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

उम्मीद है कि आप के लिए

Answer 3

मैं बस, जबकि एक ही समाधान की तलाश में इस सवाल का सही प्रभाव पाया आप देख रहे हैं बनाने के लिए उस के साथ चला सकते हैं। यह जावास्क्रिप्ट/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 मैं एक से अधिक चार्ट रखा, लेकिन मैं एक समस्या w/सीएसएस हो रहा है। डेटा, बार ऊंचाई इत्यादि सभी ठीक काम करते हैं लेकिन # एस को शीर्ष पर रखा जा रहा है। मैंने सीएसएस में स्थिति के हर पुनरावृत्ति की कोशिश की है। विचार या एक पहेली कैसे इसे ठीक करने के लिए?

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

फिर labelTop संपत्ति को मॉरिस बार कॉन्फ़िगर में सत्य पर सेट करें:

labelTop: true